|
Creating a vertical left-side category menu really is pretty easy. All that you have to do is create a new (really just copied) template and adjust the css. For the navigation, magento outputs an unordered-list, making it pretty easy to put in a vertical format using a couple of lines of css. There are three things that need to be done in order to output a vertical category structure:
1. Create vertical category template
2. Create CSS
3. Reference in xml files.
1. Create Vertical Category Template
Open template/catalog/navigation/top.phtml. Which should look like
<div class="header-nav-container">
<div class="header-nav">
<h4 class="no-display"><?php echo $this->__('Category Navigation:') ?></h4>
<ul id="nav">
<?php foreach ($this->getStoreCategories() as $_category): ?>
<?php echo $this->drawItem($_category) ?>
<?php endforeach ?>
</ul>
</div>
<?php echo $this->getChildHtml('topLeftLinks') ?>
</div>
Change:
header-nav-container to vertical-nav-container
header-nav to vertical nav
nav to nav_vert
Which would make look like:
<div class="vertical-nav-container">
<div class="vertical-nav">
<h4 class="no-display"><?php echo $this->__('Category Navigation:') ?></h4>
<ul id="nav_vert">
<?php foreach ($this->getStoreCategories() as $_category): ?>
<?php echo $this->drawItem($_category) ?>
<?php endforeach ?>
</ul>
</div>
<?php echo $this->getChildHtml('topLeftLinks') ?>
</div>
Save this file as template/catalog/navigation/vert_nav.phtml.
2. Create CSS for vertical menu
Now that you have the template for the vertical navigation, you need to adjust the css to make it vertical. Copy the css below into you menu.css file:
/**********************************************Vertical Nav ****************************************/
#nav_vert { padding:0 20px; font-size:1em; z-index:999; width:190px; }
/************** ALL LEVELS *************/ /* Style consistent throughout all nav levels */
#nav_vert li {
width:175px;
list-style:none;
position:relative;
text-align:left;
}
#nav_vert li.over { z-index:999; }
#nav_vert li.active { z-index:999; } /* to prevent the li separator from showing through on mouseover on li */
#nav_vert a { line-height:1.3em; }
#nav_vert a, #nav_vert a:hover { display:block; text-decoration:none; }
#nav_vert span { display:block; cursor:pointer; }
/************ 1ST LEVEL ***************/
#nav_vert li { float:left; background:url(../images/nav_bg.gif) repeat-x 50%; height:30px; margin-right:1px; }
#nav_vert li.active a { color:#4c6a16; }
#nav_vert a {
float:left;
padding:5px 12px 6px 8px;
color:#4c6a16;
font-weight:bold;
font-family:Trebuchet MS;
font-size:13px;}
#nav_vert li.over a, #nav_vert a:hover { color:#CCCCCC; }
/************ 1ST LEVEL RESET ************/
#nav_vert ul li, #nav_vert ul li.active {
float:none;
height:auto;
background:none;
margin:0;
}
#nav_vert ul a, #nav_vert ul a:hover {
float:none;
padding:0;
background:none;
}
#nav_vert ul li a { font-weight:normal !important; }
/************ 2ND LEVEL ***********/
#nav_vert ul {
position: absolute;
width:15em;
margin-left:125px;
top:5px;
left:-10000px;
border:1px solid #666666;
}
/* Show menu */
#nav_vert li.over ul { left:0; }
#nav_vert li.over ul ul { left:-10000px; }
#nav_vert li.over ul li.over ul { left:100px; }
#nav_vert ul li a { background:#FFFFFF/*#ecf3f6*/; }
#nav_vert ul li a:hover { background: #F2F1D2; /*#d5e4eb;*/ }
#nav_vert ul li a span { background:url(../images/nav_divider.gif) repeat-x 0 100%; }
#nav_vert ul li a, #nav_vert ul li a:hover { color:#2f2f2f !important; }
#nav_vert ul span, #nav_vert ul li.last li span { padding:3px 15px 4px 15px;}
#nav_vert ul li.last span { background:none; }
/************ 3RD+ LEVEL ************/
#nav_vert ul ul { top:5px;}
#nav_vert ul ul ul { left:-10000px;}
#nav_vert li.over ul li.over ul ul { left:-10000px;}
#nav_vert li.over ul li.over ul li.over ul { left:100px; }
/* Fix for the IE bug */
#nav_vert iframe {
position: absolute;
left: -1px;
top: 0;
z-index: -1;
filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
}
Note: The css is essentially the same for the horizontal nav, except for two spots. nav_vert and nav_vert li. Notice, we put a width on these two items, which will restrict the category menu to the width of the column, thus creating a vertical, rather than horizontal menu, which doesn’t have a defined width for the line items. You’ll also notice that we created a new container and box for the vertical menu called vertical-nav-container and vertical-nav. these allow for additional markup and styling that can be added to the main boxes.css file. Here, I will leave them blank. Also, please note that the above css was copied and altered from one of our test sites, so it may reference background-images that you do not have. Like I said the important think is putting the width restriction on the main vert_nav div and the vert_nav li. The rest can be customised for your site.
3. Reference your new menu
Ok, now you have a new vertical category menu that is not showing up anywhere. Great. You need to reference the new template in the catalog.xml for your template. In the <default></default> block of you catalog.xml file add:
<reference name="left">
<block type="catalog/navigation" name="catalog.vertnav" template="catalog/navigation/vert_nav.phtml" />
</reference>
The default block should be at the top of your catalog.xml file.
There is one thing that I should point out, this will appear after the layered navigation on the left-hand column. This is just one-way, I’m sure, of how to achieve this, and was put together hastily.
|
Sales: Call 877.832.5289 (N America)|310.295.4144 (International)
