## 一. 組件詳解 1. 導航由一系列的鏈接組成，簡明扼要的介紹網站的整體內容，和框架。 2. 網站建設者可利用嗨創建站平臺，為其建設網站的所有頁面統一替換導航。 3. 導航樣板如圖片所示： >  4.新聞詳情和產品詳情無需在導航中顯示 * * * * * ## 二.功能描述 1. 導航為網頁的訪問者提供一定的途徑，使其可以方便地訪問到所需的內容。 * * * * * ## 三.代碼規范 * 1.導航組件的標識: id=“h5c_navigate"。說明：標明這是一個導航組件。 * 2.導航組件應自帶響應式。（主要以手機端和電腦端為主）。舉例： 手機端：  電腦端：  * 3.導航的dom結構不變，其必須以下代碼所示結構: ~~~ <div class="collapse navbar-collapse" id="h5c_navigate"> // **規范1所示** <ul class="nav navbar-nav navbar-right text-center" style="margin: 20px 0;"> <li class="h5c-navbar-active"><a href="#" style=""><span class="h5c-navbar-text">首頁</span></a></li> <li><a href="#">產品</a></li> <li><a href="#">新聞</a></li> <li><a href="#">聯系我們</a></li> <li> <div class="dropdown"> <a type="button" class="btn dropdown-toggle" data-toggle="dropdown">關于我們<span class="caret"></span></a> <ul class="dropdown-menu"> <li class="active"><a href="#">公司簡介</a></li> <li><a href="#">團隊簡介</a></li> <li><a href="#">員工簡介</a></li> <li><a href="#">公司環境</a></li> </ul> </div> </li> </ul> </div> ~~~ 說明：（1）、不能添加任何class ；（2）、不能添加任何行內式；（3）、不能添加任何其他代碼。(4)、導航中如果要對當前導航狀態進行標識則需用class="active"進行標識，網站發布以后程序會做出統一判斷（5）如果想修改其樣式，可在該組件之上添加style標簽；例如： ~~~ <style> .h5c_xd_sssssss .navbar-collapse{ ...... } .h5c_xd_sssssss .navbar-collapse ul{ ...... } .h5c_xd_sssssss .navbar-collapse li{ ...... } .h5c_xd_sssssss .navbar-collapse li :hover{ ...... } </style> ~~~ * * * * * ## 四.代碼示例 （1）. 應用舉例： ~~~ <nav id="h5c_g_navigate" class="navbar navbar-inverse h5c_FIRMkFOqKascl" role="navigation" style="margin-bottom: 0;background-color:transparent;border: none;"> <div class="container"> /******以下是導航組件對應的的css******/ <style> .h5c_FIRMkFOqKascl #logo{ position: absolute;left: 35%;top: 0%; } .navbar-toggle{ margin-top: 20px; margin-bottom: 28px; -webkit-border-radius: 2em 5em 2em .6em / 2em 4em 2em .6em; -moz-border-radius: 2em 5em 2em .6em / 2em 4em 2em .6em; border-radius: 2em 5em 2em .6em / 2em 4em 2em .6em; padding: 11px 12px; background-color: hsl(340, 100%, 75%); } .h5c_FIRMkFOqKascl .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus{ color: hsl(340, 100%, 30%); } .h5c_FIRMkFOqKascl .navbar-nav > li{ padding: 0 4px; } .h5c_FIRMkFOqKascl .navbar-nav > li > a{ font-size: 2vh; font-family: 'Microsoft YaHei', 'Open Sans', Arial, sans-serif; color: hsl(340, 100%, 30%); } .h5c_FIRMkFOqKascl .dropdown{ text-align: center; } .h5c_FIRMkFOqKascl .dropdown a{ text-align: center; } .h5c_FIRMkFOqKascl .dropdown > a{ padding:10px 15px; font-size: 2vh; font-family: 'Microsoft YaHei', 'Open Sans', Arial, sans-serif; color: hsl(340, 100%, 30%) ! important; line-height: 20px; border:none; border-radius: 0; display: block; } @media screen and (min-width:768px){ .h5c_FIRMkFOqKascl .dropdown > a{ padding-top: 15px; padding-bottom: 15px; } } .h5c_FIRMkFOqKascl .navbar-nav > li a:hover{ transition: background .2s ease-in-out; background-color: hsl(340, 100%, 75%); -webkit-border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em; -moz-border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em; border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em; background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(/diy/asyn.file/jsb/module/menu/menu-5/img/noise.png); box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; } .h5c_FIRMkFOqKascl .nav .open > a, .nav .open > a:hover, .nav .open > a:focus{ border-color: transparent; background-color: transparent; } .h5c_FIRMkFOqKascl .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus{ background-color: hsl(340, 100%, 75%); } </style> <style id="h5c-navbar-active">.h5c_FIRMkFOqKascl .h5c-navbar-active a{ background-color: hsl(340, 100%, 75%); background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(/diy/asyn.file/jsb/module/menu/menu-5/img/noise.png); box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px;} </style> /******以上是導航組件對應的的css******/ <div class="navbar-header" style="margin: 0;"> <img data-type="img" onerror="javascript:this.src='/diy/asyn.file/jsb/module/menu/menu-5/img/logo.png'" src="/diy/asyn.file/jsb/module/menu/menu-5/img/logo.png" alt="" style="padding: 0 0 0 15px;"/> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#h5c_navigate"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> /***************************以上是導航組件部分****************************/ <div class="collapse navbar-collapse" id="h5c_navigate">//**導航響應的標識 <ul class="nav navbar-nav navbar-right h5c-navbar-hover h5c-navbar-bgcolor text-center" style="margin: 20px 0;"> <li class="h5c-navbar-active"><a href="#">首頁</a></li> <li><a href="#">產品</a></li> <li><a href="#">新聞</a></li> <li><a href="#">聯系我們</a></li> <li><div class="dropdown"> <a type="button" class="btn dropdown-toggle" data-toggle="dropdown">關于我們 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li> <a href="#">公司簡介</a> </li> <li> <a href="#">團隊簡介</a> </li> <li> <a href="#">員工簡介</a> </li> <li> <a href="#">公司環境</a> </li> </ul> </div> </li> </ul> </div> /***************************以上是導航組件部分****************************/ </div> </nav> ~~~ （2）. 應用效果圖： 電腦端：  手機端：  ## 五.補充說明 按照規范開發的導航代碼，嗨創統一提供以下功能： 1. 添加新的導航項。 2. 修改文字與連接。 3. 一級菜單和二級菜單的隨意轉換。 4. 導航項的位置隨意調整。 5. 網站建設者可利用嗨創建站平臺，為其建設網站的所有頁面統一替換導航。