主界面面包屑导航增加垂直下拉菜单切换单位工程

css/main.css

@@ -370,7 +370,10 @@ a{
   border-bottom:1px solid #ddd
 }
 .navbar-crumb span{
-  width: 200px
+  float:left;
+}
+.navbar-crumb span.text-truncate{
+  max-width: 200px;
 }
 .dropdown-item{
   color:#007bff
@@ -423,4 +426,37 @@ a{
 .tb-background {
     bottom:-11px;
     border-color:#000 transparent transparent transparent;
+}
+/*快捷切换单位工程*/
+.navbar-crumb{
+  position: relative;
+}
+.navbar-crumb .f-nav,.navbar-crumb .s-nav{
+  position: absolute;
+  z-index: 999;
+  width: 200px;
+  background:#fff;
+  border: 1px solid rgba(0,0,0,.15);
+  padding: .5rem 0;
+}
+.navbar-crumb .f-nav{
+  right:50px;
+  top:35px;
+}
+.navbar-crumb .s-nav{
+  left:200px
+}
+.navbar-crumb .f-nav li{
+  padding: .25rem 1rem;
+  cursor: default;
+}
+.navbar-crumb .f-nav li.focus{
+color: #16181b;
+background-color: #f7f7f9;
+}
+.navbar-crumb .f-nav li .s-nav{
+  display: none
+}
+.navbar-crumb .f-nav li.focus .s-nav{
+  display: block
 }

zaojiashu.html

@@ -29,12 +29,25 @@
             <div class="navbar-text navbar-crumb px-1">
                 <span data-toggle="tooltip" data-placement="bottom" title="文件夹名称"><i class="fa fa-folder-open-o"></i>...</span>
                 <span class="text-muted px-1">\</span>
-                <span data-toggle="tooltip" data-placement="bottom" title="建设项目名称"><i class="fa fa-cubes"></i>...</span>
+                <span class="text-truncate" data-toggle="tooltip" data-placement="bottom" title="建设项目名称"><i class="fa fa-cubes"></i> 建设项目建设项目建设项目建设项目</span>
                 <span class="text-muted px-1">\</span>
-                <span data-toggle="tooltip" data-placement="bottom" title="单项工程名称"><i class="fa fa-cube"></i>...</span>
+                <span class="text-truncate" data-toggle="tooltip" data-placement="bottom" title="单项工程名称"><i class="fa fa-cube"></i> 单项工程</span>
                 <span class="text-muted px-1">\</span>
                 <span><i class="fa fa-sticky-note-o"></i></span>
-                <span class="text-truncate float-right"  data-toggle="tooltip" data-placement="bottom" title="乌恰县S309线K72+100-开普太西水库-苏约克村公路建设工程">&nbsp;乌恰县S309线K72+100-开普太西水库-苏约克村公路建设工程</span>
+                <span class="text-truncate"  data-toggle="tooltip" data-placement="bottom" title="乌恰县S309线K72+100-开普太西水库-苏约克村公路建设工程">&nbsp;乌恰县S309线K72+100-开普太西水库-苏约克村公路建设工程</span>
+                <ul class="f-nav list-unstyled">
+                    <li class="d-flex justify-content-between focus"><span class="title text-truncate"><i class="fa fa-cube"></i> 单项工程1</span><i class="fa fa-caret-right text-muted mt-1"></i>
+                        <ul class="s-nav list-unstyled">
+                            <li class="d-flex"><a href="#"><span class="title text-truncate"><i class="fa fa-sticky-note-o"></i> 土建1</span></a></li>
+                            <li class="d-flex"><a href="#"><span class="title text-truncate"><i class="fa fa-sticky-note-o"></i> 土建2</span></a></li>
+                            <li class="d-flex"><a href="#"><span class="title text-truncate"><i class="fa fa-sticky-note-o"></i> 土建3</span></a></li>
+                        </ul>
+                    </li>
+                    <li class="d-flex justify-content-between"><span class="title text-truncate"><i class="fa fa-cube"></i> 单项工程2</span></li>
+                    <li class="d-flex justify-content-between"><span class="title text-truncate"><i class="fa fa-cube"></i> 单项工程3</span><i class="fa fa-angle-right text-muted mt-1"></i></li>
+                    <li class="d-flex justify-content-between"><span class="title text-truncate"><i class="fa fa-cube"></i> 单项工程4</span><i class="fa fa-angle-right text-muted mt-1"></i></li>
+                    <li class="d-flex justify-content-between"><span class="title text-truncate"><i class="fa fa-cube"></i> 单项工程5</span></li>
+                </ul>
             </div>
             <div class="ml-auto navbar-text p-0">
               <ul class="nav navbar-nav">