How to create a menu separated by a bar but first and last item has no bar?

6 Views

How do you achieve this kind of menu:

About | Privacy | Contact | Site Map

Read More

… a menu separated by a vertical bar, but the first and last item doesn’t have a bar on the left and right sides (as shown in the example)?

The menu items are generated dynamically (used in wordpress), not manually.

thanks.

Post Views: 6

Related posts

Leave a Reply

4 comments

  1. If you are using list items as the mark-up for your navigation you can display a line between each link by creating the separator as a background image on the li.

    The trick to get it to only appear in between list items is to position the image to the left of the li, but not on the first one. This example uses the adjacent selector:

    #nav li + li {
    background:url('seperator.gif') no-repeat top left;
    padding-left: 10px
}

    This CSS adds the image to every list item that follows another list item – in other words all of them but the first.

    Alternatively you can use the CSS content property with the before pseudo class, instead of an image. The following code adds a pipe before your navigation links (again using the adjacent selector).

    #nav li + li a:before {
    content: "|";
}

    Be aware the content property is not supported in IE6 and IE7, and the adjacent selector is not supported in IE6.

    See here for CSS contents and browser compatibility – http://www.quirksmode.org/css/contents.html

  4. I think the best way to do this is with a CSS class.

    In Appearance → Menus:
    http://d.pr/i/I9ko+

    1. Click Screen Options
    2. Check CSS Classes

    3. Add a class of “last” to your last menu item
      Then in your style.css, add:

      #nav li.last span {
      display: none;
      }