Move the navigation bar up and down based on jQuery mouse hover, jquery hover

Move the navigation bar up and down based on jQuery mouse hover, jquery hover

Move the navigation bar up or down based on jQuery. This is a blue-looking responsive website navigation menu effect. As follows:

Download Online Preview source code

Implementation code.

Html code:

<Div id = "menu2" class = "menu"> <ul> <li> <a href = "#"> first page </a> </li> <li> <a href = "#"> forecast and warning </a> </li> <a href = "#"> meteorological news </a> </li> <li> <a href = "#"> Meteorological Services </a> </li> <a href = "#"> Administrative Approval </a> </li> <li> <a href = "#"> Information Disclosure </a> </li> <a href = "#"> Meteorological Science </a> </li> <a href = "#"> party style and clean government </a> </li> <a href = "#"> popular Meteorological Science </> </li> </ul> <div class = "cls"> </div>

Javasctipt code:

  $(document).ready(function () {            $("#menu2 li a").wrapInner('<span class="out"></span>');            $("#menu2 li a").each(function () {                $('<span class="over">' + $(this).text() + '</span>').appendTo(this);            });            $("#menu2 li a").hover(function () {                $(".out", this).stop().animate({ 'top': '48px' }, 300); // move down - hide                $(".over", this).stop().animate({ 'top': '0px' }, 300); // move down - show            }, function () {                $(".out", this).stop().animate({ 'top': '0px' }, 300); // move up - show                $(".over", this).stop().animate({ 'top': '-48px' }, 300); // move up - hide            });        });

Via: http://www.w2bc.com/Article/42960