Search code examples
htmlcssmenuusability

Best way to make dividers in ul menus

In all the years I have been developing, this has always been a controversy among fellow colleagues. What is the best way to add a divider to a menu item in a horizontal menu (or header navbar)? Consider all factors: Browser compatibility, maintainability, aesthetics, menu space and its effect in responsive sizes, etc. (A COPE PEN is attached at the bottom)

HTML

<!-- MENU 1 -->
<div class="container">
   <p class="inline"> Using CSS border</p>
   <div class="navbar">
      <ul class="menu">
         <li><a href="#">Item 1</a></li>
         <li><a href="#">Item 2</a></li>
         <li><a href="#">Item 3</a></li>
         <li><a href="#">Item 4</a></li>
         <li><a href="#">Item 5</a></li>
      </ul>
   </div>
<div>

<!-- MENU 2 -->
<div class="container">
   <p class="inline"> Using Font Awesome in HTML</p>  
   <div class="navbar">
      <ul class="menu2">
         <li><a href="#">Item 1 <i class="fa fa-minus"></i></a></li>
         <li><a href="#">Item 2 <i class="fa fa-minus"></i></a></li>
         <li><a href="#">Item 3 <i class="fa fa-minus"></i></a></li>
         <li><a href="#">Item 4 <i class="fa fa-minus"></i></a></li>
         <li><a href="#">Item 5 </a></li>
      </ul>
   </div>
<div>

<!-- MENU 3 -->
<div class="container">
   <p class="inline"> Using Font Awesome in CSS</p>  
   <div class="navbar">
      <ul class="menu3">
         <li><a href="#">Item 1 </a></li>
         <li><a href="#">Item 2 </a></li>
         <li><a href="#">Item 3 </a></li>
         <li><a href="#">Item 4 </a></li>
         <li><a href="#">Item 5 </a></li>
      </ul>
   </div>
</div>  

<!-- MENU 4 -->
<div class="container">
    <p class="inline"> Using Font character | in CSS</p>  
    <div class="navbar">
        <ul class="menu4">
            <li><a href="#">Item 1 </a></li>
            <li><a href="#">Item 2 </a></li>
            <li><a href="#">Item 3 </a></li>
            <li><a href="#">Item 4 </a></li>
            <li><a href="#">Item 5 </a></li>
        </ul>
   </div>
</div>

The respective CSS for each variation is below. 

body{
    width:100%;
}

.inline{
   width: 25%;
   float:left;
   text-align:right;
}

.navbar{
   width:800px;
   margin:10px auto;
   background:#0067A5;
   height: 40px;
}

.menu{
   text-align: center;
   width: 100%;
   padding: 0;
}

.menu li{
   list-style-type: none;
   display: inline-block;
   padding: 10px;
}

.menu li a{
   color:#fff;
   text-transform: uppercase;
   text-decoration:none;
   border-right: 1px solid #fff;
   padding: 0px 20px 0px 0px;
}

.menu li:last-child a{
   border:none;
}


/*****   MENU 2 ********/

.menu2{
    text-align: center;
    width: 100%;
    padding: 0;
}

.menu2 li{
    list-style-type: none;
    display: inline-block;
    padding: 10px;
}

.menu2 li a{
    color:#fff;
    text-transform: uppercase;
    text-decoration:none;
}

.menu2 .fa-minus {
   -webkit-transform: rotate(-90deg);
   -moz-transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
   -o-transform: rotate(-90deg);
   margin: 0px -10px 0 5px;
}

/*****   MENU 3 ********/

.menu3{
   text-align: center;
   width: 100%;
   padding: 0;
}

.menu3 li{
   list-style-type: none;
   display: inline-block;
   padding: 10px;
   position:relative;
}

.menu3 li a{
   color:#fff;
   text-transform: uppercase;
   text-decoration:none;
}

.menu3 li a:after{
   position:absolute;
   font-family: FontAwesome;
   top:10px;
   left:66px;
   content: "\f068";
   -webkit-transform: rotate(-90deg);
   -moz-transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
   -o-transform: rotate(-90deg);
}

.menu3 li:last-child a:after{
    content:"";
}


/*****   MENU 4 ********/

.menu4{
    text-align: center;
    width: 100%;
    padding: 0;
}

.menu4 li{
    list-style-type: none;
    display: inline-block;
    padding: 10px;
    position:relative;
}

.menu4 li a{
    color:#fff;
    text-transform: uppercase;
    text-decoration:none;
}

.menu4 li a:after{
    position:absolute;
    font-family: Roboto;
    top:6px;
    left:72px;
    content: "|";
}

.menu4 li:last-child a:after{
    content:"";
}

If you have any other ideas, I am open to entertain them. In my opinions none of these are actually "wrong" per-se, they all work. However, what would be more practical? What are the pros and cons (specially the cons). In my opinion, the entire divider concept is very early web design era (2000's) but some clients still prefer it.

WORKING COPY HERE

Solution

  • I would definitely use glyphs (option 4) wherever I can. I would use :before instead of :after. You win one IE(7 or 8) version with it. Always make sure you use the unicode version for the glyph, as you did in option 3. If you simply use a keyboard character, you should be aware it might not be recognized to other keyboard layouts (codepages).

    Looking up the unicode notation I found csstricks very useful. If you can't use a glyph, you can create a custom font. It takes some time to figure everything out but once you do, you're back at using css content in unicode. Hence imho you have all the options with glyphs (shadow, border, font-size, color, extra background, responsiveness, ...)

    dealbreakers:

    • option 1: the anchor text/padding is not centered which might introduce responsive issues later on. Also chances are high you will need a :first-child and/or :last-child selector which adds partial browser support again.
    • option 2: extra semantics required which polutes your HTML.
    • option 3: is similar to my backup plan if I can't use glyphs. Basic support goes back to IE8. With some special treatment you can use it to IE7.

    Now unfortunatly the pipline/vertical bar isn't listed on csstricks. Another source tells me it's content: '\00007C'.