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

ajian

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

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

1. js代码
   
2. 
   
3. <script type="text/javascript" src="js/jquery.min.js"></script>
   
4. <script type="text/javascript">
   
5. //用于判断导航栏的状态
   
6. var toggle = true;
   
7. 
   
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. })
    
19. 
    
20. //窗口大小发生改变
    
21. $(window).resize(function() {
    
22.         //获取窗口宽度
    
23.         var windSize = $(window).width();
    
24. 
    
25.         if (windSize > 576) {
    
26.                 $(".show").slideDown(0);
    
27.         } else {
    
28.                 $(".show").slideUp(0);
    
29.         }
    
30. });
    
31. </script>

复制代码

jQuery响应式网站导航菜单栏代码.zip (39.54 KB, 下载次数: 38)

2021-2-22 14:36 上传

点击文件名下载附件
jQuery响应式网站导航菜单栏代码