Вертикальная панель навигации на Zurb

Я пытался сделать левую панель навигации, как по этой ссылке:Вертикальная панель навигации на Zurb

http://zurb.com/building-blocks/off-canvas-sidebar-component

This is the image of the navbar.

Навигационная панель реагирует и все содержимое на право также является верным.

В настоящее время я работаю над проектом и требую сделать навигационную панель, подобную этой. Я хорошо разбираюсь в HTML и CSS, но не с JS, поэтому создание такой панели навигации для меня не представляется возможным.

Мне нужна помощь, чтобы сделать эту навигационную панель. Я не хочу использовать фреймворк css для этой задачи.

Ручка или скрипка будут действительно полезны.

Edit:

Некоторые разработчики спрашивали меня о моей работе, что я сделал до сих пор. Ну вот перо к тому, что я придумал:

HTML КОД:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"/> 
<meta http-equiv="X-UA-Compatible" content=="IE=edge"/> 
<meta name="google" value="notranslate"/> 
<title>Navigation Bar</title> 

<link rel="stylesheet" type="text/css" href="styles.css"> 
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> 
</head> 

<body> 
<!--Left Navigation Bar--> 
<nav class="main-menu"> 
    <div class="scrollbar" id="style-1"> 
     <ul> 
      <li> 
       <a href="#"> 
       <i class="fa fa-home fa-lg"></i> 
       <span class="nav-text">LIBRARY</span> 
       </a> 
      </li> 

      <li> 
       <a href="#"> 
        <i class="fa fa-user fa-lg"></i> 
        <span class="nav-text">PATTERN TAP</span> 
       </a> 
      </li> 

      <li> 
       <a href="http://startific.com"> 
        <i class="fa fa-envelope-o fa-lg"></i> 
        <span class="nav-text">BUILDING BLOCKS</span> 
       </a> 
      </li> 
      <li> 
       <a href="http://startific.com"> 
        <i class="fa fa-question-circle fa-lg"></i> 
        <span class="nav-text">RESPONSIVE</span> 
       </a> 
      </li> 
      <li> 
       <a href="http://startific.com"> 
        <i class="fa fa-question-circle fa-lg"></i> 
        <span class="nav-text">TRIGGERS</span> 
       </a> 
      </li> 
      <li> 
       <a href="http://startific.com"> 
        <i class="fa fa-question-circle fa-lg"></i> 
        <span class="nav-text">QUIPS</span> 
       </a> 
      </li> 
      <li> 
       <a href="http://startific.com"> 
        <i class="fa fa-question-circle fa-lg"></i> 
        <span class="nav-text">WORDS</span> 
       </a> 
      </li> 
      <li> 
       <a href="http://startific.com"> 
        <i class="fa fa-question-circle fa-lg"></i> 
        <span class="nav-text">FRIDAY 15</span> 
       </a> 
      </li> 
     </ul> 
    </nav> <!-- /. Navigation Bar --> 

</body> 
</html>

CSS код:

body 
{ 
    margin:0px; 
    padding:0px; 
    font-family: "Open Sans", arial; 
} 


@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); 

/* ScrolBar */ 
.scrollbar 
{ 
    height: 90%; 
    width: 100%; 
    overflow-y: hidden; 
    overflow-x: hidden; 
} 

.scrollbar:hover 
{ 
    height: 90%; 
    width: 100%; 
    overflow-y: scroll; 
    overflow-x: hidden; 
} 

/* Scrollbar Style */ 

#style-1::-webkit-scrollbar-track 
{ 
    border-radius: 2px; 
} 

#style-1::-webkit-scrollbar 
{ 
    width: 5px; 
    background-color: #F7F7F7; 
} 

#style-1::-webkit-scrollbar-thumb 
{ 
    border-radius: 10px; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); 
    background-color: #BFBFBF; 
} 
/* Scrollbar End */ 

.fa-lg { 
    font-size: 1em; 
} 
.fa { 
    position: relative; 
    display: table-cell; 
    width: 55px; 
    height: 36px; 
    text-align: center; 
    top:12px; 
    font-size:20px; 
} 

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

.main-menu { 
    background:#F7F7F7; 
    position:absolute; 
    top:0; 
    bottom:0; 
    height:100%; 
    left:0; 
    width:55px; 
    overflow:hidden; 
    -webkit-transition:width .2s linear; 
    transition:width .2s linear; 
    -webkit-transform:translateZ(0) scale(1,1); 
    box-shadow: 1px 0 15px rgba(0, 0, 0, 0.07); 
    opacity:1; 
} 

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

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

.main-menu li>a { 
    position:relative; 
    width:255px; 
    display:table; 
    border-collapse:collapse; 
    border-spacing:0; 
    color:#8a8a8a; 
    font-size: 13px; 
    text-decoration:none; 
    -webkit-transform:translateZ(0) scale(1,1); 
    -webkit-transition:all .14s linear; 
    transition:all .14s linear; 
    font-family: 'Strait', sans-serif; 
    border-top:1px solid #f2f2f2; 
    text-shadow: 1px 1px 1px #fff; 
} 

.main-menu .nav-icon { 
    position:relative; 
    display:table-cell; 
    width:55px; 
    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; 
} 

/* Logo Hover Property */ 


.settings:hover, settings:focus { 
    -webkit-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0; 
    -moz-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0; 
    -o-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0; 
    transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0; 
} 

.settings:active, settings:focus { 
    -webkit-transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0; 
    -moz-transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0; 
    -o-transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0; 
    transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0; 
} 


