3

I want to have a border (looks like underline) that moves up on hover.

So if this is a link:

LINK

Then if I hover on it

LINK
""""

Example from the website: http://matthias-schoenaerts.com/ (navigation bar)

I want it as simple as possible.

This is what I came up with: http://jsfiddle.net/Lxxqz3pL/

HTML:

<ul id="nav">
  <li><a href="#">About Us</a></li>
  <li><a href="#">Our Products</a></li>
  <li><a href="#">FAQs</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Login</a></li>
</ul>

CSS:

/* Begin Navigation Bar Styling */
#nav {
width: 100%;
float: center;
margin: 0 0 3em 0;
left: 0;
padding: 0;
list-style: none;
background-color: #333333;
border-bottom: 1px solid #ccc; 
border-top: 1px solid #ccc; 
position: absolute;
}

#nav li {
float: left; 
}

#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #a3a3a3;
}

#nav li a:hover {
transition: border .5s ease-in;
background-color: #fff; 
border-bottom: 3px solid red;
}
/* End navigation bar styling. */
Weafs.py
  • 22,731
  • 9
  • 56
  • 78
MrDikke
  • 157
  • 1
  • 1
  • 10

4 Answers4

3

Here is updated CSS, does it what you trying to get?

/* Begin Navigation Bar Styling */
#nav {
    width: 100%;
    float: center;
    margin: 0 0 3em 0;
    left: 0;
    padding: 0;
    list-style: none;
    background-color: #333333;
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc; 
    position: absolute;
    overflow: hidden;
    }
#nav li {
    float: left; 
    }
#nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #a3a3a3;
    }
#nav li a:after{
    display:block;
    width:100%;
    height:0px;
    content:" ";
    border:1px solid red;
    position: relative;
    top:10px;
}
#nav li a:hover:after{
    transition: 0.5s ease-in;
    transform: translate(0px, -10px);    
    }

/* End navigation bar styling. */
Pumych
  • 1,368
  • 3
  • 18
  • 31
2

I've modified your code in areas to get the desired effect

DEMO http://jsfiddle.net/Lxxqz3pL/3/

#nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #a3a3a3;
    padding: 22px 0 35px;
    color: #a3a3a3;
    border-bottom: 3px solid #6a901b;
    transition: all 0.5s ease;
}
#nav li a:hover {
    transition: all 0.5s ease;
    color: #fff;
    padding-bottom: 5px;
}
Kevin Lynch
  • 24,427
  • 3
  • 36
  • 37
1

How about something like this? FIDDLE.

Just keep the background fixed, add a border at the bottom, and make the height of the anchor smaller.

Relevant CSS

#nav li {
    float: left;
    height: 40px;
    }
#nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #a3a3a3;
    height: 20px;
    transition: height 0.5s;
    }
#nav li a:hover {
    height: 10px;
    border-bottom: 3px solid red;
    }
TimSPQR
  • 2,964
  • 3
  • 20
  • 29
0

It looks like the example site uses flexNav, a jQuery plugin.
http://jasonweaver.name/lab/flexiblenavigation/

Here's a quick-fix solution. I added a transition to <li> padding to compensate for the added border.
http://jsfiddle.net/Lxxqz3pL/1/

chargarg
  • 37
  • 7