List are nice. They are easy to build with html and using css can be hooked to style pretty much any way you want. Here is a very simple trick to horizontally style a list and place a vertical bar between every item but not on the ends.
@import "compass/utilities" .simple_navigation +no-bullets +horizontal-list li border-left: 1px solid border-right: 1px solid margin-top: 2px margin-bottom: 2px li:first-child border-right: 1px solid border-left: 0 none li:last-child border-left: 1px solid border-right: 0 none
First of all we import the compass utilities libraries where we find two mixins for dealing with lists.
That does the bulk of the work for us. Then we need to add the vertical bars. First we style the list items to have solid left and right borders. Then we specialize only the first and last item in the left to have right and left border respectively.
Now it is bad form to use .simplenavigation in your html directly. .simplenavigation describes a style of a list. We should use semantic names for each horizontal list we require. We can also specialize the simple navigation using further mixins or extensions.
#main_menu @extends .simple_navigation +adjust-font-size-to(30px) #footer_menu @extends .simple_navigation +adjust-font-size-to(15px)
Then #mainmenu is a horizontal list with dividers and large text and #footermenu is a horizontal list with dividers and small text
So then the following haml
%ul#main_menu %li item 1 %li item 2 %li item 3
will end up something like below
item 1 | item 2 | item 3 | item 4