JQuery implements simple and beautiful Nav navigation menu effects,

JQuery implements simple and beautiful Nav navigation menu effects,

This article describes how jQuery implements simple and beautiful Nav navigation menus. We will share this with you for your reference. The details are as follows:

You can write a simple navigation menu by yourself, first look at the effect:

When the mouse is hovering over the mouse, the menu item is moved up to the white text on the blue background. After clicking it, there will be a blue bar at the bottom to indicate the selected item.

Page code. Each item in the menu is a div, including a ul used to place the display text, and the other div is the blue bar at the bottom, you need to set different classes for the first and last items. styles need to be used:

<Div id = "nav"> <div class = "navItem indexNavItem"> <ul class = "navUl"> <li> homepage </li> <li class = "hoverLi"> homepage </li> </ul> <div class = "highlighter selectedna v"> </div> <div class = "navItem"> <ul class =" navUl "> <li> A </li> <li class =" hoverLi "> A </li> </ul> <div class =" highlighter "> </div> </div> <div class = "navItem lastNavItem"> <ul class = "navUl"> <li> A </li> <li class = "hoverLi"> A </div>/ li> </ul> <div class = "highlighter"> </div> <div id = "logoutNavItem" class = "navItem logoutNavItem lastNavItem"> <ul class = "navUl"> <li> quit </li> <li class = "hoverLi"> quit </li> </ul> <div class = "highlighter"> </ div> </div>

Style, mainly set the left and right borders of each menu item and the ul and li positions:

*{  padding: 0;  margin: 0;}body{  background-color: #fffff3;  font: 12px/1.6em Helvetica, Arial, sans-serif;}ul,li{  list-style: none;}#nav{  text-align: center;  height: 50px;  font-size: 10px;  line-height: 30px;  background-color: #F0E6DB;  margin-bottom: 10px;}.navItem{  cursor: pointer;  position: relative;  float: left;  width: 100px;  height: 50px;  font-size: 15px;  border-right: 2px solid rgb(255,255,255);  border-left: 2px solid rgb(255,255,255);  overflow: hidden;  font-weight:bold;}.indexNavItem{  border-left: 4px solid rgb(255,255,255);  margin-left: 10px;}.lastNavItem{  border-right: 4px solid rgb(255,255,255);}.logoutNavItem{  float: right;  width: 120px;  margin-right: 10px;  border-left: 4px solid rgb(255,255,255);}.navUl{  position: relative;  height: 100px;  width: 100%;  border-bottom: 5px solid rgb(2,159,212);}.navUl li{  height: 50px;  line-height: 50px;}.highlighter{  position: absolute;  bottom: 0;  height: 5px;  width: 100%;}.selectedNav{  background-color: #029FD4;}.hoverLi{  background-color: #029FD4;  color: #ffffff;}

The next step is to write the js Code for the suspension and click events for the menu. When the suspension is performed, move ul up to the height of li, move the mouse away, and then restore, after clicking it, add a style to the div of the blue bar:

$(function() {  $(".navItem").hover(function() {    $(this).children("ul").animate({      top: "-50px"    }, 100);  }, function() {    $(this).children("ul").animate({      top: "0px"    }, 100);  });  $(".navItem").click(function(event) {    $(this).siblings().children('.highlighter').removeClass('selectedNav');    $(this).children('.highlighter').addClass('selectedNav');  });})