Showmenu2 - CSS/Styling

[foonji]

G'day Guys,

Have been using WB for a long time and loving it, I've just redone my layout and doing the final touches at the moment, but have run into a brick wall getting a submenu with showmenu2 working how I want it.

I have tried looking at old threads here and the showmenu docs with no avail

Basically it is just a Horizontal Text Nav, so;

Link 1 | Link 2 | Link 3 | Link 4

some of these links/pages are parents and have a further page under them, and when one of these links/pages is opened it lists it's child pages. It does so immediately after the parent link, like this;

Link 1 | Link 1 Child | Link 1 Child | Link 2 | Link 3 | Link 4

I want to make the child links appear below the main links on the next line, preferably aligned with the parent. But haven't been able to make it happen. I can't get it any where near how I want it.

The showmenu2 code;

Code: [Select]

<div id="subMenu">
            
            <BR /><?php show_menu2(2, SM2_ROOT, SM2_START+1, SM2_TRIM,&#39; | <li class="[class]">[a][menu_title]</a>&#39;, &#39;</li>&#39;, &#39;<ul class="[class]"&#39;, &#39;</ul>&#39;, &#39;[a][menu_title]</a>&#39;); ?><BR />
  
            </div>
The current CSS;

Code: [Select]

.menu-current {
color:#FFFFFF;
font-weight:bold;
}

.menu-current a {
background: #2d2d2d;
}

.menu-child {
/* position:absolute; */
}

.menu-child a {
background:none;
}

.menu-top li {
display: inline;
list-style-type: none;
}

.menu-top {
line-height:20px;

}

.menu-top ul li a {
padding: 2px 4px 2px 4px;
margin: 0px;
color: #dd6900;
}    

.menu-top ul li a:hover {
color: #FF9900;
padding: 2px 4px 2px 4px;
margin: 0px;
text-decoration: none;
}

.menu-top ul li a:active {
color: #000000;
text-decoration: none;
}

If anyone can guide me in the right direction it would be greatly appreciated.

Thanks,
Michael
www.franchi.com.au

[kweitzel]

Here are 2 possible solutions for you:

http://css.maxdesign.com.au/listamatic2/horizontal04.htm
http://css.maxdesign.com.au/listamatic2/horizontal05.htm

On the other hand we do have some Templates with DropDown Menues available at the add-on repository ...

cheers

Klaus

[foonji]

Here are 2 possible solutions for you:

http://css.maxdesign.com.au/listamatic2/horizontal04.htm
http://css.maxdesign.com.au/listamatic2/horizontal05.htm

On the other hand we do have some Templates with DropDown Menues available at the add-on repository ...

cheers

Klaus

Awesome, The second one looks like it will be the winner. Will give it a go and see how it goes!

[foonji]

Ok, the submenu UL that gets outputted by showmenu doesn't have a class name set, where can I set it?

[foonji]

I worked it out - SM2_NUMCLASS

[foonji]

I sort of got it working, but a few little bugs;

1. Not positioned in the center of the page
2. Seems first link is left out? maybe because of positioning
3. Submenu links are on top of each other.

Can anyone help me out with these?

The New CSS developed from http://css.maxdesign.com.au/listamatic2/horizontal05.htm#

Code: [Select]

.menu-0 {
position: relative;
margin: 0;
padding: 0;
line-height:20px;
}

.menu-1 {
line-height:20px;
}

.menu-0 li {
float: left;
margin: 0 0 0 2px;
list-style-type: none;
display: inline;

}

.menu-0 li a {
position: relative;
width: auto;
display: block;
text-align: left;
text-decoration: none;
padding: 2px 4px 2px 4px;
margin: 0px;
color: #dd6900;
}

.menu-0 li a:hover {
color: #FF9900;
padding: 2px 4px 2px 4px;
margin: 0px;
text-decoration: none;
}

.menu-0 li .menu-current a {
background: #2d2d2d;
}

.menu-0 li .menu-current a:hover {

}

.menu-0 ul .menu-1 {
position: absolute;
width: 100%;
left: 0;
margin: 0;
padding: 0;
white-space: nowrap;
}

.menu-0 ul .menu-1 li {
width: 14ex;
margin: 0;
border: 0;
}

.menu-0 ul li .menu-1 ul li a {
width: auto;
border: 0;
padding: 2px 4px 2px 4px;
margin: 0px;
color: #dd6900;

}

.menu-0 ul li .menu-1 ul li a:hover {
color: #FF9900;
padding: 2px 4px 2px 4px;
margin: 0px;
text-decoration: none;
}

.menu-0 ul li .menu-1 ul li a:active {
color: #000000;
text-decoration: none;
}

.menu-0 ul .menu-1 li .menu-current a {


}

.menu-child a {
background:none;
}

[Argos]

You can also use 2 menu's: the main with showmenu2, and the second by using a childpages droplet and floating the links left in a centered container.