汉堡菜单的使用

最近学习了网页的灵活布局，接触了汉堡菜单，但是对这部分代码的理解依旧存疑，不过依样画瓢，还是能实现这部分效果了，仅以此记录。、

 

这个页面要实现当屏幕分辨率宽度小于550时，将导航菜单部分隐藏起来到汉堡菜单中。

• 在index.html中：

    插入汉堡菜单代码：

• 在responsive.css中：

  @media screen and (max-width:550px) {
      
      .nav {
        z-index:10;
        background-color:white;
        position:absolute;
           width:300px;
         -webkit-transform: translate(-300px, 0);
        transform:translate(-300px,0);
        transition:transform 0.3s ease;
      }
      .nav.open {
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }
    .header__menu{
      display:inline-block;
      position:absolute;
      right:0;
      padding:1em;
    }
    .header__menu svg{
      width:32px;
      fill:black;    
    }
    .nav_item{
      display: list-item;
      border-bottom: 1px solid #E0E0E0;
      width: 100%;
      text-align: left;
    }
  
  }

   

• javascript部分:

        在index.html的body里添加：（疑惑一：只能放在body中，放在head部分不能实现效果，很奇怪）

<script>
    var menu = document.querySelector('#menu');
      var main = document.querySelector('main');
      var drawer = document.querySelector('.nav');

      menu.addEventListener('click', function(e) {
        drawer.classList.toggle('open');
        e.stopPropagation();
      });
      main.addEventListener('click', function() {
        drawer.classList.remove('open');
      });
script>

 如上图所示，我的导航出来是横向的,疑惑二：明明设置了display:list-item;为什么它没有竖排显示？

 

转载于:https://www.cnblogs.com/fordms/p/6932135.html