jquery实现的个人中心导航菜单,jquery实现导航菜

今天给大家分享一种用JS写的导航栏,虽然我们工作中不会使用JS来做导航栏,为了练习我们用JS来做一个JS导航栏

jquery实现的个人中心导航菜单,jquery实现导航菜单

之前为大家介绍了一款jquery和css3实现的很酷的菜单导航。这是一款由jquery开发的导航菜单。适合放在门户网站的个人用户中心后台。效果和美观都非常不错。我们先一起看看效果图:

金沙官网线上 1

 

在线预览   源码下载

 

一起看下实现的代码:

html代码:

金沙官网线上 2 <nav class="animated bounceInDown"> <ul> <li><a href="#profile"> <div class="fa fa-user"> </div> Profile </a></li> <li><a href="#message"> <div class="fa fa-envelope"> </div> Messages <span class="badge right">12</span> </a></li> <li class="sub-menu"><a href="#settings"> <div class="fa fa-gear"> </div> Settings <div class="fa right fa-caret-up"> </div> </a> <ul style="display: block;"> <li><a href="#settings">Account </a></li> <li><a href="#settings">Profile </a></li> <li><a href="#settings">Secruity & Privacy </a></li> <li><a href="#settings">Password </a></li> <li><a href="#settings">Notification </a></li> </ul> </li> <li class="sub-menu"><a href="#message"> <div class="fa fa-question-circle"> </div> Help <div class="fa right fa-caret-down"> </div> </a> <ul style="display: none;"> <li><a href="#settings">FAQ's </a></li> <li><a href="#settings">Submit a Ticket </a></li> <li><a href="#settings">Network Status </a></li> </ul> </li> <li><a href="#message"> <div class="fa fa-sign-out"> </div> Logout </a></li> </ul> </nav> View Code

css代码:

金沙官网线上 3 body { background: #f7f7f7 url("1.jpg") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; font-family: "Roboto"; font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body::before { content: ''; position: fixed; z-index: -1; top: 0; left: 0; background: #34495e; /* IE Fallback */ background: rgba(52, 73, 94, 0.8); width: 100%; height: 100%; } nav { position: absolute; top: 50%; left: 50%; width: 360px; margin: -78px 0 100px -180px; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); } nav ul { list-style: none; margin: 0; padding: 0; } nav ul li { /* Sub Menu */ } nav ul li a { display: block; background: #3498db; padding: 10px 15px; color: #fff; text-decoration: none; -webkit-transition: 0.2s linear; -moz-transition: 0.2s linear; -ms-transition: 0.2s linear; -o-transition: 0.2s linear; transition: 0.2s linear; } nav ul li a:hover { background: #2980b9; } nav ul li a .fa { width: 16px; text-align: center; margin-right: 5px; } nav ul li a .badge { display: inline-block; background: #fff; /* IE Fallback */ background: rgba(255, 255, 255, 0.2); padding: 3px 7px; color: #fff; font-size: 12px; font-weight: 800; } nav ul li ul li a { background: #444; border-left: 4px solid transparent; padding: 10px 20px; } nav ul li ul li a:hover { background: #333; border-left: 4px solid #3498db; } /* Float Right/Left */ .right { float: right; } .left { float: left; } View Code

js代码:

金沙官网线上 4 $('.sub-menu ul').hide(); $(".sub-menu").click(function () { $(this).children("ul").slideToggle("100"); $(this).find(".right").toggleClass("fa-caret-up fa-caret-down"); }); //@ sourceURL=pen.js View Code

注:本文爱编程原创文章,转载请注明原文地址:http://www.w2bc.com/Article/5663

这种方法要比其他方法代码量少很多,但是需要对事件冒泡有一定的理解,如果需要理解冒泡可以参考一下,

jquery实现菜单点击时间问题

//在处理点击展开的时候,可以将之前所有打开的菜单关闭一下。
$(document).ready(function () {
$("li.mainlevel").click(function () {
$("li.mainlevel > ul").hide();
$(this).find("ul").slideDown(300);
});
});  

该注释的地方我都给大家注释上了

jquery怎控制当前页的导航菜单效果?

例如导航的div <div class="nav"><a href="index.html">首页</a><a href="product.html">产品</a><a href="case.html">案例中心</a></div>

下面的html内容:
<div class="main">
<div class="content">首页的内容</div>
<div class="content">产品的内容</div>
<div class="content">案例中心的内容</div>
</div>
至于class=“content”可以是你自己加上的为了便于jQuery获取,没有这个样式类
<script type="text/javascript">
$(document).ready(function()
{
var tabs = $('.nav > a');
var cons = $('.main > div.content');

tabs.first().addClass("now").show(); //默认第一个显示
cons.first().show().nextAll().hide(); //默认第一个显示,其他隐藏
tabs.each(function(index){
$(this).mouseover(function(){
$(this).addClass("now").siblings().removeClass("now");
金沙官网线上,cons.eq(index).show().siblings().hide();
});
});

});
</script>  

http://www.bkjia.com/jQuery/872749.htmlwww.bkjia.comtruehttp://www.bkjia.com/jQuery/872749.htmlTechArticlejquery实现的个人中心导航菜单,jquery实现导航菜单 之前为大家介绍了一款jquery和css3实现的很酷的菜单导航。这是一款由jquery开发的导航菜...

 

思路:给所有的 li 加上 鼠标移入事件当鼠标移入时会触发事件,由于事件的冒泡机制,每次二级导航栏里的事件触发时同时会触发父级 li 的事件

   调试时可以用e.stopPropagation()阻止事件冒泡来看看冒泡和不冒泡的区别

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{margin:0;padding:0;}

        ul,li{list-style: none;}

        /* 一级导航样式 */

        #nav{

            width:100%;

            height: 40px;

            background: #000;

        }

        #nav>li{

            float: left;

            position: relative;

        }

        #nav>li>a{

            float: left;

            width: 80px;

            height: 40px;

            color: #fff;

            text-decoration: none;

            line-height: 40px;

            text-align: center;

        }

        

        #nav li>.active{

            background: yellow;

        }

        #nav>li>ul>li>.active{

            background: red;

        }

        #nav>li>ul{

            width: 100px;

            background: #000;

            position: absolute;

            left: 0;

            top: 40px;

            display: none;

        }

        #nav>li>ul>li>a{

            text-decoration: none;

            color: #fff;

            line-height: 30px;

            text-align: center;

            width: 100px;

            height: 30px;

            display: block;

        }

    </style>

</head>

<body>

    <ul id="nav">

        <li>

            <a href="##">首页</a>

            <ul >

本文由金沙官网线上发布于Web前端,转载请注明出处:jquery实现的个人中心导航菜单,jquery实现导航菜

您可能还会对下面的文章感兴趣: