Thread: Two Row Horizontal Menu - ComponentArt

Version (Code/DB): AspDotNetStorefront ML 8.0.1.2/8.0.1.2

I have already gone into menuData.xml and changed this:

Code:

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

To

Code:

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

It does what I want by outputting all the sub category list on the topmenu. But the list is so long, it overflows the page width. I am trying to figure out how to make it wrap when it hits the page width. I have gone through the style.css and I know which CSS to edit:

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: #a68845 none;
}

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

.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/menu_separator_orange.gif) no-repeat center left;
}
.TopMenuItem
{
    background: url(images/menu_separator_orange.gif) no-repeat center left;
}


/*leaf menu items*/
.MenuItem, .MenuItemHover, .MenuItem td, .MenuItemHover td
{
    color: #eee;
    border: solid 0px #000;
    cursor: hand;
    cursor: pointer;
    margin: 0;
    background: #40300d none;
    width: 100%!important;
}

.MenuItemHover, .MenuItemHover td
{
    background: #a68845 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;
}

However, this does not change the width, except when I tell the .TopMenuGroup this:

Code:

table-layout:fixed;
width:800px;
word-wrap:break;
height:70px;

But I couldn't get it to wrap the coumn it would just shrink them to fit in the designated width.

First, is this something that can be handled with CSS or should I get in the ComponentArtTree.xslt and turn this menu into a grid? I am kind of lost, if you couldn't tell

If you could point me in the right direction, the docs I will be able to do this in so forth and so on... That would be much appreciated, I will post my solution when I come to it.



I provided a screenshot so you have an idea of what is going on.
Thank you in advance!

I am going to be working on this project now. If anyone has a solution that would be awesome if they would share. Otherwise, I will be finding this and posting how I figured it out.

Wish me luck!

So this was a lot more simple then I had suspected. The answer to all of you looking to do a multi-line nav still using componentart menu all you ned to do is:
Add

Code:

float:left;

To

Code:

.TopMenuItem, .TopMenuItemHover

That was inside my stylesheet wherever you have it located (ie-{root}/skins/Skin_1/style.css).

There you have it multiple rows
Here is a screenshot for ya


Now I have some more cusomizing to get it looking how I want, but that is the multiple rows.