CubeCartForums.org for CubeCart third-party documentation, modifications, skins and services

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Vertical DropDown Menu, Looks great on the kurouto skin.
Flashmount
post Apr 13 2012, 10:42 PM
Post #1


Regular Member
Group Icon

Group: Commercial Contributor
Posts: 226
Joined: 1-August 09
From: Canada
Member No.: 11,171

Catalogue Listing
Store Review Here





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

QUOTE
#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.

QUOTE
<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".


--------------------
Go to the top of the page
 
+Quote Post
SilentNight
post Jun 7 2012, 02:35 PM
Post #2


Member
Group Icon

Group: Members
Posts: 13
Joined: 24-September 09
Member No.: 11,890



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??
Go to the top of the page
 
+Quote Post
Kinetic
post Mar 4 2013, 05:46 PM
Post #3


Member
Group Icon

Group: Members
Posts: 43
Joined: 13-March 07
From: Florida
Member No.: 9



QUOTE (SilentNight @ Jun 7 2012, 09:35 AM) *
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


--------------------
Why Leash your imagination in the first place?
Go to the top of the page
 
+Quote Post
Kinetic
post Mar 7 2013, 06:12 AM
Post #4


Member
Group Icon

Group: Members
Posts: 43
Joined: 13-March 07
From: Florida
Member No.: 9



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


--------------------
Why Leash your imagination in the first place?
Go to the top of the page
 
+Quote Post
bkessler91
post Jun 5 2013, 04:49 PM
Post #5


Member
Group Icon

Group: Members
Posts: 28
Joined: 2-October 10
Member No.: 18,291



Is this mod for CC5? I have implemented the mod, shows the menu format change but does not branch out.

Yes, I have cleared the cashe.


--------------------
CubeCart Version: 5.2.11
PHP Version: 5.4.29
MySQL Client API version: 5.5.33
Go to the top of the page
 
+Quote Post
Flashmount
post Jun 5 2013, 05:26 PM
Post #6


Regular Member
Group Icon

Group: Commercial Contributor
Posts: 226
Joined: 1-August 09
From: Canada
Member No.: 11,171

Catalogue Listing
Store Review Here



QUOTE (bkessler91 @ Jun 5 2013, 11:49 AM) *
Is this mod for CC5? I have implemented the mod, shows the menu format change but does not branch out.

Yes, I have cleared the cashe.


Please copy and paste the code for "box.navigation.php" again and let me know if that fixes resolves the issue.


--------------------
Go to the top of the page
 
+Quote Post
chuliano
post Jul 9 2014, 06:07 PM
Post #7


Member
Group Icon

Group: Members
Posts: 33
Joined: 6-September 09
From: Argentina
Member No.: 11,636



QUOTE (Flashmount @ Jun 5 2013, 02:26 PM) *
Please copy and paste the code for "box.navigation.php" again and let me know if that fixes resolves the issue.



this works perfect, but as you can put an icon sub menus indicating that you have other submenu?.

Because the menu tree comes already assembled as follows: {$NAVIGATION_TREE}

is there any way to disassemble into several parts: {$ NAVIGATION_TREE}???

as is the case of the administration menu panel that is armed differently.


--------------------
Cubecart 5.2.12 Lite Free
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



RSS Lo-Fi Version Time is now: 20th September 2014 - 03:52 AM
CubeCart Developers Network
Get CubeCart!
© 2007 - 2014  CubeCartForums.org in association with Inspired Solutions. Sponsored by Devellion