自适应导航条js原生版

自适应导航条js原生版

看到bootstrap等第三方库中的导航条非常简单好用，没想到自己用原生试着实现用了这么多行代码

效果如下：

实现思路：

html+css：

1. 最外层nav宽度100%。高给固定值
2. 中间内容部分全部用一个div包裹，宽度百分比，margin: 0 auto; 实现居中
3. 左侧的logo图片外包div，给的固定宽高
4. 中间的navbar包裹ul列表用的百分比宽度，使其宽度能够在屏幕缩放的时候随之变化
5. 右侧按钮部分隐藏
6. 媒体查询屏幕宽度<768px时，将navbar定位至nav下方，高度给0，并将按钮显示

js：

1. 用布尔值作为开关控制点击状态
2. 先设置bol = true，让判断走if语句
3. 点击一次后，定时器执行navbar和nav的高度增大至预设值，关闭定时器
4. 定时器后将bol改为false，这样下次点击就会执行else中语句
5. else中定时器控制nav及navbar高度减小至预设值，关闭定时器
6. 定时器后将bol再改为true，这样下次点击就会执行if中语句

遇到的坑：

遇到的比较棘手的问题就是开关状态、点击事件、定时器到底该如何嵌套，不过最后还是把思路理清楚了

1. 先用布尔值判定是走if语句（高度+）还是else语句（高度-）
2. 再到点击按钮
3. 点击按钮后再触发定时器
4. 高度变化至设定值时关闭定时器，及改变布尔值

还有个问题就是因为navbar定位之后失去了撑开下方区块的功能，最后只能将父级nav的高度同步增大，不知道是不是有点绕了

上代码：

    
    
    


    

        

            
[站外图片上传中……(5)]
            

                
                
                
            
            

                

                    
首页
                    
公司简介
                    
产品介绍
                    
联系方式
                
            
  
        
  
    
    

        
这是下方内容