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
LVL 8
askurat1Asked:
Who is Participating?
 
LZ1Connect With a Mentor Commented:
Just like this:

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

Open in new window

0
 
LZ1Commented:
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?
0
 
askurat1Author 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.
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
LZ1Commented:
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

0
 
askurat1Author Commented:
That is very close. It just needs to slide up instead of down.
0
 
LZ1Commented:
The bottom border?
0
 
askurat1Author Commented:
Yes
0
 
LZ1Commented:
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

0
 
askurat1Author 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.
0
 
LZ1Commented:
So the line stays "under" the word, but it just moves up a little bit?
0
 
LZ1Connect With a Mentor 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

0
 
askurat1Author 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.
0
 
LZ1Commented:
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?
0
 
askurat1Author 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
0
 
askurat1Author 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.
0
 
askurat1Author Commented:
I was able to get it to work with your help.

Thanks
0
 
LZ1Commented:
Glad you got it
0
All Courses

From novice to tech pro — start learning today.