堆栈内存溢出
  简体   繁体   English

Zurb上的垂直导航栏

[英]Vertical Navigation bar on Zurb

 原文  2016-03-06 11:29:08  1   1    javascript/ html/ css/ zurb-foundation-5

问题描述

I was trying to make the left navigation bar as on this link: 我正在尝试使左侧导航栏与该链接相同：

http://zurb.com/building-blocks/off-canvas-sidebar-component 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. 我擅长HTML和CSS，但不擅长JS，因此对我来说，制作这样的导航栏是不可能的。

I need help to make this naviagtion bar. 我需要帮助来制作此导航栏。 I dont want to use any css framework for this task. 我不想为此任务使用任何CSS框架。

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: 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 Code: 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 http://codepen.io/Prateek_Coder/pen/VaeLqp

What I actually want to achieve are as follows: 我实际上想要实现的目标如下：

  1. 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.) 当导航栏展开时，它仅应在单击时才展开（我认为我们需要使用JS鼠标单击事件。我对JS不太满意。）

  2. 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. 当导航栏展开时，右侧的所有内容都应响应性地向右移动，就像刚开始我共享的url上的导航栏一样。

These are the things I want to add to my pen. 这些就是我要添加到笔中的东西。

1 个解决方案

解决方案1
 1  2016-03-06 12:55:26

Foundation 6 has really trimmed back and in the process improved a vast majority of their components. Foundation 6确实进行了缩减，并且在此过程中改善了其大部分组件。 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. 但是，您可以使用HTML和CSS来创建它。鉴于下面，我对图标使用了真棒字体 。 

 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. 我是从Codepen中找到的， 这是使用Zurb的垂直导航栏示例。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 垂直导航栏移至顶部 - A Vertical Navigation Bar Moving to The Top Zurb Foundation顶部栏和jQuery-检查移动导航是否处于活动状态 - Zurb Foundation Top Bar & jQuery - check if mobile navigation is active 具有垂直下拉CSS的Bootstrap水平导航栏 - Bootstrap horizontal navigation bar with vertical dropdown CSS 垂直导航栏-Onclick功能不起作用 - Vertical navigation bar - Onclick function not working 使用 javascript 创建垂直响应式导航栏 - Creating a vertical responsive navigation bar using javascript 基金会zurb导航栏 - Foundation zurb nav bar 有关JavaScript和垂直多级导航栏的问题 - Questions about JavaScript and a vertical, multi-level navigation bar 水平滚动条页面导航和垂直滚动条 - Horizontal scroll bar page navigation with vertical scroll bars 如何在垂直导航栏右侧显示标签内容？ - How to show tab content on the right side of the vertical navigation bar? 在自定义div下拉列表中在键盘导航上移动垂直滚动条 - Moving vertical scroll bar on keyboard navigation in custom div dropdown
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM