Horizontal Menu

[Bluesplayer]

Alterations I carried out:

1. template layout.tpl altered and the positioning of the category files changed so that it resided under the header on my own site:

Code: Select all

		if (isset($header)) { echo $header; } 
		if (isset($category)) {echo $category;} 
		if (isset($search)) { echo $search; }

2. category.css styling created:

Code: Select all

.category {
	position: absolute;
       z-index: 100;
       margin-top: 50px;
       margin-left: 165px;
       font-size: 120%;
}
.category .menu_breadcrumb{
	color: #FFFFFF;
	background: #4b545f;
}
.category ul li img {
	float: right;
}
.category ul ul {
	display: none;
}

	.category ul li:hover > ul {
		display: block;
	}


.category ul {
	list-style: none;
	position: relative;
	display: inline-table;
}
	.category ul:after {
		content: ""; clear: both; display: block;
	}

	.category ul li {
		float: left;
	}
		.category ul li:hover {
			/*background: #4b545f;*/
		}
			.category ul li:hover a {
				color: #fff;
                            /*width: 100px; */
			}
		
		.category ul li a {
			display: block; 
                     width: 110px; 
                     /*color: #757575; */
                     text-decoration: none;
		}
			
		
	.category ul ul {
       padding: 0;
	position: absolute; top: 100%;
       border-left: 2px solid transparent;		
	}
		.category ul ul li {
			float: none; 
                     background: url('/files/images/leafred.jpg');
			border-top: 1px solid #FFFFFF;
			border-bottom: 1px solid #FFFFFF; 
                     position: relative;
                     width: 115px; 
                     margin-top: -1px;
		}
			.category ul ul li a {
                     height: 20px;
		       padding: 5px 0px 0px 5px;
			color: #fff;
			}	
				.category ul ul li a:hover {
				background: #4b545f;
				}
		
	.category ul ul ul {
		position: absolute; left: 100%; top:0;
	}

.category .cat_lvl_0 {
       height: 20px;
	color: #FFFFFF;
       background: url('/files/images/leafred.jpg');
	border-radius: 5px 5px 0px 0px;
       width: 110px;
       display: block;
       padding-left: 5px;
       padding-top: 5px;
       margin-left: 2px;

}

I also removed all reference to the category from the css file found in the colours2 directory.

3. code removed from the template category.tpl file (my own has the modification displaying the category product numbers):

Code: Select all

<?php 
  $head_def->setcss($this->style . "/css/category.css");
  $head_def->set_javascript("ajax/jquery.js");
  $head_def->set_javascript("ajax/jqueryadd2cart.js");
?>
<div>
  <div id="category_menu" class="category">
  <div class="menu_breadcrumb" id="menu_breadcrumb"></div>
  <?php
	$output = '<ul>'."\n";
	$level = 0;
	foreach ($categories as $key => $category) {
	  if ($key< count($categories)-1){
		if($categories[$key+1]['level'] > $level){
		  $output .= "\t".'<li>';
		  $output .= '<a class="'. $category['class'] . '" href="' . $category['href'] . '">';
		  $output .= $category['name'] . ($category['products_in_category'] != 0 ? ' (' . $category['products_in_category'].')':'').'<img src="catalog/styles/' . $this->style . '/image/arrow.png"></a>' . "\n";
		  $ul = ($categories[$key+1]['status'] == 'enabled') ? '<ul class="menu" style="display:none;">': '<ul class="menu" style="display:'.$categories[$key+1]['type'].'">';
		  $output .= $ul . "\n";
		  $level++;
		} else if($categories[$key+1]['level'] < $level){
		  $output .= "\t".'<li>';
		  $output .= '<a class="'. $category['class'] . '" href="' . $category['href'] . '">';
		  $output .= $category['name'] . ($category['products_in_category'] != 0 ? ' (' . $category['products_in_category'].')':'').'</a></li>' . "\n";
		  while ($categories[$key+1]['level'] < $level){
		    $output .= '</ul></li>'. "\n";
			$level--;
		  }
		} else{
		  $output .= "\t".'<li>';
		  $output .= '<a class="'. $category['class'] . '" href="' . $category['href'] . '">';
		  $output .= $category['name'] . ($category['products_in_category'] != 0 ? ' (' . $category['products_in_category'].')':'').'</a></li>' . "\n";
		}
	  } else {
		$output .= "\t".'<li>';
		$output .= '<a class="'. $category['class'] . '" href="' . $category['href'] . '">';
		$output .= $category['name'] . ($category['products_in_category'] != 0 ? ' (' . $category['products_in_category'].')':'').'</a></li>' . "\n";
	  }
	}
	while ($level >0){
	  $output .= '</ul></li>'. "\n";
	  $level--;
	}
	$output .= '</ul>' . "\n";
	echo $output;
  ?>
  </div>
<div class="columnBottom"></div>
</div>

Code removed mostly to stop the menu from attempting to remember click settings but also to make styling simpler.

The above will display a top horizontal menu with rounded corners - left and right - which you can change by altering 'border-radius', or remove it altogther. My menu uses background images which again can be removed and colour used instead. Positioning of the menu is made by altering the margin-left and margin-top found under .category. Menu widths will also need to be manually adjusted to suit your own site.

I should also point out my site uses both the category numbers and category hidden modifications created by Leo and these work with the above menu settings.