js手写手风琴菜单

最新推荐文章于 2022-12-09 20:46:55 发布

github_39274378

最新推荐文章于 2022-12-09 20:46:55 发布

阅读量655

点赞数

分类专栏： js手写插件

本文链接：https://blog.csdn.net/github_39274378/article/details/77369005

版权

js手写插件专栏收录该内容

5 篇文章 2 订阅

订阅专栏

html

<!DOCTYPE html>
<html>
<!--1,lang="zh-cn"-->
<head lang="zh-cn">
 <meta charset="UTF-8">
 <title>menu_demo</title>
 <!--菜单加布局头部样式必须引入-->
 <link rel="stylesheet" href="menu.css">
</head>
<body>
 <div id="header" style="width: 100%;height: 90px;border:1px solid #ddd">
  <h1>header</h1>
 </div>
 <div class="section">
  <div class="main_container">
    <!--左边菜单栏-->
    <div class=" Menu">
     <ul class="mainMenu">
      <li>
       <div class="titleMenu clearfloat">
        <img src="../../icon/court.png" class="pull-left" alt="">
        <span class="pull-left">法院</span>
        <img src="../../icon/blue_down.png" class="pull-right" alt="">
       </div>
       <ul class="subMenu">
        <li>子菜单1</li>
        <li>子菜单2</li>
        <li>子菜单3</li>
       </ul>
      </li>
      <li>
       <div class="titleMenu clearfloat">
        <img src="../../icon/commit.png" class="pull-left" alt="">
        <span class="pull-left">检察院</span>
        <img src="../../icon/blue_down.png" class="pull-right" alt="">
       </div>
       <ul class="subMenu">
        <li>子菜单1</li>
        <li>子菜单2</li>
        <li>子菜单3</li>
       </ul>
      </li>
     </ul>
    </div>
    <!--右边切换内容-->
    <div id="context_show">
     <h1>content</h1>
     <!--<iframe id="pageContent" src="../../iframe.html" style="border: 0px; width: 100%; height: 100%; top: 0px;" scrolling="no"></iframe>-->
     <h1>使用说明</h1>
     <p>
      1：所有class为自定义class，不需要依赖任何框架，只需引入menu.css和jquery.js，自行编写class时避免重复
      <br>
      2：html结构不可更改，菜单文本，图标可自定义修改，不会影响布局
      <br>
      3：采用position已经做好header高度固定，sidebar的菜单宽度固定的，中间内容自适应的整体布局，调整header和菜单，只需更改less中@menu_width和@header_height即可
      <br>
      4：更改菜单行高，字体，颜色风格，只需更改对应变量
      <br>
      <img src="../../icon/revise.png" alt="">
      <br>
      5：若改动幅度过大，一级菜单的图标会有偏差只需微调图标位置
      <br>
      <img src="../../icon/revise1.png" alt="">
     </p>
    </div>
  </div>
 </div>

<!--引入jquery,bootstrap js-->
<script src="../../../../resources/bootstrap/js/jquery-1.11.3.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        //设置高度
        var container_height = $(window).height() - 90 + 'px';
        $('.section .main_container').height(container_height);
        $('.section .main_container .Menu').height(container_height);
        $('#context_show').height(container_height);
        //左侧菜单栏伸缩
        $('.subMenu').hide();
        $('.subMenu').delay(400).slideDown(700);
        $('.subMenu').find('li').first().addClass('chosen');
        //点击子菜单变颜色
        $('.subMenu').on('click', 'li', function () {
            $('.subMenu').find('li').removeClass('chosen');
            $(this).addClass('chosen');
        });
        //点击主菜单收缩
        $('.mainMenu').on('click', '.titleMenu', function () {
            $(this).next('.subMenu').slideToggle().parent().siblings('.subMenu').slideUp();
        });
    });
</script>
</body>
</html>

less

@theme_color:#0093F9;
@menu_bg_color:#EEF5FF;
@content_bg_color:#fff;
@title_bg_color:#D3E5FF;
@sub_text_color:#596E81;
@header_height:90px;
@menu_width:280px;
@menu_height:66px;
@title_text_size:28px;
@sub_text_size:24px;
//重写
*{
 margin: 0;
 padding: 0;
 outline: none;
 box-sizing: border-box;
}
.clearfloat:after{  /*最简方式*/
 content: '';
 display: block;
 clear: both;
}
.pull-right{
 float: right;
}
.pull-left{
 float: left;
}
.section{
 padding-top:@header_height;
 .main_container{
  width: 100%;
  .Menu{
   text-align: center;
   position: absolute;
   top:@header_height;
   left:0;
   z-index:999;
   width:@menu_width;
   padding: 0;
   background: @menu_bg_color;
   ul.mainMenu{
    text-align: center;
    margin-top: 20px;
    height: 100%;
    li{
     overflow: hidden;
     div.titleMenu{
      width: 100%;
      padding: 0 15px 0 45px;//此处需对应动态调整，建议0不动
      background: @title_bg_color;
      color: @theme_color;
      cursor: pointer;
      height: @menu_height;
      line-height: @menu_height;
      text-align: center;
      font-size:@title_text_size;
      img.pull-left{
       margin-top:20px;//此处需对应动态调整
       margin-right: 5px;//此处需对应动态调整
      }
      img.pull-right{
       margin-top:25px;//此处需对应动态调整
      }
     }
     ul.subMenu{
      li{
       text-align: center;
       height: @menu_height;
       cursor: pointer;
       line-height: @menu_height;
       font-size:@sub_text_size;
       color:@sub_text_color;
      }
      li.chosen{
       background:@content_bg_color;
       color:@theme_color;
      }
     }
    }
   }
  }
  #context_show{
   position: absolute;
   top:@header_height;
   left:0;
   padding-left:@menu_width;
   width: 100%;
   background-color:@content_bg_color;
  }
 }
}

github_39274378

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js手写手风琴菜单

htmlhtml>html>head lang="zh-cn"> meta charset="UTF-8"> title>menu_demotitle> 菜单加布局头部样式必须引入--> link rel="stylesheet" href="menu.css">head>body> div id="header" style="width: 100%;height:
复制链接

扫一扫