a:hover,a:focus { 
    text-decoration:none; 
    border-left:0px solid #F7F7F7; 
} 

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; 
    text-transform: uppercase; 
} 


.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: #8FA880 ; 
    text-shadow: 0px 0px 0px; 
} 
.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'); 
}

http://codepen.io/Prateek_Coder/pen/VaeLqp

То, что я на самом деле хочу добиться в следующем :

Когда панель навигации расширяется, она должна расширяться только тогда, когда мы нажимаем на нее (я думаю, нам нужно использовать JS-событие мыши. Я не очень хорошо разбираюсь в JS.)
Когда панель навигации расширяет все содержимое справа, она должна реагировать справа, как это происходит с навигационной панелью на URL, который я поделил в самом начале.

Это то, что я хочу добавить в мое перо.

источник

2016-03-06 Prateek Coder

Фонд 6 действительно обрезал назад и в процессе улучшил подавляющее большинство своих компонентов. Прежде чем вам понадобится использовать несколько различных компонентов, чтобы получить нужные вам меню, теперь это всего лишь один очень гибкий компонент.

Однако, вы можете использовать HTML & CSS, чтобы создать его. Ниже я использовал font-awesome для значков.

ul { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    list-style-type: none; 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
} 
 
.var_nav { 
 
    position: relative; 
 
    background: #ccc; 
 
    width: 100px; 
 
    height: 70px; 
 
    margin-bottom: 5px; 
 
} 
 
.link_bg { 
 
    width: 70px; 
 
    height: 70px; 
 
    position: absolute; 
 
    background: #008000; 
 
    color: #fff; 
 
    z-index: 2; 
 
} 
 
.link_bg i { 
 
    position: relative; 
 
} 
 
.link_title { 
 
    position: absolute; 
 
    width: 100%; 
 
    z-index: 3; 
 
    color: #fff; 
 
} 
 
.link_title:hover .icon { 
 
    -webkit-transform: rotate(360deg); 
 
    -moz-transform: rotate(360deg); 
 
    -o-transform: rotate(360deg); 
 
    -ms-transform: rotate(360deg); 
 
    transform: rotate(360deg); 
 
} 
 
.var_nav:hover .link_bg { 
 
    width: 100%; 
 
    background: #008000; 
 
    -webkit-transition: all 0.3s ease-in-out; 
 
    -moz-transition: all 0.3s ease-in-out; 
 
    -o-transition: all 0.3s ease-in-out; 
 
    -ms-transition: all 0.3s ease-in-out; 
 
    transition: all 0.3s ease-in-out; 
 
} 
 
.var_nav:hover a { 
 
    font-weight: bold; 
 
    -webkit-transition: all .5s ease-in-out; 
 
    -moz-transition: all .5s ease-in-out; 
 
    -o-transition: all .5s ease-in-out; 
 
    -ms-transition: all .5s ease-in-out; 
 
    transition: all .5s ease-in-out; 
 
} 
 
.icon { 
 
    position: relative; 
 
    width: 70px; 
 
    height: 70px; 
 
    text-align: center; 
 
    color: #fff; 
 
    -webkit-transition: all .5s ease-in-out; 
 
    -moz-transition: all .5s ease-in-out; 
 
    -o-transition: all .5s ease-in-out; 
 
    -ms-transition: all .5s ease-in-out; 
 
    float: left; 
 
    transition: all .5s ease-in-out; 
 
    float: left; 
 
} 
 
.icon i { 
 
    top: 22px; 
 
    position: relative; 
 
} 
 
a { 
 
    display: block; 
 
    position: absolute; 
 
    float: left; 
 
    font-family: arial; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    width: 100%; 
 
    height: 70px; 
 
    text-align: center; 
 
} 
 
span { 
 
    margin-top: 25px; 
 
    display: block; 
 
}

<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" /> 
 

 

 
<nav> 
 
    <UL> 
 
    <li class="var_nav"> 
 
     <div class="link_bg"></div> 
 
     <div class="link_title"> 
 
     <div class=icon> 
 
      <i class="icon-home icon-2x"></i> 
 

 
    </li> 
 
    <li class="var_nav"> 
 
     <div class="link_bg"></div> 
 
     <div class="link_title"> 
 
     <div class=icon> 
 
      <i class="icon-envelope icon-2x"></i> 
 

 
    </li> 
 
    <li class="var_nav"> 
 
     <div class="link_bg"></div> 
 
     <div class="link_title"> 
 
     <div class=icon> 
 
      <i class="icon-wrench icon-2x"></i> 
 

 
    </li> 
 
    <li class="var_nav"> 
 
     <div class="link_bg"></div> 
 
     <div class="link_title"> 
 
     <div class=icon> 
 
      <i class="icon-cloud-upload icon-2x"></i> 
 

 
    </li> 
 
    </UL> 
 
</nav>

Обновление ::

Я нашел this от codepen, пример вертикальной панели навигации с помощью Zurb.

источник

2016-03-06 12:55:26

Благодарим вас за ответ, его хорошее меню, которое вы создали с помощью html и css, но я могу сам это сделать. Дело в том, что я хочу меню точно так же, как ссылка, о которой я упоминал в своем вопросе, или что-то очень похожее, и я не хочу использовать какую-либо фреймворк, ни бутстрап, ни основание, и т. Д., Просто чистые html, css и JS (которые я не очень хорошо сейчас). –

Я не собирался мочиться. Дело в том, что я устал, но я не смог придумать то, что хочу, поэтому я ищу помощь здесь. –

Вертикальная панель навигации на Zurb

ответ

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