Thread: horizontal menu

Hi,

I am trying to create a horizontal drop down menu...

I have catgeories like

>> Cat A
>> Sub Cat1
>> sub cat 2
>> sub cat 3
>> Cat B
>> sub cat 4
>> sub cat 5
>> cat C
>> sub cat 6


i need the horzontal menu to display the subcategories horizontaly instead of the usual vertical style.

so if i hover on Cat A
i need the sub categories to be displayed as
Sub cat1 | Sub cat 2 | sub cat 3

Is it possible?

regards,
chris

In the skins/skin_#/menuData.xml file

change

Code:

<item Text="(!menu.Categories!)" LookId="TopItemLook" />

to

Code:

<item Text="(!menu.Categories0!)" LookId="TopItemLook" />

yes.... now the parent categories are displayed on the menu...

i want the sub categories to be displayed beneath the menu if i hover on the main catgeory... in horizontal way...

Cat A
Sub cat1 | Sub cat 2 | sub cat 3


i get the menus working as given in the attached pic... but i need the sub cats arranged horizontally beneath the main categories...

I hope it is possible...

I figured it out...

set DefaultGroupOrientation="Horizontal" for the menu.


it is possible to show the sub items always from the left extreme on the menu instead of showing it underneath the main category.

l

Hi! Were you able to get this working/styled correctly? I am trying to do the same.

Thanks,
EFB

Hi,

Go to skins/Skin_#/style.css. Open Style.css and find the CSS code below:

Code:

/* COMPONENT ART HORIZONTAL MENU */

.TopMenuGroup
{
    border: solid 0px #000;
    background-color: transparent;
    line-height:35px;  
}

.MenuGroup
{
    border: solid 0px #000;
    color: #000000;
    font-size: 0.8em!important;
    margin: 0;
    background: #F8F8F8 none;
}

.MenuGroup td, .MenuGroupHover td, .MenuItemHover td, td.MenuItemHover
{
    color: #4776BD;
}

.TopMenuItem, .TopMenuItemHover
{
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    cursor: hand;
    cursor: pointer;
    margin:0;
    padding: 0 1em!important;
    line-height: 35px;
    vertical-align:middle;
    background: url(images/tab-sep.gif) no-repeat top left;
}
.TopMenuItem
{
    background: url(images/tab-sep.gif) no-repeat top left;
}


/*leaf menu items*/
.MenuItem, .MenuItemHover, .MenuItem td, .MenuItemHover td
{
    color: #4776BD;
    border: solid 0px white;
    cursor: hand;
    cursor: pointer;
    margin: 0;
    background: #F8F8F8 none;
    width: 100%!important;
}

.MenuItemHover, .MenuItemHover td
{
    background: #DCDFE2 none;  
}

.ScrollItem
{
    background-color: green;
    font-size: 0.8em;
    border: solid 0px gray;
    cursor: default;
    text-align: center;
}

.ScrollItemH
{
    background-color: aqua;
    color: orange;
    font-size: 0.8em;
    border: solid 0px gray;
    cursor: default;
    text-align: center;
}

.ScrollItemA
{
    background-color: Lime;
    color: yellow;
    font-size: 0.8em;
    border: solid 0px gray;
    cursor: default;
    text-align: center;
}

The CSSCLASS ".TopMenuItem, .TopMenuItemHover" for the MENU.
The CSSCLASS ".MenuItem, .MenuItemHover, .MenuItem td, .MenuItemHover td" for the submenu.

Thanks

Hi - thanks, actually that's not what I meant. The submenu only appears on mouseover of a main menu item, it doesn't stay when you select a category.

Did you happen to figure out how to keep the submenu showing when you have selected a top level item, instead of going away?

Thanks!
EFB

Can you post URL?

Thanks.

Hi,

I am trying to create a menu like the one in http://www.lookfantastic.com/

If you can see, if we click on the main category, the page gets rediected to the catgeory page, and then the sub categories gets displayed. The main category also gets highlighted. the menu deosnt work on hovering.

Also when you click on any category, its sub category always starts from the left end instead of showing up below the catgory.

Is it possible to modify the menu to work like this?

Cheers,
Chris

Originally Posted by AspDotNetStorefront Staff - Alfred

In the skins/skin_#/menuData.xml file

change

Code:

<item Text="(!menu.Categories!)" LookId="TopItemLook" />

to

Code:

<item Text="(!menu.Categories0!)" LookId="TopItemLook" />

what is syntax on V9 version? It did not work I put ="(!menu.Categories0!)" in sitemap in the V9.
I just want to get all the top categories from aspdotnetstorefront, align them on the top menu.

Originally Posted by qinfu

what is syntax on V9 version? It did not work I put ="(!menu.Categories0!)" in sitemap in the V9.
I just want to get all the top categories from aspdotnetstorefront, align them on the top menu.

I would like to know how to do this in V9 as well.

i can not find how to do this in V9 as well.

any ideas?