We help IT Professionals succeed at work.

Slide up border with Jquery or CSS3

I am just trying to simply slide up the border when I hover over a nav menu item.
Here is the link: www.skurat.com

At the top of the page you will see my navigation menu. When you hover over an item a blue line will show up across the bottom. I want that line to slide up when I hover over any of the menu items.

I just can't seem to figure it out. Whatever the best way is to achieve this I will do, CSS3 or jquery, whatever works.

Thanks,
Tony
Comment
Watch Question

LZ1
Top Expert 2011

Commented:
If I'm understanding you correctly, you want the bottom border to physically move up when hovered? Meaning you want them to see the line move right?

Author

Commented:
I don't want the line to become visible until they hover over the menu item. When that happens it slides up from the grey line that goes across the whole page.
LZ1
Top Expert 2011

Commented:
I know this isn't exactly what your after, but are we on the right track at least?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
		.main-navigation {
    float: right;
    list-style: none outside none;
    margin: 0 auto;
    padding: 0 0 5px;
	font-family:Arial, Helvetica, sans-serif;
	clear:both;
}
.main-navigation li {
    float: left;
    margin: 0 10px;
}
.main-navigation li a {
    color: #394C5E;
    font-size: 12px;
    font-weight: 600;
    padding: 0 5px 8px;
    text-decoration: none;
    text-transform: uppercase;
}
.main-navigation li a:hover, .main-navigation li a.current:hover {
    border-top: 5px solid #194B71;
	border-bottom: none;
	-moz-transition: all 0.5s ease 0s;
}
.main-navigation li a.current {
    border-bottom: 5px solid #194B71;
	-moz-transition: all 0.5s ease 0s;
}


</style>
</head>

<body>

            <div class="demo">
            	<ul class="main-navigation">
                  <li> <a class="current" href="#top"> home </a> </li>
                  <li> <a href="#portfolio" class=""> portfolio </a> </li>
                  <li> <a href="#gallery"> gallery </a> </li>
                  <li> <a href="#about"> about </a> </li>
                  <li> <a href="#services"> services </a> </li>
                  <li> <a href="#features"> features </a> </li>
                </ul>
            
            </div>

</body>
</html>

Open in new window

Author

Commented:
That is very close. It just needs to slide up instead of down.
LZ1
Top Expert 2011

Commented:
The bottom border?

Author

Commented:
Yes
LZ1
Top Expert 2011

Commented:
Try this:

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
		.main-navigation {
    float: right;
    list-style: none outside none;
    margin: 0 auto;
    padding: 0 0 5px;
	font-family:Arial, Helvetica, sans-serif;
	clear:both;
}
.main-navigation li {
    float: left;
    margin: 0 10px;
}
.main-navigation li a {
    color: #394C5E;
    font-size: 12px;
    font-weight: 600;
    padding: 0 5px 8px;
    text-decoration: none;
    text-transform: uppercase;
}
.main-navigation li a:hover {
    border-top: 5px solid #194B71;
	border-bottom: none;
	-moz-transition: all 0.5s ease 0s;
}
.main-navigation li a.current {
    border-bottom: 5px solid #194B71;
	-moz-transition: all 0.5s ease 0s;
}

.main-navigation li a.current:hover{border-bottom:5px solid #fff;	-moz-transition: all 0.5s ease 0s;}
</style>
</head>

<body>

            <div class="demo">
            	<ul class="main-navigation">
                  <li> <a class="current bottom-border" href="#top"> home </a> </li>
                  <li> <a href="#portfolio" class=""> portfolio </a> </li>
                  <li> <a href="#gallery"> gallery </a> </li>
                  <li> <a href="#about"> about </a> </li>
                  <li> <a href="#services"> services </a> </li>
                  <li> <a href="#features"> features </a> </li>
                </ul>
            
            </div>

</body>
</html>
                                            
                                            

Open in new window

Author

Commented:
I think you misunderstood what I am looking for. I don't want there to be a border on top of the menu items.
If you look at my web page currently I have it pretty close to what I want but if you notice the border slides down to the grey line. I want it to start at the grey line and go up but still stay under the menu items.
I hope that makes more sense.

Thanks for all the help.
LZ1
Top Expert 2011

Commented:
So the line stays "under" the word, but it just moves up a little bit?
LZ1
Top Expert 2011
Commented:
Like this?

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
		.main-navigation {
    float: right;
    list-style: none outside none;
    margin: 0 auto;
    padding: 0 0 5px;
	font-family:Arial, Helvetica, sans-serif;
	clear:both;
}
.main-navigation li {
    float: left;
    margin: 0 10px;
}
.main-navigation li a {
    color: #394C5E;
    font-size: 12px;
    font-weight: 600;
    padding: 0 5px 8px;
    text-decoration: none;
    text-transform: uppercase;
}
.main-navigation li a:hover {
	padding:0 5px 2px;
	/*-moz-transition: all 0.5s ease 0s;*/
    border-bottom: 5px solid #194B71;
}
.main-navigation li a.current {
    border-bottom: 5px solid #194B71;
	-moz-transition: all 0.5s ease 0s;
}

</style>
</head>

<body>

            <div class="demo">
            	<ul class="main-navigation">
                  <li> <a class="current bottom-border" href="#top"> home </a> </li>
                  <li> <a href="#portfolio" class=""> portfolio </a> </li>
                  <li> <a href="#gallery"> gallery </a> </li>
                  <li> <a href="#about"> about </a> </li>
                  <li> <a href="#services"> services </a> </li>
                  <li> <a href="#features"> features </a> </li>
                </ul>
            
            </div>

</body>
</html>
                                            

Open in new window

Author

Commented:
Basically it will look like the line expands up to the menu items. Currently it looks like it expands down. Almost as if the line starts out as 1px and grows to 4px.
LZ1
Top Expert 2011

Commented:
I guess I'm still confused. When you say "expands" are you meaning left-to-right or top-to-bottom?

I can probably do what you need, could you maybe provide an image?

Author

Commented:
I wish I had a better example example but this will have to do.

Basically the image shows 4 phases of the animation.
In phase one there is 0px border, phase 2 has a 1 px border, phase 3 has a 2 px border, and phase 4 has a 3 px border.

So the animation would start as a 0px border and grow up to a 3px border.
Border

Author

Commented:
I seemed to have found a solution but with this solution I need to add the current class to li not a:
$(".main-navigation a[href=#" + $active.attr("id") + "]").addClass('current');

Open in new window


The line of code above is what I need to change. The class needs to be added to li and I am not quite sure how to achieve this.

Thanks for the help. You pat least pointed me in the right direction.
Top Expert 2011
Commented:
Just like this:

$(".main-navigation li").addClass('current');

Open in new window

Author

Commented:
I was able to get it to work with your help.

Thanks
LZ1
Top Expert 2011

Commented:
Glad you got it

Explore More ContentExplore courses, solutions, and other research materials related to this topic.