jQuery+bootstrap响应式二级下拉导航菜单代码.rar资源-CSDN文库

共11个文件

png：4个

css：3个

jpg：2个

响应式导航

企业导航栏

5星 · 超过95%的资源需积分: 50 154 浏览量 2019-05-29 17:02:45 上传评论 1 收藏 98KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQuery+bootstrap响应式二级下拉导航菜单代码.rar （11个子文件）

jQuery+bootstrap响应式二级下拉导航菜单代码

index.html 4KB

jquery.min.js 91KB

image

logo2.jpg 5KB

closed.png 501B

aa.jpg 40KB

logo.png 2KB

css

head.css 7KB

top.png 186B

top2.png 184B

reset.css 4KB

bootstrap.css 138KB

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>响应式导航</title>  <link rel="stylesheet" href="css/reset.css" />  <link rel="stylesheet" type="text/css" href="css/bootstrap.css">  <link rel="stylesheet" href="css/head.css" /> </head> <body>  <header class="header"> <div class="container clearfix"> <div class="fl left"> <a href="javascript:void(0)" ><img src="image/logo.png" alt="" class="img1" /></a> <a href="javascript:void(0)" ><img src="image/logo2.jpg" alt="" class="img2" /></a> </div> <div class="fr nav"> <ul class="navbar_nav" data-in="fadeInDown" data-out="fadeOutUp"> <li class="active"> <a href="javascript:void(0)">首页</a> </li> <li class="dropdown"> <a href="javascript:void(0)"> 业务体系 </a> <div class="dropdown_menu"> <a href="#">二级菜单</a> <a href="#">二级菜单</a> <a href="#">二级菜单</a> </div> </li> <li class="dropdown"> <a href="javascript:void(0)">直营园</a> <div class="dropdown_menu"> <a href="#">二级菜单</a> <a href="#">二级菜单</a> <a href="#">二级菜单</a> </div> </li> <li> <a href="javascript:void(0)">行知资讯</a> </li> <li> <a href="javascript:void(0)">关于我们</a> </li> <li> <a href="javascript:void(0)">联系合作</a> </li> </ul> </div> <a href="javascript:void(0)" id="navToggle"> <span></span> </a> </div> </header>  <div class="m_nav"> <div class="top clearfix"> <img src="image/closed.png" alt="" class="closed" /> </div> <div class="logo"> <img src="image/logo2.jpg" alt="" /> </div> <ul class="ul" data-in="fadeInDown" data-out="fadeOutUp"> <li class="active"> <a href="javascript:void(0)">首页</a> </li> <li class="dropdown"> <a href="javascript:void(0)"> 业务体系 </a> <div class="dropdown_menu"> <a href="#">二级菜单</a> <a href="#">二级菜单</a> <a href="#">二级菜单</a> </div> </li> <li class="dropdown"> <a href="javascript:void(0)">直营园</a> <div class="dropdown_menu"> <a href="#">二级菜单</a> <a href="#">二级菜单</a> <a href="#">二级菜单</a> </div> </li> <li> <a href="javascript:void(0)">行知资讯</a> </li> <li> <a href="javascript:void(0)">关于我们</a> </li> <li> <a href="javascript:void(0)">联系合作</a> </li> </ul> </div> <div class="banner"> <img src="image/aa.jpg"> </div> <div class="box" style="height: 1000px;"> <h3 style="text-align: center; color: aliceblue">调整浏览器宽度大小查看效果</h3> </div> <script src="js/jquery.min.js"></script> <script> $(function(){ //超过一定高度导航添加类名 var nav=$("header"); //得到导航对象 var win=$(window); //得到窗口对象 var sc=$(document);//得到document文档对象。 win.scroll(function(){ if(sc.scrollTop()>=100){ nav.addClass("on"); }else{ nav.removeClass("on"); } }) //移动端展开nav $('#navToggle').on('click',function(){ $('.m_nav').addClass('open'); }) //关闭nav $('.m_nav .top .closed').on('click',function(){ $('.m_nav').removeClass('open'); }) //二级导航移动端 $(".m_nav .ul li").click(function() { $(this).children("div.dropdown_menu").slideToggle('slow') $(this).siblings('li').children('.dropdown_menu').slideUp('slow'); }); }) </script> </body> </html>

评论收藏

内容反馈