CODEWITHSUNDEEP
htmlcssweb
ləːnə
ləːnə

Reputation: 323

How to add a left border to the navigation menu

I want to display a border to the left of the menu. I tried adding another border to the menu, but this does not work as I expected.

border menu

I want it to be displayed as in this image. Should I add the border as an image in the list or adjust the border property? If I add a border, it covers the full height of the navigation area. Here is the link http://codepen.io/anon/pen/EanAx/. Help please.

Upvotes: 3

Views: 1778

Answers (6)

Akshay Mohite
Akshay Mohite

Reputation: 109

Another way to do this

  <ul>
        <li><a href="#">Menu1</a><span></span></li>
        <li><a href="#">Menu2</a><span></span></li>
        <li><a href="#">Menu3</a><span></span></li>
        <li><a href="#">Menu4</a><span class="lastspan"></span></li>
     </ul>

    li{list-style:none; background:#eee; float:left}
    li a{color: #548ECD;
    display: block;
    font-size: 1.3em;
    line-height: 49px;
    padding: 0 15px;
    text-transform: uppercase;
    float: left;}

    li span{float: left;
    margin: 18px 0 0 0;
    height: 15px;
    border-left: 1px solid #000;}

    .lastspan {display:none}

http://jsfiddle.net/f9NYP/

Upvotes: 0

Sagar Awasthi
Sagar Awasthi

Reputation: 538

Border should be given in the style only. You can try giving border on with 'line-height' property i.e. 

a{
  border-left: 1px solid;
  line-height: 10px;
}

In actual code replace 

#nav > li {
    border-bottom: 5px solid transparent;
   <strike> border-left: 1px solid #aaa;  </strike>
   <strike> border-right: 1px solid #f3f3f3;</strike>
    margin-bottom: -5px;
    text-align: left;
    -moz-transition: all 300ms ease-in-out 0s;
    -ms-transition: all 300ms ease-in-out 0s;
    -o-transition: all 300ms ease-in-out 0s;
    -webkit-transition: all 300ms ease-in-out 0s;
    transition: all 300ms ease-in-out 0s;

    display:inline-block;
    *display:inline; /*IE7*/
    *zoom:1; /*IE7*/  
}

with this

#nav > li {
    border-bottom: 5px solid transparent;
    padding:10px;
    margin-bottom: -5px;
    text-align: left;
    -moz-transition: all 300ms ease-in-out 0s;
    -ms-transition: all 300ms ease-in-out 0s;
    -o-transition: all 300ms ease-in-out 0s;
    -webkit-transition: all 300ms ease-in-out 0s;
    transition: all 300ms ease-in-out 0s;

    display:inline-block;
    *display:inline; /*IE7*/
    *zoom:1; /*IE7*/  
}

and add [border-left: 1px solid; & line-height: 25px;] lines in your code.

#nav > li > a {
    color: #548ECD;
    display: block;
    font-size: 1.3em;
    border-left: 1px solid;
    line-height: 25px;
    padding: 0 15px;
    text-transform: uppercase;
}

Hope this is what you are looking for!

Upvotes: 0

Deepika
Deepika

Reputation: 331

Another way of this is by using image.

We can make image of what ever size we want and use in css as;

#menu a {
    float: left;
    background: url(../images/menu_line.jpg)  no-repeat  right;
    padding:0 25px 0 24px;
    color:#000000;
    text-decoration:none;
}

You can give width, height to the image.

Upvotes: 0

Magicianred
Magicianred

Reputation: 566

I have changed this style rule:

#nav > li > a {
    color: #548ECD;
    display: block;
    font-size: 1.3em;
    line-height: 49px;
    padding: 0 15px;
    text-transform: uppercase;

    /* Add this code */
    height: 39px;
    margin: 5px auto;
    vertical-align: middle;
  border-left: solid thin black;
}

Upvotes: 0

Tanner
Tanner

Reputation: 22733

You could just use the pipe character instead of the border and apply a pseudo class before each menu item like so:

#nav > li a:before{
    content: "|";    
    padding-right: 20px;
}

Updated Codepen sample

Upvotes: 5

Neil
Neil

Reputation: 412

This should be helpful-


ul { 
list-style:none;
}

ul li{
text-align:center;
display:inline-block;
}

ul li:before {
content: " | ";
}

ul li:first-child:before {
content: none;
}


Basically.. what is being done is, adding content before each li, except the first one.

Upvotes: 0

Related Questions