您的位置:时时app平台注册网站 > web前端 > jquery实现的个人中心导航菜单,jquery实现导航菜

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

2019-11-08 03:52

         //将二级导航隐藏

jquery实现菜单点击时间问题

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

<ul class="ulTab">
<li class="active">c1</li>
<li>c2</li>
<li>c3</li>
<li>c4</li>
<li>c5</li>
<li>c6</li>
</ul>
</div>
<div class="boxRight">
<a href="#" style="display:block;">d1</a>
<a href="#">d2</a>
<a href="#">d3</a>
<a href="#">d4</a>
<a href="#">d5</a>
<a href="#">d6</a>

        </li>

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>  

之前为大家介绍了一款jquery和css3实现的很酷的菜单导航。这是一款由jquery开发的导航菜...

</body>
</html>

         a.className ="";

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

注:本文爱编程原创文章,转载请注明原文地址:

};

            position: absolute;

for(var i=0;i<aLi.length;i )
{
aLi[i].index = i;
aLi[i].onclick = function()
{
for(var i=0;i<aLi.length;i )
{
aLi[i].className = '';
aConDiv[i].style.display = 'none';
};
this.className = 'active';
aConDiv[this.index].style.display = 'block';
};

            </ul>

};

 

for(var i=0;i<aConDiv.length;i )
{
tabSwitch( aConDiv[i] );
};

    </style>

彩世界网址 5

         if(ul){

<script>
window.onload = function()
{

 

function tabSwitch( aConDiv )
{

    <ul id="nav">

};
</script>

            background: #000;

for(var i=0;i<aTabLi.length;i )
{
aTabLi[i].className = '';
aTabCon[i].style.display = 'none';
};
this.className = 'active';
aTabCon[this.index].style.display = 'block';

    //鼠标移出的时候将a标签的颜色移除

<ul class="ulTab">
<li class="active">b1</li>
<li>b2</li>
<li>b3</li>
<li>b4</li>
<li>b5</li>
<li>b6</li>
</ul>
</div>
<div class="boxRight">
<a href="#" style="display:block;">c1</a>
<a href="#">c2</a>
<a href="#">c3</a>
<a href="#">c4</a>
<a href="#">c5</a>
<a href="#">c6</a>

         var ul = this.children[1];

};

            ul.style.display = "none";

for(var i=0;i<aTabLi.length;i )
{
aTabLi[i].index = i;
aTabLi[i].onclick = function()
{

            height: 40px;

var oBox = document.getElementById('boxImg');
var aLi = document.getElementById('ulLeft').getElementsByTagName('li');
var aConDiv = oBox.getElementsByTagName('div');

         //给a标签去除active

</div>

         a.className ="active";

};

    }

<ul class="ulTab">
<li class="active">a1</li>
<li>a2</li>
<li>a3</li>
<li>a4</li>
<li>a5</li>
<li>a6</li>
</ul>
</div>
<div class="boxRight">
<a href="#" style="display:block;">b1</a>
<a href="#">b2</a>
<a href="#">b3</a>
<a href="#">b4</a>
<a href="#">b5</a>
<a href="#">b6</a>

    aLi[i].onmouseover = function() {

<ul class="ulTab">
<li class="active">d1</li>
<li>d2</li>
<li>d3</li>
<li>d4</li>
<li>d5</li>
<li>d6</li>
</ul>
</div>

            position: relative;

//var aConDiv = oBox.getElementsByTagName('div')[0];
var aTabCon = aConDiv.getElementsByTagName('a');
var aTabLi = aConDiv.getElementsByTagName('li');

            line-height: 30px;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
*{margin:0;padding:0;list-style:none;}
.box{width:800px;height:400px;border:5px solid #000;margin:50px auto;}
#ulLeft{width:200px;float:left;}
#ulLeft li{height:98px;line-height:98px;border-bottom:2px solid #f00;background:blue;font-size:50px;text-align:center;color:#fff;}
#ulLeft li.active{color:#fff;background:#ccc;}
.boxRight{width:600px;height:400px;float:left;display:none;}
.boxRight a{display:none;background:#6F0;color:#fff;font-size:100px;line-height:360px;height:360px;text-decoration:none;text-align:center;}
.ulTab{width:100%;display:table;height:40px;}
.ulTab li{display:table-cell;text-align:center;background:yellow;color:#000;cursor:pointer;line-height:40px;border-right:2px solid #000;}
.ulTab li.active{color:#fff;background:#f00;}
</style>
<body>
<div class="box" id="boxImg">
<ul id="ulLeft">
<li class="active">a1</li>
<li>b1</li>
<li>c1</li>
<li>d1</li>
</ul>
<div class="boxRight" style="display:block;">
<a href="#" style="display:block;">a1</a>
<a href="#">a2</a>
<a href="#">a3</a>
<a href="#">a4</a>
<a href="#">a5</a>
<a href="#">a6</a>

         ul.style.display = "block";} 

                <li><a href="##">文档1</a></li>

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

        *{margin:0;padding:0;}

 

                <li><a href="##">文档1</a></li>

         //获取ul 判断是否存在ul,若存在则显示ul

        #nav{

                <li><a href="##">文档1</a></li>

            color: #fff;

         if(ul){    // if(ul)表示存在ul这个东西

            color: #fff;

            </ul>

            width: 100px;

    aLi[i].onmouseout = function() {

        #nav>li>ul{

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

            text-decoration: none;

</head>

        #nav>li>ul>li>a{

        </li>

        

            text-decoration: none;

         //将二级导航显示

         //给a标签添加active

            background: yellow;

      //e.stopPropagation()在此将事件冒泡阻止试试

<head>

                <li><a href="##">我的1</a></li>

            <a href="##">我的</a>

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

                <li><a href="##">文档1</a></li>

            background: #000;

            width:100%;

        }

                <li><a href="##">我的1</a></li>

        #nav>li{

            width: 100px;

        ul,li{list-style: none;}

                <li><a href="##">我的1</a></li>

        }

            <ul>

                <li><a href="##">文档1</a></li>

//先获取父级元素

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

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

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

            left: 0;

<script>

        /* 一级导航样式 */

            background: red;

        </li>

            float: left;

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

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

            <a href="##">文档</a>

         var a = this.children[0];

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

            <ul>

            width: 80px;

        <li>

        }

    }

        #nav li>.active{

    <style>

//鼠标移入二级导航出现 

        }

            <ul >

             console.log(111);

                <li><a href="##">我的1</a></li>

        <li>

for(var i=0;i<aLi.length;i ){

}

var oNav = document.getElementById("nav"); 

        <li>

//获取导航栏中所有的li

            top: 40px;

            text-align: center;

            height: 40px;

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

</body>

                <li><a href="##">我的1</a></li>

<body>

            float: left;

            </ul>

    <title>Document</title>

            text-align: center;

<html lang="en">

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

    <meta charset="UTF-8">

         var ul = this.children[1];       

<!DOCTYPE html>

        #nav>li>a{

         var a = this.children[0];

</html>

</script>

            height: 30px;

            display: none;

         }

        }

        }

        }

    //给每一个li添加一个鼠标移入事件(主要应用冒泡的原理,但是效率可能有点低)

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

var aLi = oNav.querySelectorAll("li");

            display: block;

            line-height: 40px;

    </ul>

本文由时时app平台注册网站发布于web前端,转载请注明出处:jquery实现的个人中心导航菜单,jquery实现导航菜

关键词: