堆栈内存溢出
  繁体   English   中英

响应式导航栏切换

[英]Responsive Nav bar toggle

 原文  2017-02-05 16:27:46  4   2    javascript/ jquery/ html/ css

问题描述

我是网页设计的相对新手，他一直在从事个人项目\\培训大约 4 个月以帮助我学习。

我对此越来越深入，并花了数周时间尝试使我已经完成的桌面网站具有响应性。 然而，我正在努力让我的“移动”切换栏正常工作，并且已经搜索和搜索但找不到我的问题的答案。 我尝试了不同的方法，但无济于事。

基本上就我目前所拥有的而言，汉堡包不断下降到菜单底部，而不是停留在导航栏中。 如果我将其设置为绝对，这似乎解决了这个问题，那么我无法在导航栏中正确定位它。

此外，我也一直试图让汉堡包从左侧滑入并填充约 70% 的屏幕，让汉堡包向右滑动，再次无济于事。 无论哪种方法似乎都行不通，我所能得到的只是一个下拉列表。 我怀疑我搞砸的代码发生了一些我不明白的事情。 作为一个新手，我一直在尝试将我所读到的内容作为最佳实践，并意识到我的一些代码可能冗长乏味，并且有点不合时宜，因此非常感谢有关如何清理它的任何提示。

我一直试图实现的一般想法是： http : //www.ymc.ch/sandbox/hamburger/mobile-menu-demo.html

我已将代码剥离回基础，因为我尝试的任何内容都不起作用，这是一个 JSFiddle https://jsfiddle.net/pr3tr3y2/4/

HTML：

<div id="container">
<div class="nav">
<div class ="navWrapper">
<nav role="navigation" class="menu">
    <ul class="active">
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a></li>
        <li>
        <a href="MainPage.aspx">Menu 3</a>
            <ul class="submenu">
                <li><a href="#">Sub 1</a></li>
                <li><a href="#">Sub 2</a></li>
            </ul>
        </li>  
        <li>
        <a href="#">Menu 4</a>   
            <ul class="submenu">
                <li><a href="#">Sub 3</a></li>
                <li><a href="#">Sub 4</a></li>
            </ul>
        </li>
    </ul>
    <div class="hamburgerWrapper">
          <div class="toggle-nav"><a href="#">Menu</a></div>
    </div>
</nav>
</div>
</div>
</div> 

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script src="../Javascript/JavaScript.js"></script>

CSS：

@import url(UndoHTML.css);

#container
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    width: 100%;
        text-align:center;
}

/*For mobile phones*/
/*NAVIGATION MENUS*/
.nav
{
    background-color: black;
}

.navWrapper
{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    flex-direction: column;
    flex-grow: 1;
    /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12);*/
}

/*HORIZONTAL MENU*/
.menu
{
    flex-grow: 1;
}

.menu ul
{
    list-style: none;
}

.menu ul.active 
{
    display:none;
}

.menu ul li
{
    position: relative;
    font-weight: bold;
    border-bottom: 1px solid #b3c4e6;
}

.menu ul li a
{
    text-align: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    display:block;
    color: #fff;
    padding:16px 16px 12px 16px;
    border-bottom:5px solid transparent;
}

.menu ul li a:hover
{
    background-color: red;
    border-bottom: 5px solid #7EF300;
    color: #FFDB00;
}

/*HAMBURGER*/
.hamburgerWrapper
{
    display: flex;
    flex-grow: 1;
    justify-content:flex-start;
    padding: 10px;
}

