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; } } }