Simple CSS footer menu

Ever been tempted to hard code pipe characters (vertical bars) between anchor tags to quickly produce a simple menu? Here I am in an effort to stop you.

The markup you could use and the one you should use

This is the quick and dirty (semantically challenged I’d say) markup you could use for a secondary navigation like a footer menu:

<a>Privacy Policy</a> | <a>Terms of Use</a> | <a>Contact</a>

…See those pipe line separation characters? Their soul purpose is to visually delimit elements. They have no business in the markup.

And this is the elegant markup (you already know) you should use:

<ul>
 <li><a>Privacy Policy</a></li>
 <li><a>Terms of Use</a></li>
 <li><a>Contact</a></li>
</ul>

So elegant you’ll wanna wear it to a wedding.

The CSS code

ul { margin:0; padding:0;
 color:#000; /* Base text color for the menu */
}
ul li { float:left; list-style:none; /* Makes the list items go horizontally in lieu of default vertical display */ }
ul li:after {
 content:"|"; /* Or go Facebook style and use "·" (the interpunct character) for separators */
 color:#666; /* You may want to make the separators a bit more subtle than the base text color */
}
ul li:last-child:after { content:""; /* No separator for the last item in the list */ }
ul li a {
 margin:0 8px; /* Set margins around the links */
 color:blue; /* Text colors for the links */
}

JSFiddle link

Simple Footer Menu

Notes

The above CSS snippet will affect all unordered lists on your page. I intentionally left it like that so you can change it to something more specific like:

#footer ul {...}
#footer ul li {...}
#footer ul li:after {...}
#footer ul li:last-child:after {...}
#footer ul li a {...}
Posted in blog Tagged with: ,
5 comments on “Simple CSS footer menu
  1. jmmh says:

    my list in all document change :(

    this the code:

    nav.footer {

    }
    nav.footer ul {
    }

    ul li:after {
    content:”|”; /* Or go Facebook style and use “·” (the interpunct character) for separators */
    color:#666; /* You may want to make the separators a bit more subtle than the base text color */

    }
    ul li:first-child:after { content:””; /* No separator for the last item in the list */ }

    nav.footer ul li {
    list-style-type:none;
    float:right;
    background:none;
    padding:0 10px 0 6px;
    margin:0;

    }

    • I didn’t really understand the “my list in all document change” part, but I got it now.

      Please read my “Notes” at the end of the post.
      In your case, you’ll need to add “nav.footer ” in front of “ul li:after” and “ul li:first-child:after”.

      You added it everywhere else except for those two selectors :)

  2. Nowhere says:

    Hi,

    Good job but the menu always aling to the left.

    Use instead

    footer ul li {
    display:inline; // Put on one line. You can align after!
    list-style:none;
    }

1 Pings/Trackbacks for "Simple CSS footer menu"