Vertical Navigation bar on Zurb

Question

I was trying to make the left navigation bar as on this link:

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

这是导航栏的图像。

The navigation bar is responsive and all the contents on the right are also reponsive.

I am currently working on a project and require to make a navigation bar similar to this. I am good with HTML and CSS but not with JS, so making a navigation bar like this is not possible for me.

I need help to make this naviagtion bar. I dont want to use any css framework for this task.

A pen or a fiddle will be really helpful.

Edit:

Some developers asked me about my work, what I have done till now. Well here is the pen to what I came up with:

HTML CODE:

<!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 Code:

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

What I actually want to achieve are as follows:

When the navigation bar expands, it should expand only when we tap on it(I think we need to use JS mouse click event. I am not very good with JS.)
When the navigation bar expands all the contents on the right should responsively move on the right as it happens with the navigation bar on the url I have shared in the very begining.

These are the things I want to add to my pen.

Answer 1

Foundation 6 has really trimmed back and in the process improved a vast majority of their components. Before you would need to use a series of different components to get the menus you need, now it's just one highly flexible component.

However, you can use HTML & CSS to create it.Given below, i have used font-awesome for icons.

 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>

Update ::

I found this from codepen, an example of vertical navigation bar by using Zurb.

Vertical Navigation bar on Zurb

Question

1 answers

solution1
1 2016-03-06 12:55:26

Vertical Navigation bar on Zurb

Question

1 answers

solution1 1 2016-03-06 12:55:26

solution1
1 2016-03-06 12:55:26