响应导航栏切换

时间：2017-02-05 16:27:46

标签： javascript jquery html css

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

我已经深入研究了这个问题，并花了数周时间尝试制作我已做过响应的桌面网站。然而，我正在努力让我的移动＆＃39;切换栏按预期工作并搜索和搜索，但无法找到问题的答案。我尝试了不同的方法但无济于事。

基本上我现在所拥有的东西一直在菜单底部而不是留在导航栏中。如果我把它设置为绝对，这似乎解决了这个问题，那么我无法在导航栏中正确定位。

此外，我也一直试图让汉堡从左边滑入并填充大约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：

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

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

2 个答案:

答案 0 :(得分：0)

达莫， 你的代码正在使用你只需要这段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>

然后它应该工作。 祝你好运！

答案 1 :(得分：0)

我能够使用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>

相关问题
最新问题