Home > Web Front-end > HTML Tutorial > jQuery 简单漂亮的导航菜单_html/css_WEB-ITnose

jQuery 简单漂亮的导航菜单_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:33:09
Original
1375 people have browsed it

鼠标悬浮时菜单项向上移动成蓝底白字,点击之后底部会有蓝条表示当前选中项。

页面代码,菜单的每一项都是一个 div ,其中包括一个 ul 用来放置显示文字等,另一个 div 则是底部的蓝条,需要给第一项和最后一项设置不同的 class ,样式需要用到:

<div id="nav">  <div class="navItem indexNavItem">    <ul class="navUl">      <li>首页</li>      <li class="hoverLi">首页</li>    </ul>    <div class="highlighter selectedNav"></div>  </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</li>    </ul>    <div class="highlighter"></div>  </div>  <div id="logoutNavItem" class="navItem logoutNavItem lastNavItem">    <ul class="navUl">      <li>退出</li>      <li class="hoverLi">退出</li>    </ul>    <div class="highlighter"></div>      </div></div>
Copy after login

  样式,主要就是每个菜单项的左右边框的设置以及 ul 和 li 的位置设置:

*{    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;}
Copy after login

  接下来就是给菜单编写悬浮和单击事件的 js 代码了,悬浮时将 ul 上移 li 的高度,鼠标移开后再恢复,点击之后就是给蓝条的 div 添加样式即可:

$(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');    });})
Copy after login

  

 

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template