Question

I have this jquery code.

//this is the main javascript

$(document).ready(function(){

    $('nav.menu a').hover(
        function () {
            $('nav.menu').find(".current_item").removeClass("current_item");
            $(this).addClass("current_item");

        }, 
        function () {
            $(this).removeClass("current_item");
            $('nav.menu').find(".damenu").addClass("current_item")
        }
);

});

and this html structure

<nav class="menu">
    <a href="home.html" class="current_item damenu">Home</a>
    <a href="gallery.html">Gallery</a>
    <a href="home.html">Portfolio</a>
    <a href="home.html">About</a>
    <a href="home.html">Contact</a>
</nav>

and this css

.menu
{
background: 1px solid #00ffff;
width: 100%;
padding: 0px 0px 0px 10px;
}
.menu a
{
padding: 8px;
color: #0099ff;
font: bold 20px Archivo Narrow, Arial Rounded MT, Tahoma, Calibri, Asap, Arial,     Verdana, sans-serif;
text-decoration: none;
float: left;
margin-right: 8px;
text-shadow: 2px 1px 1px #ffffff;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
}
.current_item /*, .menu a:hover*/
{
color: #C5F700 !important;
border-top: 3px solid #C5F700 !important;
border-bottom: 3px solid #C5F700 !important;
}

as you can see, the routine is this, there is a class for the current menu and whenever a user hover into one of the menu, the class of the current menu is removed and a class “current_item” added to the current hover menu and in mouseout event, the class “current_item” is removed from the current hovered element and the class “current_item” is added back to the current menu which has also a class of “damenu” and as you can see the work of the class “current_item” is to add top and bottom borders and it works good, but I want to add some animation into the borders or in the class “current_item” when mouseover or in mouseout.

So precisely, I want to animate the borders or the class “current_item” whenever in mouseover or mouseout event and also, is there anyway I can make the nav into center?

I am open in, Ideas, recommendation and suggestion. Hope someone here could help, thank you.

Answer 1

You may animate border by only css

.menu
{
background: 1px solid #00ffff;
width: 100%;
padding: 0px 0px 0px 10px;
}
.menu a
{
padding: 8px;
color: #0099ff;
font: bold 20px Archivo Narrow, Arial Rounded MT, Tahoma, Calibri, Asap, Arial,     Verdana, sans-serif;
text-decoration: none;
float: left;
margin-right: 8px;
text-shadow: 2px 1px 1px #ffffff;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
-webkit-transition: 1s all ease;
-moz-transition: 1s all ease;
-ms-transition: 1s all ease;
-o-transition: 1s all ease;
transition: 1s all ease;
}
.menu a.current_item, .menu a:hover
{
color: #C5F700 !important;
border-top: 3px solid #C5F700 ;
border-bottom: 3px solid #C5F700 ;
}