jQuery自适应网站导航栏代码.zip资源-CSDN文库

共5个文件

png：2个

html：1个

js：1个

网页特效

CSS特效

jQuery特效

197 浏览量 2023-11-02 23:00:27 上传评论收藏 39KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQuery自适应网站导航栏代码.zip （5个子文件）

jiaoben6815

jquery.min.js 95KB

img

navBtn.png 326B

wunsun-logo.png 3KB

css

style.css 2KB

index.html 2KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>jQuery自适应网站导航栏代码 - 【更多源码：www.96flw.com】</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="c-nav"> <div class="container navFlex"> <div class="flexItem"> <img class="logo" src="img/wunsun-logo.png" /> </div> <div class="flexItem hiden"> <img class="btnImg" src="img/navBtn.png" /> </div> <div class="flexItem show"> <ul> <li><a href="#">首页</a></li> <li><a href="#">品牌故事</a></li> <li><a href="#">产品中心</a></li> <li><a href="#">网上商城</a></li> <li><a href="#">招商加盟</a></li> <li><a href="#">行业新闻</a></li> <li><a href="#">练习我们</a></li> </ul> </div> </div> </div> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> //用于判断导航栏的状态 var toggle = true; //导航栏按钮 $('.btnImg').click(function() { if (toggle) { $('.btnImg').css("border", "1px solid #b0ccf3"); toggle = false } else { $('.btnImg').css("border", "1px solid transparent"); toggle = true; } $(".show").slideToggle(300); }) //窗口大小发生改变 $(window).resize(function() { //获取窗口宽度 var windSize = $(window).width(); if (windSize > 576) { $(".show").slideDown(0); } else { $(".show").slideUp(0); } }); </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p> <p>更多源码：<a href="http://www.96flw.com/" target="_blank">www.96flw.com</a></p> </div> </body> </html>

评论收藏

内容反馈