Horizontal menu

[Yannick]

Hello mate,
I have a quick question.... Does anyone please knows how to use the
menu-helper to create an Horizontal menu ? I can't find it in the
previous threads of this group.... I can do the vertical menu but not
horizontal...

Thanks in advance for your help...


Cheers,
Yannick P.

[Mladen Milankovic]

Hi.

Don't know how does your code for the menu look like, but I'll assume you're
using the built-in function MENU.

So if you have something like this:

{{=MENU(response.menu, _class = 'web2py-menu web2py-menu-vertical')}}

just change the vertical to horizontal, like:
{{=MENU(response.menu, _class = 'web2py-menu web2py-menu-horizontal')}}

The scaffolding css contains the definition for web2py-menu-horizontal if you
changed one in your application.

This will make the "main" menu horizontal, but the submenus will still
dropdown vertically.

Hope this helps.

regards
mmlado

[Yannick]

Thanks for the note mmlado... I tried that before it works BUT what i
meant is when i change the class to my customize CSS horizontal menu
(NOT this one web2py-menu web2py-menu-horizontal" ) it always appear
as Vertical menu...
Here is my Horizontal CSS menu:

.menu{
font-weight: bold;
width: 100%;
}

.menu ul{
padding: 6px 0 7px 0;
margin: 0;
text-align: right;
}

.menu ul li{
display: inline;
}

.menu ul li a{
color: #494949;
padding: 6px 3px 4px 3px;
margin-right: 20px;
text-decoration: none;
border-bottom: 3px solid gray;
}

.menu ul li a:hover, .menu ul li a.selected{
border-bottom-color: black;
}

and in the Built-in function Menu this is what i have:
{{=MENU(response.menu, _class = 'menu')}}


Any idea why i have that behavior ?

Thanks mate.

Yannick P.

[Mladen Milankovic]

Hi.

I tried it and it didn't work, and then looked at it with firebug and changed
it a little. The ul that contains the menu has the class menu, in this case.
As you wrote the css, it says ul which is somewhere in some element with class
menu.
So I changed the definitions like this:

ul.menu{
font-weight: bold;
width: 100%;

padding: 6px 0 7px 0;
margin: 0;
text-align: right;
}

ul.menu li{
display: inline;
}

ul.menu li a{

color: #494949;
padding: 6px 3px 4px 3px;
margin-right: 20px;
text-decoration: none;
border-bottom: 3px solid gray;
}

ul.menu li a:hover, ul.menu li a.selected{
border-bottom-color: black;
}

It's horizontal now.

regards
mmlado

[Yannick]

Oh thanks a lot for the tips.. yes now it works... Thanks :)