SmartMenus DHTML Menu / JavaScript Menu - Forums

Gilles · 2007-Apr-17 10:37:19

Hy,

I try to make a horizontale menu with the width at 100%.
I have created my menu with an item whose the width is 100%. I would like the last article is displayed at the right of the screen.

Something like this :

But the last item is displayed on a new line, on the bottom of the first item.

Is there a way to make something like a "nowrap" on the menu ?

Here is my code :

Code:

<UL id="Menu" class="MM">
<LI><A href='xxx>Item1</A></LI>
<LI><A href='xxx>Item2</A></LI>
<LI><A href='xxx>Item3</A></LI>
<LI><A class='BlankItem' href='xxx>Item4</A></LI>
<LI><A href='xxx>Item5</A></LI>
</UL>

Style CSS :

Code:

.BlankItem {width:100%}

Gilles

smartmenus · 2007-Apr-17 12:01:08

Hi Gilles,

You can do it easily by floating the last item to the right like this:

Code:

<UL id="Menu" class="MM">
<LI><A href='xxx>Item1</A></LI>
<LI><A href='xxx>Item2</A></LI>
<LI><A href='xxx>Item3</A></LI>
<LI><A href='xxx>Item4</A></LI>
<LI class='LastItem'><A href='xxx>Item5</A></LI>
</UL>

and the CSS:

Code:

.LastItem {
   float:right;
}

Just note that the "LastItem" class is set to the LI element and not to the link inside it.

Please let me know if you have any troubles.

Cheers!

Gilles · 2007-Apr-18 10:23:33

Thanks a lot !

I have a last question : in the section 3 of the c_config.js file, I have set the "X SubMenuOffset (pixels)" at 25.
The last item on the right have a submenu and this submenu is shifted on the left.

This problem can be solved if the value is set to '0', but is there a way to keep the "X SubMenuOffset (pixels)" param at "25" for other submenus and solve the problem for the last item ?

Regards,
Gilles

smartmenus · 2007-Apr-18 15:03:51

Well, actually, there is a way to achieve this by using a bit additional CSS for the sub menu (the UL element) of the last item - just set it an id:

Code:

<LI class='LastItem'><A href='xxx>Item5</A>
    <UL id="LastItemSub">
        ...
    </UL>
</LI>

and then use the following CSS:

Code:

#LastItemSub {
    left:auto !important;
    margin-left:0 !important;
}
* html>body #LastItemSub { /* This is a needed ugly hack for IE5/Mac */
    left:0 !important;
}

Just note that you need to use the "!important" declaration for the above properties. If you want to set different offset for the sub menu (i.e. not exactly 0), you can play with the "margin-left" property - e.g.:

Code:

#LastItemSub {
    left:auto !important;
    margin-left:-10px !important;
}
* html>body #LastItemSub { /* This is a needed ugly hack for IE5/Mac */
    left:0 !important;
}

Cheers!

Gilles · 2007-Apr-24 05:55:31

Thansk !!! This exactly what i want.

You are my CSS master

cheers

SmartMenus DHTML Menu / JavaScript Menu - Forums

#1 2007-Apr-17 10:37:19

Menu with width at 100%

Code:

Code:

#2 2007-Apr-17 12:01:08

Re: Menu with width at 100%

Code:

Code:

#3 2007-Apr-18 10:23:33

Re: Menu with width at 100%

#4 2007-Apr-18 15:03:51

Re: Menu with width at 100%

Code:

Code:

Code:

#5 2007-Apr-24 05:55:31

Re: Menu with width at 100%

Board footer