设为首页收藏本站
开启辅助访问 切换到宽版
快捷导航 发布信息
搜索
搜索附件  
自丢网 › 附件中心 › 模板下载 › 网页特效 › 菜单导航代码 ›jQuery响应式网站导航菜单栏代码.zip

板块导航

热门下载

左侧广告
版权所有：自丢网
For 2020-2050 © zidiu.com

jQuery响应式网站导航菜单栏代码.zip

 

jQuery响应式网站导航菜单栏代码:


简单实用的jQuery响应式网站导航菜单栏代码，自适应不同浏览器宽度，是一款电脑和手机移动端通用的导航栏代码。

  1. js代码

  3. <script type="text/javascript" src="js/jquery.min.js"></script>
  4. <script type="text/javascript">
  5. //用于判断导航栏的状态
  6. var toggle = true;

  8. //导航栏按钮
  9. $('.btnImg').click(function() {
  10.         if (toggle) {
  11.                 $('.btnImg').css("border", "1px solid #b0ccf3");
  12.                 toggle = false
  13.         } else {
  14.                 $('.btnImg').css("border", "1px solid transparent");
  15.                 toggle = true;
  16.         }
  17.         $(".show").slideToggle(300);
  18. })

  20. //窗口大小发生改变
  21. $(window).resize(function() {
  22.         //获取窗口宽度
  23.         var windSize = $(window).width();

  25.         if (windSize > 576) {
  26.                 $(".show").slideDown(0);
  27.         } else {
  28.                 $(".show").slideUp(0);
  29.         }
  30. });
  31. </script>
复制代码