.toggle-nav
{
    background: linear-gradient(
        to bottom, 
        #FFF 0%, #FFF 20%, 
        transparent 20%, transparent 40%, 
        #FFF 40%, #FFF 60%, 
        transparent 60%, transparent 80%, 
        #FFF 80%, #FFF 100%);
    cursor: pointer;
    height: 24px;
    transition: opacity .5s ease;
    width: 32px;
    color: white;
    display: inline-block;
}

.toggle-nav a
{
    display:inline-block;
    color:#fff;
    font-weight: bold;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 60px;
    padding-right: 10px;
}

/*Sub Menu*/
.menu ul li:hover ul 
{
    display: none;
}

.submenu
{
    display:none;
    position:absolute;
    background-color: black;
    white-space: nowrap;
    width: 100%;
    list-style-type: none;
}

.submenu > li > a
{
    text-align: left;
    /*border-top: 1px solid rgba(255, 255, 255, 0.3);*/
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    display:block;
    color: #fff;
    padding:7px 16px 5px 16px;
    border-bottom:5px solid transparent; /*To offset white underline hover*/
}

.submenu > li:hover > a
{
  background-color:red;
  color: #FFDB00;
  border-bottom: 5px solid #7EF300;
}

#contentLayer 
{
    display: none;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 30%;
    z-index: 5;
}

/*Medium Screens*/
 @media all and (min-width: 600px) and (max-width: 999px)
{
    .toggle-nav 
    {
    display:none;
    }

    .hamburgerWrapper
    {
    display: none;
    }

    .navWrapper
    {
    justify-content: center;
    width:100%;
    margin:auto;
    }

    .menu
    {
    flex-grow: 1;
    width: 100%;
    }

    .menu ul.active 
    {
    display:flex;
    width: 100%;
    flex-direction: row;
        flex-wrap: wrap;
    }

    .menu ul li
    {
    border-bottom: none;
    }

    .menu ul li:last-of-type
    {
        margin:0;
    }

    .menu ul li:hover ul 
    {
        display: block;
    }
}

/*Large Screens*/
@media all and (min-width: 1000px)
{
    .navWrapper
    {
    max-width: 1366px;
    width:100%;
    margin:auto;
    }

    .toggle-nav 
    {
    display:none;
    }

    .hamburgerWrapper
    {
    display: none;
    }

    .menu
    {
    flex-grow: 1;
    width: 100%;
    }

    .menu ul.active 
    {
    display:flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    }

    .menu ul li
    {
    border-bottom: none;
    white-space: nowrap;
    }

    .menu ul li:hover ul 
    {
    display: block;
    }
}

查询：

  jQuery(document).ready(function() {
      jQuery('.toggle-nav').click(function(e) {
          jQuery(this).toggleClass('active');
          jQuery('.menu ul').toggleClass('active');

          e.preventDefault();
      });
  });

2 个解决方案

解决方案1
 0  2017-02-05 16:56:27

Damo，你的代码正在运行，你只有这段 HTML：

<div class="hamburgerWrapper">
      <div class="toggle-nav"><a href="#">Menu</a></div>
</div>

在页面的底部。 将它移到顶部，如下所示：

<div id="container">
<div class="nav">
<div class ="navWrapper">
<nav role="navigation" class="menu">
    <div class="hamburgerWrapper">
       <div class="toggle-nav"><a href="#">Menu</a></div>
    </div>
    <ul class="active">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li>
    <a href="MainPage.aspx">Menu 3</a>
        <ul class="submenu">
            <li><a href="#">Sub 1</a></li>
            <li><a href="#">Sub 2</a></li>
        </ul>
    </li>  
    <li>
    <a href="#">Menu 4</a>   
        <ul class="submenu">
            <li><a href="#">Sub 3</a></li>
            <li><a href="#">Sub 4</a></li>
        </ul>
    </li>
</ul>
</nav>
</div>
</div>
</div>

那么它应该工作。 祝你好运！

解决方案2
 0 已采纳  2017-02-05 17:17:53

我能够使用 CSS 为您的菜单设置动画。 导航在移动设备上滑动，并且.active类是在单击按钮时添加的，而不是在 DOM 加载时添加。 

 jQuery(document).ready(function() { jQuery('.toggle-nav').click(function(e) { jQuery(this).toggleClass('active'); jQuery('.menu ul').toggleClass('active'); jQuery('.menu').toggleClass('active'); e.preventDefault(); }); });
 @import url(UndoHTML.css); //[TO] new code #container { display: flex; flex-direction: column; justify-content: center; align-items: stretch; width: 100%; text-align: center; } /*For mobile phones*/ /*NAVIGATION MENUS*/ .nav { background-color: black; } .navWrapper { display: flex; justify-content: flex-start; flex-wrap: wrap; flex-direction: column; flex-grow: 1; } .hamburgerWrapper{ left: 0; position: absolute; transition: all 1s ease; background:#000; width: 100%; } .active .hamburgerWrapper{ left: 200px; transition: all 1s ease; } /*HORIZONTAL MENU*/ .menu { flex-grow: 1; } .menu ul { list-style: none; position: fixed; left: -70%; transition: all 1s ease; background:#000; top:0; } .menu ul.active { left: 0; transition: all 1s ease; } .menu ul li { position: relative; font-weight: bold; border-bottom: 1px solid #b3c4e6; } .menu ul li a { text-align: center; border-bottom: 1px solid rgba(0, 0, 0, 0.1); display: block; color: #fff; padding: 16px 16px 12px 16px; border-bottom: 5px solid transparent; } .menu ul li a:hover { background-color: red; border-bottom: 5px solid #7EF300; color: #FFDB00; } /*HAMBURGER*/ .hamburgerWrapper { display: flex; flex-grow: 1; justify-content: flex-start; padding: 10px; } .toggle-nav { background: linear-gradient( to bottom, #FFF 0%, #FFF 20%, transparent 20%, transparent 40%, #FFF 40%, #FFF 60%, transparent 60%, transparent 80%, #FFF 80%, #FFF 100%); cursor: pointer; height: 24px; transition: opacity .5s ease; width: 32px; color: white; display: inline-block; } .toggle-nav a { display: inline-block; color: #fff; font-weight: bold; padding-top: 2px; padding-bottom: 2px; padding-left: 60px; padding-right: 10px; } /*Sub Menu*/ .menu ul li:hover ul { display: none; } .submenu { display: none; position: absolute; background-color: black; white-space: nowrap; width: 100%; list-style-type: none; } .submenu > li > a { text-align: left; /*border-top: 1px solid rgba(255, 255, 255, 0.3);*/ border-bottom: 1px solid rgba(0, 0, 0, 0.1); display: block; color: #fff; padding: 7px 16px 5px 16px; border-bottom: 5px solid transparent; /*To offset white underline hover*/ } .submenu > li:hover > a { background-color: red; color: #FFDB00; border-bottom: 5px solid #7EF300; } #contentLayer { display: none; height: 100%; overflow-x: hidden; overflow-y: auto; position: absolute; right: 0; top: 0; width: 30%; z-index: 5; } /*Medium Screens*/ @media all and (min-width: 600px) and (max-width: 999px) { .toggle-nav { display: none; } .hamburgerWrapper { display: none; } .navWrapper { justify-content: center; width: 100%; margin: auto; } .menu { flex-grow: 1; width: 100%; } .menu ul.active { display: flex; width: 100%; flex-direction: row; flex-wrap: wrap; } .menu ul li { border-bottom: none; } .menu ul li:last-of-type { margin: 0; } .menu ul li:hover ul { display: block; } } /*Large Screens*/ @media all and (min-width: 1000px) { .navWrapper { max-width: 1366px; width: 100%; margin: auto; } .toggle-nav { display: none; } .hamburgerWrapper { display: none; } .menu { flex-grow: 1; width: 100%; } .menu ul.active { display: flex; width: 100%; flex-direction: row; flex-wrap: wrap; } .menu ul li { border-bottom: none; white-space: nowrap; } .menu ul li:hover ul { display: block; } }
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div class="nav"> <div class="navWrapper"> <nav role="navigation" class="menu"> <ul class="nav-list"> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li> <a href="MainPage.aspx">Menu 3</a> <ul class="submenu"> <li><a href="#">Sub 1</a></li> <li><a href="#">Sub 2</a></li> </ul> </li> <li> <a href="#">Menu 4</a> <ul class="submenu"> <li><a href="#">Sub 3</a></li> <li><a href="#">Sub 4</a></li> </ul> </li> </ul> <div class="hamburgerWrapper"> <div class="toggle-nav"><a href="#">Menu</a></div> </div> </nav> </div> </div> </div>

暂无
暂无

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

相关问题 无法切换响应式导航栏的列表项 响应式导航切换不起作用 响应式和粘性导航栏 导航栏切换JavaScript Bootstrap Responsive Nav Bar 单击时切换导航栏 如何切换导航栏可见性？ 在导航栏上切换不透明度动画 为什么我的自适应导航无法切换课程？ 导航栏切换按钮 - 不会下拉
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM