导航条bootstrap

 <link rel="stylesheet" href="{CSS_PATH}jquery-ui-1.11.4.custom/jquery-ui.css"> 

   
<script src="{JS_PATH}jquery-1.11.1.min.js"></script>

  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<nav class="navbar">

  <div class="navbar-header">

 </div>

 <div class="navbar-coll<nav class="navbar navbar-inverse navbar-fixed-top" id="header_nav">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img src="/statics/images/img/xmh/LOGO.png"></a>
</div>

<div class="navbar-collapse" id="bs2" style="display: block;">
<ul class="nav nav-justified" id="bs1ul">
<li class="dropdown">
<a style="background-color: rgba(40, 40, 40, 0.95);" href="/company/info/">公司简介 <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a>
<ul tabindex="0" class="dropdown-menu ui-menu ui-widget ui-widget-content" id="ui-id-1" role="menu" aria-activedescendant="ui-id-4" style="display: none;">
<li tabindex="-1" class="ui-menu-item" id="ui-id-2" role="menuitem"><a href="/company/info/">公司概况</a></li>
<li tabindex="-1" class="ui-menu-item" id="ui-id-3" role="menuitem"><a href="/company/credit/">公司资质</a></li>
<li tabindex="-1" class="ui-menu-item" id="ui-id-4" role="menuitem"><a href="/company/org/">公司机构</a></li>
</ul>
</li>
<li class="dropdown">
<a style="background-color: rgba(40, 40, 40, 0.95);" href="/products">产品中心 <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a>
<ul tabindex="0" class="dropdown-menu ui-menu ui-widget ui-widget-content" id="ui-id-5" role="menu" style="display: none;">
<li tabindex="-1" class="ui-menu-item" id="ui-id-6" role="menuitem" aria-haspopup="true"><span class="ui-menu-icon ui-icon ui-icon-carat-1-e"></span><a href="/elect">电气工程</a>
<ul class="submenu ui-menu ui-widget ui-widget-content ui-front" role="menu" aria-expanded="false" aria-hidden="true" style="display: none;">

<li tabindex="-1" class="ui-menu-item" id="ui-id-7" role="menuitem" aria-haspopup="true"><span class="ui-menu-icon ui-icon ui-icon-carat-1-e"></span><a href="http://m.metalwood.cn/elect/gui/">机柜</a><ul class="ui-menu ui-widget ui-widget-content ui-front" role="menu" aria-expanded="false" aria-hidden="true" style="display: none;"><li tabindex="-1" class="ui-menu-item" id="ui-id-8" role="menuitem"><a href="http://m.metalwood.cn/elect/gui/gui1/">机柜分类1</a></li><li tabindex="-1" class="ui-menu-item" id="ui-id-9" role="menuitem" aria-haspopup="true"><span class="ui-menu-icon ui-icon ui-icon-carat-1-e"></span><a href="http://m.metalwood.cn/elect/gui/gui2/">机柜分类2</a><ul class="ui-menu ui-widget ui-widget-content ui-front" role="menu" aria-expanded="false" aria-hidden="true" style="display: none;"><li tabindex="-1" class="ui-menu-item" id="ui-id-10" role="menuitem"><a href="http://m.metalwood.cn/elect/gui/gui2/fl22/">fl22</a></li></ul></li></ul></li><li tabindex="-1" class="ui-menu-item" id="ui-id-11" role="menuitem"><a href="http://m.metalwood.cn/elect/ebox/">配电箱</a></li>
</ul>
</li>
<li tabindex="-1" class="ui-menu-item" id="ui-id-12" role="menuitem" aria-haspopup="true"><span class="ui-menu-icon ui-icon ui-icon-carat-1-e"></span><a href="/expf">工业防爆</a>
<ul class="submenu ui-menu ui-widget ui-widget-content ui-front" role="menu" aria-expanded="false" aria-hidden="true" style="display: none;">
<li tabindex="-1" class="ui-menu-item" id="ui-id-13" role="menuitem"><a href="http://m.metalwood.cn/expfs/zyg/">正压柜</a></li><li tabindex="-1" class="ui-menu-item" id="ui-id-14" role="menuitem"><a href="http://m.metalwood.cn/expfs/fxxw/">分析小屋</a></li><li tabindex="-1" class="ui-menu-item" id="ui-id-15" role="menuitem"><a href="http://m.metalwood.cn/expfs/fcfb/">粉尘防爆</a></li><li tabindex="-1" class="ui-menu-item" id="ui-id-16" role="menuitem"><a href="http://m.metalwood.cn/expfs/zag/">增安箱</a></li> </ul>
</li>
<li tabindex="-1" class="ui-menu-item" id="ui-id-17" role="menuitem" aria-haspopup="true"><span class="ui-menu-icon ui-icon ui-icon-carat-1-e"></span>
<a href="/desk">操作台</a>
<ul class="submenu ui-menu ui-widget ui-widget-content ui-front" role="menu" aria-expanded="false" aria-hidden="true" style="display: none;">
<li tabindex="-1" class="ui-menu-item" id="ui-id-18" role="menuitem" aria-haspopup="true"><span class="ui-menu-icon ui-icon ui-icon-carat-1-e"></span><a href="http://m.metalwood.cn/desks/class2/">Strength全框架操作控制台</a><ul class="ui-menu ui-widget ui-widget-content ui-front" role="menu" aria-expanded="false" aria-hidden="true" style="display: none;"><li tabindex="-1" class="ui-menu-item" id="ui-id-19" role="menuitem"><a href="http://m.metalwood.cn/desks/class2/S650/">S650操作控制台</a></li><li tabindex="-1" class="ui-menu-item" id="ui-id-20" role="menuitem"><a href="http://m.metalwood.cn/desks/class2/S550/">S550操作控制台</a></li></ul></li><li tabindex="-1" class="ui-menu-item" id="ui-id-21" role="menuitem" aria-haspopup="true"><span class="ui-menu-icon ui-icon ui-icon-carat-1-e"></span><a href="http://m.metalwood.cn/desks/class3/">QUICK快速安装操作控制台</a><ul class="ui-menu ui-widget ui-widget-content ui-front" role="menu" aria-expanded="false" aria-hidden="true" style="display: none;"><li tabindex="-1" class="ui-menu-item" id="ui-id-22" role="menuitem"><a href="http://m.metalwood.cn/desks/class3/Q600G/">Q600通用操作控制台</a></li><li tabindex="-1" class="ui-menu-item" id="ui-id-23" role="menuitem"><a href="http://m.metalwood.cn/desks/class3/Q600S/">Q600阶梯操作控制台</a></li></ul></li><li tabindex="-1" class="ui-menu-item" id="ui-id-24" role="menuitem" aria-haspopup="true"><span class="ui-menu-icon ui-icon ui-icon-carat-1-e"></span><a href="http://m.metalwood.cn/desks/class4/">Engine多功能工程师台</a><ul class="ui-menu ui-widget ui-widget-content ui-front" role="menu" aria-expanded="false" aria-hidden="true" style="display: none;"><li tabindex="-1" class="ui-menu-item" id="ui-id-25" role="menuitem"><a href="http://m.metalwood.cn/desks/class4/E350/">E350通用型工程师台</a></li><li tabindex="-1" class="ui-menu-item" id="ui-id-26" role="menuitem"><a href="http://m.metalwood.cn/desks/class4/E450/">E450电动升降台</a></li><li tabindex="-1" class="ui-menu-item" id="ui-id-27" role="menuitem"><a href="http://m.metalwood.cn/desks/class4/E550/">E550多功能工程师台</a></li></ul></li><li tabindex="-1" class="ui-menu-item" id="ui-id-28" role="menuitem" aria-haspopup="true"><span class="ui-menu-icon ui-icon ui-icon-carat-1-e"></span><a href="http://m.metalwood.cn/desks/class1/">Wisdom多功能会议与媒体中心</a><ul class="ui-menu ui-widget ui-widget-content ui-front" role="menu" aria-expanded="false" aria-hidden="true" style="display: none;"><li tabindex="-1" class="ui-menu-item" id="ui-id-29" role="menuitem"><a href="http://m.metalwood.cn/desks/class1/Meeting/">多功能会议中心</a></li><li tabindex="-1" class="ui-menu-item" id="ui-id-30" role="menuitem"><a href="http://m.metalwood.cn/desks/class1/Screen/">媒体视觉中心</a></li></ul></li> </ul>
</li>

