Separation with | in a menu

Discussion in 'Web Design and Development' started by Hassine, Feb 3, 2015.

  1. Hassine macrumors newbie

    Joined:
    Jan 23, 2015
    #1
    Hello,

    I have a menu and i want to make separations between it's items like this

    Help me please, thank you !! :)
     

    Attached Files:

  2. HarryPot macrumors 6502a

    Joined:
    Sep 5, 2009
    #2
    That would be just an inline list, like:

    Code:
    <ul>
    <li>Menu 1</li>
    <li>|</li>
    <li>Menu 2</li>
    <li>|</li>
    <li>Menu 3</li>
    <li>|</li>
    <li>Menu 4</li>
    </ul>
    And then just add equal padding/margin to the left and to the right of each li item.
    CSS for li element:

    Code:
    list-style: none;
    display: inline;
    margin: 0 5px 0 5px;
     
  3. Jessica Lares macrumors G3

    Jessica Lares

    Joined:
    Oct 31, 2009
    Location:
    Near Dallas, Texas, USA
    #3
    I was actually looking for a way to do this yesterday.

    If you're doing this with something like WordPress, you'd want to use their documentation and not necessarily CSS. They have tags you can add separators to.

    In CSS, you can do this with probably some padding:

    PHP:
    li li:before {
        
    content" | ";
    }
    And it won't put the "|" at the beginning. This doesn't work in IE6 though (if that is an issue for you).
     
  4. JoelTheSuperior macrumors 6502

    JoelTheSuperior

    Joined:
    Feb 10, 2014
    Location:
    London, UK
    #4
    I'd recommend this method. Generally speaking if it's related to design it's best to do it via CSS rather than markup.
     
  5. Hassine thread starter macrumors newbie

    Joined:
    Jan 23, 2015
    #5

    it doesn't work, the | is situated just after the correspondant menu, whatever margin values i put. Here is the result
     

    Attached Files:

    • mac.PNG
      mac.PNG
      File size:
      5.9 KB
      Views:
      91
  6. Hassine thread starter macrumors newbie

    Joined:
    Jan 23, 2015
    #6
    I am not using WordPress, just CSS

    Your solution seems to be correct, but once i precise margin-left and margin-right values for li, pipes become just before the li

    For example:

    Code:
    .nav_footer li
    {
    	display: inline;
    	margin-left: 10px;
    	margin-right: 10px;
    }
    li + li:before
    {
        content: " | ";
    }
    
    the result is
     

    Attached Files:

  7. Jessica Lares macrumors G3

    Jessica Lares

    Joined:
    Oct 31, 2009
    Location:
    Near Dallas, Texas, USA
    #7
    Ah, should have specified to put the margins in the li:before bit:

    Code:
    li + li:before
    {
        content: " | ";
        margin-left: 10px;
        margin-right: 10px;
    }
    
    It does the margins in the middle this way, vs on each side of the li.
     
  8. IHelpId10t5, Feb 6, 2015
    Last edited: Feb 6, 2015

    IHelpId10t5 macrumors 6502

    Joined:
    Nov 28, 2014
    #8
    It's a best practice for semantic web design (and accessibility) to do things like menu separators in CSS instead of in the HTML content. I would also recommend using CSS borders to do this instead of pipe characters. CSS borders work in every browser -- even the old ones. So, something like this:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<style>
    		.horizontal-nav li {
    			display: inline-block;
    			list-style-type: none;
    			margin: 0;
    			padding: 0.5em;
    			border-right: 1px solid #999;
    		}
    		.horizontal-nav li:last {
    			border-right: none;
    		}
    	</style>
    </head>
    <body>
    <ul class='horizontal-nav'>
    	<li>Menu 1</li>
    	<li>Menu 2</li>
    	<li>Menu 3</li>
    	<li>Menu 4</li>
    </ul>
    </body>
    </html>
    
    Even better, look into a project like Bootstrap for consistency on all platforms. In 2015 you should be using mobile-first in all projects because the majority of your visitors will likely be from a mobile device.
     
  9. iPaintCode, Feb 14, 2015
    Last edited: Feb 14, 2015

    iPaintCode macrumors regular

    iPaintCode

    Joined:
    Jun 24, 2012
    Location:
    Metro Detroit
    #9
    Just a quick example:

    http://jsfiddle.net/6yybhu55/4/

    HTML:
    PHP:
    <nav class="nav">    
        <
    ul class="nav-list">
            <
    li><a href="#">Menu 1</a></li>
            <
    li><a href="#">Menu 2</a></li>
            <
    li><a href="#">Menu 3</a></li>
            <
    li><a href="#">Menu 4</a></li>
        </
    ul>
    </
    nav>
    CSS:
    PHP:
    .nav {
        
    background-color#eee;
        
    text-aligncenter;
    }

    .
    nav-list {
        list-
    stylenone;
        
    padding10px 0;
    }

    .
    nav-list li {
        
    displayinline-block;
    }

    .
    nav-list li a {
        
    displayblock;
        
    positionrelative;
        
    padding0 20px;
        
    text-decorationnone;
        
    colorblack;
    }

    .
    nav-list li a:hover {
        
    colorgrey;
    }

    /* left position is offset by -4px due to inline-blocks
    retaining whitespace in HTML, why most use float: left. */
    .nav-list li a:after {
        
    content"|";
        
    positionabsolute;
        
    top0;
        
    left: -4px;
        
    colorred;
    }

    .
    nav-list li:first-child a:after /* first-child for IE8 support */
        
    displaynone;
    }
    Output:
    [​IMG]
     

Share This Page