WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: foonji on March 23, 2010, 01:36:25 PM

Title: Showmenu2 - CSS/Styling
Post by: foonji on March 23, 2010, 01:36:25 PM

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

Title: Re: Showmenu2 - CSS/Styling
Post by: kweitzel on March 23, 2010, 01:48:37 PM

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

Title: Re: Showmenu2 - CSS/Styling
Post by: foonji on March 23, 2010, 01:54:49 PM

Quote from: kweitzel on March 23, 2010, 01:48:37 PM

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!

Title: Re: Showmenu2 - CSS/Styling
Post by: foonji on March 23, 2010, 11:45:50 PM

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

Title: Re: Showmenu2 - CSS/Styling
Post by: foonji on March 23, 2010, 11:52:25 PM

I worked it out - SM2_NUMCLASS

Title: Re: Showmenu2 - CSS/Styling
Post by: foonji on March 24, 2010, 01:00:07 AM

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;
}

Title: Re: Showmenu2 - CSS/Styling
Post by: Argos on March 24, 2010, 11:34:26 AM

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.