<li tabindex="-1" class="ui-menu-item" id="ui-id-31" role="menuitem" aria-haspopup="true"><span class="ui-menu-icon ui-icon ui-icon-carat-1-e"></span><a href="/power">电能管理</a>
<ul class="submenu ui-menu ui-widget ui-widget-content ui-front" role="menu" aria-expanded="false" aria-hidden="true" style="display: none;">
<li tabindex="-1" class="ui-menu-item" id="ui-id-32" role="menuitem"><a href="/power_ayns">数据采集分析</a></li>
<li class="divider ui-widget-content ui-menu-divider" style="height: 1px;"></li>
<li tabindex="-1" class="ui-menu-item" id="ui-id-33" role="menuitem"><a href="http://m.metalwood.cn/2015/pdes_0410/1.html">UMG 104</a></li>
</ul>
</li>
</ul>
</li>

<li class="dropdown">
<a style="background-color: rgba(40, 40, 40, 0.95);" href="/solutions">解决方案 <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a>
<ul tabindex="0" class="dropdown-menu ui-menu ui-widget ui-widget-content" id="ui-id-34" role="menu" style="display: none;">
<li tabindex="-1" class="ui-menu-item" id="ui-id-35" role="menuitem"><a href="/elect_case">电气工程</a></li>
<li tabindex="-1" class="ui-menu-item" id="ui-id-36" role="menuitem"><a href="/expf_case">工业防爆</a>
</li>
<li tabindex="-1" class="ui-menu-item" id="ui-id-37" role="menuitem" aria-haspopup="true"><span class="ui-menu-icon ui-icon ui-icon-carat-1-e"></span><a href="/dsolution">操作台</a>
<ul class="submenu ui-menu ui-widget ui-widget-content ui-front" role="menu" aria-expanded="false" aria-hidden="true" style="display: none;">
<li tabindex="-1" class="ui-menu-item" id="ui-id-38" role="menuitem"><a href="http://m.metalwood.cn/dsolutions/material/">多样的材料</a></li><li tabindex="-1" class="ui-menu-item" id="ui-id-39" role="menuitem"><a href="http://m.metalwood.cn/dsolutions/strufun/">结构与功能</a></li><li tabindex="-1" class="ui-menu-item" id="ui-id-40" role="menuitem"><a href="http://m.metalwood.cn/dsolutions/layout/">空间与布局</a></li><li tabindex="-1" class="ui-menu-item" id="ui-id-41" role="menuitem"><a href="http://m.metalwood.cn/dsolutions/groups/">灵活的组合</a></li><li tabindex="-1" class="ui-menu-item" id="ui-id-42" role="menuitem"><a href="http://m.metalwood.cn/dsolutions/dindustry/"> 行业与案例</a></li><li tabindex="-1" class="ui-menu-item" id="ui-id-43" role="menuitem"><a href="http://m.metalwood.cn/dsolutions/cusform/">个性化定制</a></li> </ul>
</li>
<li tabindex="-1" class="ui-menu-item" id="ui-id-44" role="menuitem"><a href="/power_case">电能管理</a></li>
</ul>
</li>
<li class="dropdown"><a style="background-color: rgba(40, 40, 40, 0.95);" href="/ourservice">服务与支持 <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a>
<ul tabindex="0" class="dropdown-menu ui-menu ui-widget ui-widget-content" id="ui-id-45" role="menu" style="display: none;">
<li tabindex="-1" class="ui-menu-item" id="ui-id-46" role="menuitem"><a href="http://m.metalwood.cn/ourservice/serel/">电气工程</a></li><li tabindex="-1" class="ui-menu-item" id="ui-id-47" role="menuitem"><a href="http://m.metalwood.cn/ourservice/serpower/">电能管理</a></li><li tabindex="-1" class="ui-menu-item" id="ui-id-48" role="menuitem"><a href="http://m.metalwood.cn/ourservice/serdesk/">操作台</a></li><li tabindex="-1" class="ui-menu-item" id="ui-id-49" role="menuitem"><a href="http://m.metalwood.cn/ourservice/serexpf/">工业防爆</a></li> </ul>
</li>
<li><a href="#" data-toggle="modal" data-target="#contactModal">联系我们</a></li>
</ul>
</div>


