Zurb的垂直导航栏

时间：2016-03-06 11:29:08

标签： javascript html css zurb-foundation-5

我试图在此链接上创建左侧导航栏：

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

This is the image of the navbar.

导航栏是响应式的，右侧的所有内容也是反复的。

我目前正在开发一个项目，需要制作一个类似于此的导航栏。我很擅长HTML和CSS但不适合使用JS，所以制作这样的导航栏对我来说是不可能的。

我需要帮助来制作这个导航栏。我不想使用任何css框架来完成这项任务。

笔或小提琴将非常有用。

编辑：

一些开发人员问我关于我的工作，到目前为止我做了什么。那么这就是我想出的笔：

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代码：

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

我真正希望实现的目标如下：

  1. 当导航栏扩展时，只有在我们点击它时它才会展开（我认为我们需要使用JS鼠标点击事件。我对JS不是很好。）

  2. 当导航栏展开时，右边的所有内容应该响应地向右移动，因为它发生在我刚开始分享的网址上的导航栏。

    3. 这些是我想要添加到笔中的内容。

1 个答案:

答案 0 :(得分：1)

基础6 已经真正缩减，并且在此过程中改进了绝大多数组件。在您需要使用一系列不同的组件来获取所需的菜单之前，现在它只是一个高度灵活的组件。

但是，您可以使用HTML＆amp; CSS创建它。如下所示，我使用font-awesome作为图标。

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

更新::

我在codepen中找到this，这是使用Zurb的垂直导航栏示例。

相关问题
最新问题