侧边栏导航

Posted 2020-09-03 风起了--

侧边栏效果，至于页面左部分。点击menu菜单，出现侧边栏，点击关闭，关闭菜单栏。

 效果图：

1.首先要引入boostrap的css库、字体图标。

 2.html如下：

<div id="menu">
       <button>close</button>
      <ul>
          <li>
              <h3><span class="glyphicon glyphicon-hdd"></span> Dashboard</h3>
              <ul>
                 <li><a href="#">set</a></li>
                 <li><a href="#">test</a></li>
                 <li><a href="#">css3</a></li>
                 <li><a href="#">html</a></li>
              </ul>
          </li>
           <li>
              <h3><span class="glyphicon glyphicon-tasks"></span> Tasks</h3>
              <ul>
                 <li><a href="#">vue</a></li>
                 <li><a href="#">anguler</a></li>
                 <li><a href="#">react</a></li>
                 <li><a href="#">jquery</a></li>
              </ul>
          </li>
           <li>
              <h3><span class="glyphicon glyphicon-hdd"></span> Calender</h3>
              <ul>
                 <li><a href="#">jeje</a></li>
                 <li><a href="#">jeje</a></li>
                 <li><a href="#">jeje</a></li>
                 <li><a href="#">jeje</a></li>
              </ul>
          </li>
           <li>
              <h3><span class="glyphicon glyphicon-heart"></span> Favourites</h3>
              <ul>
                 <li><a href="#">jeje</a></li>
                 <li><a href="#">jeje</a></li>
                 <li><a href="#">jeje</a></li>
                 <li><a href="#">jeje</a></li>
              </ul>
          </li>
      </ul>
  </div>
  <div id="content">

      <header>
          <button type="button">Menu</button>

      </header>
  </div>

3.设置样式关键代码用红色标出。

  

<style>
        *{
            margin: 0;
            padding: 0;
        }
        #menu{
            width: 300px;
            float: left;
            background: #3b3b3b;;
            height: 600px;
            color: #fff;
          <--隐藏侧边栏-->
            transform: translateX(-300px);
            padding-left: 20px;
            transition: all .5s ease;
        }
       
        #menu li {
            list-style: none;
            font-size: 20px;
            padding-top: 10px;
        }
        #menu li>h3{
            cursor: pointer;
        }
        #menu li a{
            color: #fff;
            text-decoration: none;
            text-indent: 13px;
            margin-left: 40px;;

        }
        #menu li>ul{
            display: none;
        }
        #menu ul ul li>a:hover{
            display: block;
            width: 236px;
            border-left: 6px solid rgb(95, 255, 76);
            background: #000;
            transform: translate3d(3px,3px,0);
            transition: all 200ms ease ;
        }
        
        #menu button{
            font-size: 30px;
             background: #3b3b3b;
            border: none;
            position: relative;
            left: 120px;
            top: 0px;
            margin: 20px;
        }
        #content{
            float: left;
            transform: translateX(-300px);
            transition: all .5s ease ;
        }
        #content  button{
            width: 60px;
            height: 60px;
            background: rgba(68, 181, 255, 0.95);
            color: #fff;
            font-size: 18px;
            border-radius: 4px;
            box-shadow: 2px 2px 2px #23527c;
        }
        .menu-change{
            trsform:translateX(0px);
            transition: all .5s ease;
        }
    </style>

　　4.jquery代码

      

<script>
      $(function(){
          $("#menu ul li>h3").click(function(){
              $(this).next().slideToggle();

          });

          $("#content button").click(function(){
              $("#menu,#content").css({
                  "transform":"translateX(0px)"
              });
          })
          $("#menu button").click(function(){
              $("#menu,#content").css({
                  "transform":"translateX(-300px)"
              });
          })
      })
  </script>