<div class="collapse" id="bs1" style="display: none;">
<ul class="nav navbar-nav" id="bs2ul">
<li class="dropdown">
<a href="/company/info/">公司简介</a><a class="dropdown-toggle" role="button" aria-expanded="false" href="" data-toggle="dropdown"><span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="/company/info/">公司概况</a></li>
<li><a href="/company/credit/">公司资质</a></li>
<li><a href="/company/org/">公司机构</a></li>
</ul>
</li>
<li class="dropdown">
<a href="/products">产品中心</a><a class="dropdown-toggle" role="button" aria-expanded="false" href="" data-toggle="dropdown"><span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="/elect">电气工程</a></li>
<li><a href="/expf">工业防爆</a></li>
<li>
<a href="/desk">操作台</a>
</li>

<li><a href="/power">电能管理</a></li>
</ul>
</li>

<li class="dropdown">
<a href="/solutions">解决方案</a><a class="dropdown-toggle" role="button" aria-expanded="false" href="#solutions" data-toggle="dropdown"><span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="/elect_case">电气工程</a></li>
<li><a href="/expf_case">工业防爆</a></li>
<li><a href="/dsolution">操作台</a></li>
<li><a href="/power_case">电能管理</a></li>
</ul>
</li>
<li><a href="/ourservice">服务与支持</a></li>
<li><a href="#" data-toggle="modal" data-target="#contactModal">联系我们</a></li>
<li><a href="/"><span class="glyphicon glyphicon-home"></span></a></li>
</ul>

</div>


</div>
</nav>apse">

   <ul class="nav

 </div>

</nav>

<script>
$(function() {

 $("#bs1ul .dropdown-menu").css("display","none");
 $("#bs1ul .dropdown").hover(
   function(){
    $(this).find(".dropdown-menu").css("display","block");
    $("#bs1ul .dropdown").each(function(index, element) {
            $(element).children("a:first-child").css("background-color","rgba(40,40,40,.95)");
        });
    $(this).children("a:first-child").css("background-color","#000000");
    },
   function(){
    $(this).find(".dropdown-menu").css("display","none");
     $("#bs1ul .dropdown ").each(function(index, element) {
            $(element).children("a:first-child").css("background-color","rgba(40,40,40,.95)");
        });
    }
    );
  
    $( "#bs1ul .dropdown-menu" ).menu();

$(window).load(function(){
 if($(window).width()>=768)
     {
  $("#bs1").css("display","none");
   $("#bs2").css("display","block");
     }else{
  $("#bs1").css("display","block");
  $("#bs1").css("height","0px");
   $("#bs2").css("display","none");
 }
 }); 
$(window).resize(function(){
   //process here
   if($(window).width()>=768)
     {
    $("#bs1").css("display","none");
   $("#bs2").css("display","block");
     }else{
   $("#bs1").css("display","block");
   $("#bs1").css("height","0px");
   $("#bs2").css("display","none");
 }
 
  }); 

 
 
});

</script>

1.当屏幕足够窄时 .navbar-collapse中的内容将会自动折叠看不到。

2.class="collapse" 与data-toggle="collapse'对应

3.如果 JavaScript 被禁用，并且视口（viewport）足够窄，致使导航条折叠起来，导航条将不能被打开，.navbar-collapse 内所包含的内容也将不可见

4.在phpcms中的libs/functions/extention.func.php下进行功能的函数的编写

function getcatxy($cid){

 if(is_array(subcat($cid)){

   foreach(subcat($cid) as $m){

     echo "<li><a href=".$m['url'].">".$m['catname']."</a>";

    if($m['child']==1){

       echo "<ul>";

       getcatxy($m['catid']);

       echo "</ul>";

    }

   echo "</li>";

}

}

return true;

}

2.