Different Display Types For Category Menu

Different Display Types For Category Menu

Home » Kartris ASP.NET Ecommerce Software » Kartris technical issues

https://forum.kartris.com/Topic2036.aspx

Print Topic | Close Window

By JustinRebelCIO - Wed 8 May 2013

Hi, I notice right now the main category menu is across the top. How do i change it to look similar to this site where its along the side...

http://www.mtmc.co.uk/

I know this can be somehow done through the backend, just not to sure on what to do.

Also is there also an option to NOT have it show up on the home page?

By Paul - Thu 9 May 2013

This is down to CSS.

To get the menu down the site, need to modify the CSS so the items layout vertically. It's the same type of menu within kartris. This is the CSS from Kartris 1.4, where the CSS menu at default was vertical, kind of like this one:

www.wholesalemx.com

/* 
========================================================================
-- css fold-style
========================================================================
*/
#categorymenu .cssfoldout
{
    display: block;
    margin: 2px 0 5px 0;
}

#categorymenu .cssfoldout,
#categorymenu .cssfoldout a 
{

}

#categorymenu .cssfoldout ul.KartrisMenu 
{
    position: relative;
}

#categorymenu .cssfoldout ul
{
    padding: 0;
    border: 0;
    margin: 0;
}

#categorymenu .cssfoldout ul ul:hover
{
    background-color: #444;
}

#categorymenu .cssfoldout ul.KartrisMenu, 
#categorymenu .cssfoldout ul.KartrisMenu ul
{
    top: 0px;
    z-index: 3;
}

#categorymenu .cssfoldout ul.KartrisMenu ul
{
    position: absolute;
    left: 159px;
    top: 0px;
    visibility: hidden;
    border-right: solid 2px #000;
    border-bottom: solid 2px #000;
    background-color: #444;
    width: 159px;
    margin: 0 0 0 -1px;
}

#categorymenu .cssfoldout ul.KartrisMenu li
{
    position: relative;
    list-style: none;
    float: none;
    margin: 0;
    width: 159px;
}

#categorymenu .cssfoldout ul.KartrisMenu li a,
#categorymenu .cssfoldout ul.KartrisMenu li span
{
    display: block;
    text-decoration: none;
    padding: 2px 11px 2px 10px;
    font-weight: normal;
}

#categorymenu .cssfoldout ul:hover li a,
#categorymenu .cssfoldout ul:hover li span
{
    font-weight: normal;
}

#categorymenu .cssfoldout ul.KartrisMenu li:hover, 
#categorymenu .cssfoldout ul.KartrisMenu li.KartrisMenu-Hover
{
    background-color: #444;
    color: #fff;  
}

#categorymenu .cssfoldout ul.KartrisMenu li:hover a
{
    background-color: #444;
    color: #fff;  
}

#categorymenu .cssfoldout ul.KartrisMenu li:hover a:hover
{
    background-color: #444;
    color: #fff;  
}

/* 2nd tier */
#categorymenu .cssfoldout ul.KartrisMenu li:hover ul ul,
#categorymenu .cssfoldout ul.KartrisMenu li.KartrisMenu-Hover ul ul
{
    visibility: hidden;
}

#categorymenu .cssfoldout ul.KartrisMenu ul li 
{
    float: left;
}

#categorymenu .cssfoldout ul.KartrisMenu li:hover ul li a,
#categorymenu .cssfoldout ul.KartrisMenu li:hover ul li span
{
    display: block;
    color: #999;
    background-color: #444;
    border-left: dotted 1px #999;
}

#categorymenu .cssfoldout ul.KartrisMenu li:hover ul li:hover a, 
#categorymenu .cssfoldout ul.KartrisMenu li:hover ul li:hover span
{
    background-color: #444;
    color: #fff;
}

/* 3rd tier */
#categorymenu .cssfoldout ul.KartrisMenu li:hover ul ul ul,
#categorymenu .cssfoldout ul.KartrisMenu li.KartrisMenu-Hover ul ul ul
{
    visibility: hidden;
    margin-left: -1px;
}

#categorymenu .cssfoldout ul.KartrisMenu li ul ul li 
{
    float: left;
}

#categorymenu .cssfoldout ul.KartrisMenu li:hover ul li:hover ul a,
#categorymenu .cssfoldout ul.KartrisMenu li:hover ul li:hover ul span
{
    display: block;
    color: #999;
    background-color: #444;
    border-left: dotted 1px #999;
}

#categorymenu .cssfoldout ul.KartrisMenu li:hover ul li:hover ul li:hover a, 
#categorymenu .cssfoldout ul.KartrisMenu li:hover ul li:hover ul li:hover span
{
    background-color: #444;
    color: #fff;
}

/* 4th tier */
#categorymenu .cssfoldout ul.KartrisMenu li:hover ul ul ul ul,
#categorymenu .cssfoldout ul.KartrisMenu li.KartrisMenu-Hover ul ul ul ul
{
    visibility: hidden;
}

#categorymenu .cssfoldout ul.KartrisMenu li:hover ul li:hover ul li:hover ul a,
#categorymenu .cssfoldout ul.KartrisMenu li:hover ul li:hover ul li:hover ul span
{
    display: block;
}

#categorymenu .cssfoldout ul.KartrisMenu li:hover ul li:hover ul li:hover ul li:hover a, 
#categorymenu .cssfoldout ul.KartrisMenu li:hover ul li:hover ul li:hover ul li:hover span
{

}

/* 5th tier */
#categorymenu .cssfoldout ul.KartrisMenu li:hover ul ul ul ul ul,
#categorymenu .cssfoldout ul.KartrisMenu li.KartrisMenu-Hover ul ul ul ul ul
{
    visibility: hidden;
}

#categorymenu .cssfoldout ul.KartrisMenu li:hover ul li:hover ul li:hover ul li:hover ul a,
#categorymenu .cssfoldout ul.KartrisMenu li:hover ul li:hover ul li:hover ul li:hover ul span
{
    display: block;
}

#categorymenu .cssfoldout ul.KartrisMenu li:hover ul li:hover ul li:hover ul li:hover ul li:hover a, 
#categorymenu .cssfoldout ul.KartrisMenu li:hover ul li:hover ul li:hover ul li:hover ul li:hover span
{

}

/* Add more rules here if your menus have more than three (3) tiers */
#categorymenu .cssfoldout ul.KartrisMenu li:hover ul,
#categorymenu .cssfoldout ul.KartrisMenu li li:hover ul,
#categorymenu .cssfoldout ul.KartrisMenu li li li:hover ul,
#categorymenu .cssfoldout ul.KartrisMenu li li li li:hover ul,
#categorymenu .cssfoldout ul.KartrisMenu li li li li li:hover ul,
#categorymenu .cssfoldout ul.KartrisMenu li.KartrisMenu-Hover ul,
#categorymenu .cssfoldout ul.KartrisMenu li li.KartrisMenu-Hover ul,
#categorymenu .cssfoldout ul.KartrisMenu li li li.KartrisMenu-Hover ul
#categorymenu .cssfoldout ul.KartrisMenu li li li li.KartrisMenu-Hover ul
#categorymenu .cssfoldout ul.KartrisMenu li li li li li.KartrisMenu-Hover ul
{
    visibility: visible;
}

#categorymenu .cssfoldout .KartrisMenu-Vertical ul.KartrisMenu li
{
    width: 170px;
}