JQuery's simple navigation menu and jquery navigation menu

Source: Internet
Author: User

JQuery's simple navigation menu and jquery navigation menu

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 class = "navItem lastNavItem"> <ul class = "navUl"> <li> A </li> <li class = "hoverLi"> A </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> </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');    });})


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.