Vertical DropDown Menu, Looks great on the kurouto skin. Options

[Flashmount]

A tutorial on how to apply this beautiful and unique vertical menu to your Cubecart Skin. This menu comes in handy when you have lots of categories to display, and it’s also compatible with all modern browsers.

View Demo

To start, you will first need to copy a JPEG image form the link below into the following location of your skin. (skins/YourSkin/images/common/background.jpg)

IMAGE (Right click and "save as")

Next we will add the below css code, into the common.css file located at

skins/YourSkin/styles/common.css

#vertical-menu, #vertical-menu ul, #vertical-menu li{
padding:0;
margin:0;
}
#vertical-menu{
background: url(../images/common/background.jpg);
padding: 3px;
width: 192px;
border: 1px solid #c0c0c0;
}
#vertical-menu li{
list-style: none;
position: relative;
width:147px;
height: 30px;
padding:0 20px;
line-height: 30px;
background-color: #fff;
border: 1px solid #e1e1e1;
margin: 2px;
}
#vertical-menu li a{
text-decoration:none;
color: #888;
font-family: Arial, Helvetica, san-serif;
font-size: 12px;
display: block;
}
#vertical-menu ul ul{
background: url(../images/common/background.jpg);
padding: 3px;
width: 332px;
border: 1px solid #c0c0c0;
-moz-box-shadow: 2px 2px #e9e9e9;
-webkit-box-shadow: 2px 2px #e9e9e9;
box-shadow: 2px 2px #e9e9e9;
}
#vertical-menu ul li li{
background-color: #fff;
border: 1px solid #e1e1e1;
width: 120px;
margin: 2px;
float: left;
}
#vertical-menu li:hover{
background-color: #f6f6f6;
}
#vertical-menu ul ul{
position: absolute;
top:0;
left:190px;
visibility:hidden;
}
#vertical-menu ul li:hover ul{
visibility:visible;
}

After you have successfully completed the above steps, Locate and open the box.navigation.php file found at

skins/YourSkin/templates/box.navigation.php

If you are using a stock Cubecart skin, you will see a line starting with <ul id=”menu” class=”accordion”> select this line and anything below it until the following end tag </ul> and remove and replace with the content below.

<div id=”vertical-menu”>
<ul>
<li><a href=”{$STORE_URL}/index.php” title=”{$LANG.navigation.homepage}”>{$LANG.navigation.homepage}</a></li>

{$NAVIGATION_TREE}

{if $CTRL_CERTIFICATES && !$CATALOGUE_MODE}
<li><a href=”{$URL.certificates}” title=”{$LANG.navigation.giftcerts}”>{$LANG.navigation.giftcerts}</a></li>
{/if}
{if $CTRL_SALE}
<li><a href=”{$URL.saleitems}” title=”{$LANG.navigation.saleitems}”>{$LANG.navigation.saleitems}</a></li>
{/if}
</ul>
</div>

That’s it! To display the changes correctly on your skin you have to clear your store’s cache. To do this login to your Admin Panel and click on “Maintenance” in the left column. Select the “Clear Cache” checkbox and click on “Submit”.

[SilentNight]

Thank you for this fantastic tutorial! I've been trying to do this (basically similar to the v4 menu) for ages without any luck. Would it be possible to do something similar for a horizontal menu too??

[Kinetic]

Thank you for this fantastic tutorial! I've been trying to do this (basically similar to the v4 menu) for ages without any luck. Would it be possible to do something similar for a horizontal menu too??

Id love to see this implemented as a horizontal ala sucker fish type menu for cats
would really open up modifying the stores look

[Kinetic]

Ive sorted it out to make it a horizontal drop down menu it aint pretty yet but when it is Ill post the updated CSS here