Web應用程序的導航抽屜

因此，我正在開發一個Web應用程序，我正在尋找一種方法來創建導航抽屜（bootstrap或其他），並且我只有一個來自我的利益相關者的要求，即當抽屜摺疊/關閉我需要字體真棒圖標仍然顯示。然後，當我打開抽屜時，圖標應該保持在同一個地方，並且每個圖標旁邊的文本應該在抽屜展開時出現。Web應用程序的導航抽屜

我只能找到這個網上的一個例子，請參考以下鏈接：

https://jhipster.github.io/

希望你能有所幫助。謝謝:)

編輯：有沒有人知道任何資源/插件/方式，我可以用來實現這一目標？

來源

2016-11-30 Manus Gallagher

你能詞組這是一個問題嗎？ –

完成。見上面 –

也許這個例子可能是一個很好的指導，它似乎符合上面列出的要求。

https://codepen.io/JFarrow/pen/fFrpg

HTML：

</head> 
    <body><div class="area"></div><nav class="main-menu"> 
     <ul> 
      <li> 
       <a href="#"> 
        <i class="fa fa-home fa-2x"></i> 
        <span class="nav-text"> 
         Dashboard 
        </span> 
       </a> 

      </li> 
      <li class="has-subnav"> 
       <a href="#"> 
        <i class="fa fa-laptop fa-2x"></i> 
        <span class="nav-text"> 
         UI Components 
        </span> 
       </a> 

      </li> 
      <li class="has-subnav"> 
       <a href="#"> 
        <i class="fa fa-list fa-2x"></i> 
        <span class="nav-text"> 
         Forms 
        </span> 
       </a> 

      </li> 
      <li class="has-subnav"> 
       <a href="#"> 
        <i class="fa fa-folder-open fa-2x"></i> 
        <span class="nav-text"> 
         Pages 
        </span> 
       </a> 

      </li> 
      <li> 
       <a href="#"> 
        <i class="fa fa-bar-chart-o fa-2x"></i> 
        <span class="nav-text"> 
         Graphs and Statistics 
        </span> 
       </a> 
      </li> 
      <li> 
       <a href="#"> 
        <i class="fa fa-font fa-2x"></i> 
        <span class="nav-text"> 
         Typography and Icons 
        </span> 
       </a> 
      </li> 
      <li> 
       <a href="#"> 
        <i class="fa fa-table fa-2x"></i> 
        <span class="nav-text"> 
         Tables 
        </span> 
       </a> 
      </li> 
      <li> 
       <a href="#"> 
        <i class="fa fa-map-marker fa-2x"></i> 
        <span class="nav-text"> 
         Maps 
        </span> 
       </a> 
      </li> 
      <li> 
       <a href="#"> 
        <i class="fa fa-info fa-2x"></i> 
        <span class="nav-text"> 
         Documentation 
        </span> 
       </a> 
      </li> 
     </ul> 

     <ul class="logout"> 
      <li> 
       <a href="#"> 
        <i class="fa fa-power-off fa-2x"></i> 
        <span class="nav-text"> 
         Logout 
        </span> 
       </a> 
      </li> 
     </ul> 
    </nav>

CSS：

@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css); 
} 
@import url(http://fonts.googleapis.com/css?family=Titillium+Web:300); 
.fa-2x { 
font-size: 2em; 
} 
.fa { 
position: relative; 
display: table-cell; 
width: 60px; 
height: 36px; 
text-align: center; 
vertical-align: middle; 
font-size:20px; 
} 


.main-menu:hover,nav.main-menu.expanded { 
width:250px; 
overflow:visible; 
} 

.main-menu { 
background:#fbfbfb; 
border-right:1px solid #e5e5e5; 
position:absolute; 
top:0; 
bottom:0; 
height:100%; 
left:0; 
width:60px; 
overflow:hidden; 
-webkit-transition:width .05s linear; 
transition:width .05s linear; 
-webkit-transform:translateZ(0) scale(1,1); 
z-index:1000; 
} 

.main-menu>ul { 
margin:7px 0; 
} 

.main-menu li { 
position:relative; 
display:block; 
width:250px; 
} 

.main-menu li>a { 
position:relative; 
display:table; 
border-collapse:collapse; 
border-spacing:0; 
color:#999; 
font-family: arial; 
font-size: 14px; 
text-decoration:none; 
-webkit-transform:translateZ(0) scale(1,1); 
-webkit-transition:all .1s linear; 
transition:all .1s linear; 

} 

.main-menu .nav-icon { 
position:relative; 
display:table-cell; 
width:60px; 
height:36px; 
text-align:center; 
vertical-align:middle; 
font-size:18px; 
} 

.main-menu .nav-text { 
position:relative; 
display:table-cell; 
vertical-align:middle; 
width:190px; 
    font-family: 'Titillium Web', sans-serif; 
} 

.main-menu>ul.logout { 
position:absolute; 
left:0; 
bottom:0; 
} 

.no-touch .scrollable.hover { 
overflow-y:hidden; 
} 

.no-touch .scrollable.hover:hover { 
overflow-y:auto; 
overflow:visible; 
} 

a:hover,a:focus { 
text-decoration:none; 
} 

nav { 
-webkit-user-select:none; 
-moz-user-select:none; 
-ms-user-select:none; 
-o-user-select:none; 
user-select:none; 
} 

nav ul,nav li { 
outline:0; 
margin:0; 
padding:0; 
} 
.main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a { 
color:#fff; 
background-color:#5fa2db; 
} 
.area { 
float: left; 
background: #e2e2e2; 
width: 100%; 
height: 100%; 
} 
@font-face { 
    font-family: 'Titillium Web'; 
    font-style: normal; 
    font-weight: 300; 
    src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff'); 
}

來源

2016-11-30 18:22:50 mrneeson

這似乎正是我正在尋找的。謝謝您的幫助：） –

Web應用程序的導航抽屜

回答

相關問題