## 一. 组件详解
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. 网站建设者可利用嗨创建站平台，为其建设网站的所有页面统一替换导航。
