Навигационный ящик для веб-приложения

Итак, я разрабатываю веб-приложение, и я ищу способ создания ящика для навигации (бутстрап или иначе), и у меня есть только одно требование от моего заинтересованного лица, которое, когда ящик обрушивается/закрыто Мне нужно, чтобы шрифт был удивительным значком, который все еще отображается. И затем, когда я открываю ящик, значки должны оставаться в одном месте, и текст рядом с каждым значком должен появляться, когда выдвижной ящик выкатывается.Навигационный ящик для веб-приложения

я смог найти только один пример этого онлайн, смотрите ссылку ниже:

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

Это похоже на то, что я ищу. Спасибо за помощь :) –

Навигационный ящик для веб-приложения

ответ

Смежные вопросы