How to create a menu separated by a stripe, but the first and last items do not have a stripe?

Question

How do you reach such a menu:

About us | Confidentiality | Contact us | site `s map

... a menu separated by a vertical bar, but the first and last item does not have a panel on the left and right (as shown in the example)?

Menu items are generated dynamically (used in wordpress), and not manually.

thanks.

Answer 1

If you use list items as markup for your navigation, you can display the line between each link by creating a separator as a background image on li .

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

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

This CSS adds an image to each element of the list that follows another element of the list — in other words, all of them except the first.

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

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

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

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

Answer 2

The vertical bar is just a character on the keyboard, so you can enter it between words.

Answer 3

Found a lighter wordpress solution!

Just go to Appearance> Menu and add "|" at the end of the navigation mark for each menu title!

Answer 4

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

Appearance → Menu: http://d.pr/i/I9ko+

• Click "Screen Settings"
• Check CSS classes

• Add the "last" class to your last menu item. Then in your .css style add:

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