用js实现生活资讯网侧边栏

Posted 2022-01-02 代森森

效果：在小屏下点击头部导航栏的彩蛋图标会从左边划出侧边导航栏，点击‘叉’图标关闭侧边导航栏。

效果：

代码
1.html代码:

 <!-- 侧边栏点击 -->
    <div class="sidenav" id="sidenav">
        <div class="colsesidenav glyphicon glyphicon-remove" id="colsesidenav"></div>
        <ul class="clearfix">
            <li>首页</li>
            <li>新闻</li>
            <li>推荐</li>
            <li>热榜</li>
            <li>育儿</li>
            <li>美容</li>
            <li>整形</li>
            <li>养生</li>
        </ul>
    </div>

 <span class="hidden-lg hidden-md hidden-sm col-xs-2 sign" id="oversidenav">
    <h6 class="glyphicon glyphicon-th-list"></h6>
</span>

ps:这里的图标使用的bootstrap的字体图标

css代码:

#sidenav 
  display: block;
  position: fixed;
  top: 0;
  left: -99rem;
  width: 70%;
  height: 100%;
  background-color: #fff;
  z-index: 5;
  transition: all 0.5s ease;

#sidenav #colsesidenav 
  position: relative;
  font-size: 0.533333rem;
  top: 0.9rem;
  left: 0.27rem;

#sidenav ul 
  width: 100%;
  top: 1rem;
  left: 0.36rem;
  position: relative;

#sidenav ul li 
  padding: 0.24rem 0;
  float: left;
  width: 90%;
  border-right: 1px solid #090;

#sidenav ul li:hover 
  color: #090;

@media screen and (min-width: 768px) 
  #sidenav 
    display: none;
  

js代码:

 var oversidenav = document.getElementById('oversidenav');
    var sidenav = document.getElementById('sidenav');
    var colsesidenav = document.getElementById('colsesidenav');
    oversidenav.onclick = function() 
        sidenav.style.top = "0";
        sidenav.style.left = "0";
    
    colsesidenav.onclick = function() 
        sidenav.style.top = "0";
        sidenav.style.left = "-99rem";