个人中心
gpt4 book ai didi

javascript - Zurb 上的垂直导航栏

转载 作者：太空宇宙 更新时间：2023-11-04 10:40:50 34 4
gpt4 key购买 nike

我试图将左侧导航栏设为此链接:

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

This is the image of the navbar.

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

我目前正在做一个元素，需要做一个类似这样的导航栏。我擅长 HTML 和 CSS，但不擅长 JS，所以制作这样的导航栏对我来说是不可能的。

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

钢笔或 fiddle 会很有帮助。

编辑:

一些开发者询问我的工作，我到目前为止做了什么。好吧，这是我想到的笔:

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

我真正想要实现的是:

  1. navigation bar 展开的时候，应该只有在我们点击它的时候才会展开(我觉得需要用到JS的鼠标点击事件，我对JS不是很好。)

  2. 当导航栏展开时，右侧的所有内容都应该相应地向右移动，就像我在一开始分享的 url 上的导航栏一样。

这些是我想添加到笔中的东西。

最佳答案

Foundation 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 的垂直导航栏的例子。

关于javascript - Zurb 上的垂直导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35826322/

34 4 0
文章推荐： python - urllib2 下载 HTML 文件
文章推荐： c++ - 设置 QGroupBox 标题的对齐方式
文章推荐： html - 单击时如何使用 CSS 和/或 Angular 将 DIV 移动到中心？
文章推荐： linux - awk 字符串搜索并替换为附加的递增数字
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com