[solved] footer menu css wanted

[mvandiermen]

Looking for css that will display all the parent links in one horizontal link like:
HOME | ABOUT US | SERVICES | SOLUTIONS | NEWS & EVENTS | SUPPORT | CONTACTS

where i place the div style around the {menu} of cause

[viebig]

you should create a new menu template on menu manager, apply a class or id to the ul and start coding the css/xhtml

also.. just for the toplevels.. you need something like

Code: Select all

{menu template="youtemplatename" number_of_levels=1}

Regards

G

[mvandiermen]

quote SimonSchaufi

http://forum.cmsmadesimple.org/index.ph ... 286.0.html

[mvandiermen]

I know this is an old post now, but first time i tried this i could not find a way to do this excluding the line at the beginning of the menu.
e.g. | home | something | something
instead of: home | something | something
if anyone else needs to do this and you cant find a better way; you can:
1. go to : layout > menu manager
2. copy the menu your using so that you can edit it
3. look at the html output of your website
in the menu you will see something like

Code: Select all

<ul> <li><a href="http://www.soemthing.com/index.php">Home</a></li>

copy that
and go back to edit menu in menu manager
4. find the first instance of <ul> in the menu that defines the starting point
directly under that pasted
<li class="nosep"><a href="index.php">Home</a></li>
and save the menu
5. add code to your CSS like

Code: Select all

#menu li,
{ padding: 0px 11px 0px 11px; 
  float: left;
background-image:url(images/sep.gif); 
background-repeat:no-repeat; background-position:left;

#menu li.nosep {
background-image:none;
}

6. disable the homepage from being show in the menu becuase we have added it directly as above

7. replace the menu output tag on the template

method is adding separation background image (line image) to all li; and one li with a different class saying no background image

example sep image http://www.weddingswithoutfuss.com.au/images/sep.gif

[Dr.CSS]

You could add class='{$page_alias}' to the LI then use the alias of the page, menu text, you don't want the line on, background-image:none...

[mvandiermen]

You could add class='{$page_alias}' to the LI then use the alias of the page, menu text, you don't want the line on, background-image:none...

yes that is a bit better with

Code: Select all

#menu li.home {
background-image:none;
}

Thanks. I will use that next time.

[mcDavid]

You don't have to change the menu template at all, just use the :first-child psuedo-class.

Code: Select all

#menu li:first-child {
  background-image: none;
}

also I think it would be better to use border-left to add a simple seperator line, unless you want the line to be some fancy gradient or something.