【发布时间】：2016-03-07 05:02:17
【问题描述】：
我试图在此链接上制作左侧导航栏：
http://zurb.com/building-blocks/off-canvas-sidebar-component
导航栏是响应式的，右侧的所有内容也是响应式的。
我目前正在做一个项目，需要制作一个与此类似的导航栏。我擅长 HTML 和 CSS，但不擅长 JS，所以制作这样的导航栏对我来说是不可能的。
我需要帮助来制作这个导航栏。我不想为此任务使用任何 CSS 框架。
一支笔或一把小提琴会很有帮助。
编辑：
一些开发人员问我关于我的工作，我到目前为止做了什么。好吧，这就是我想出的笔：
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不太好。）
当导航栏展开时，右侧的所有内容都应响应式向右移动，就像我一开始分享的网址上的导航栏一样。
这些是我想添加到我的笔的东西。
【问题讨论】：
标签： javascript html css zurb-foundation-5