CODEWITHSUNDEEP
csstwitter-bootstrap
Izzy
Izzy

Reputation: 6866

How to get similar effect on menu

I have a menu which is developed using bootstrap. Currently it has a CSS transition effect when you hover over each item I line is placed under each heading. I can't seem to figure out how can I do the same but on top of the heading and the transition effect coming from the other direction.

The code I have so far is

.navbar ul li:after {
content:'';
display: block;
height: 4px;
width: 0;
transition: width .6s ease, background-color .6s ease;
}
.navbar ul li:hover:after {
width: 100%;
background: #fff;
}

I have created a JSFiddle Here

Thanks in advance for all your help.

Upvotes: 0

Views: 35

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 206024

.navbar ul li:before,
.navbar ul li:after {
    content:'';
    display: block;
    position:absolute;
    height: 4px;
    width: 0;
    background: #fff;
    transition: width .6s ease, background-color .6s ease;
}
.navbar ul li:before{ top:0;    right:0; }
.navbar ul li:after { bottom:0; left:0;  }

.navbar ul li:hover:before,
.navbar ul li:hover:after{ width: 100%; }

http://jsfiddle.net/RokoCB/zpxtre6n/4/

Upvotes: 1

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

demo - http://jsfiddle.net/zpxtre6n/5/

just add float:right for your .navbar ul li:after and float:left for .navbar ul li:before

.navbar ul li:after, .navbar ul li:before {
    content:'';
    display: block;
    height: 4px;
    width: 0;
    float:right;
    transition: width .6s ease, background-color .6s ease;
}
.navbar ul li:before{
    float:left;
}
.navbar ul li:hover:after, .navbar ul li:hover:before  {
    width: 100%;
    background: #fff;
}

Upvotes: 0

Related Questions