Question

我想弄清楚当＃menu-icon被点击到toggleClass（'active'时，如何将@media查询中的“＃menu-icon .navigation”转换效果应用到我的移动导航中）并显示.navigation类（以及我的导航到具有此过渡效果的屏幕）任何想法在哪里是我的错误？

(function(){
	'use strict';

	$(document).ready(function(){
		var $toggleMenu = $('#menu-icon');
		
		$toggleMenu.on('click', function(){
			$('.navigation').toggleClass('active');
		});
	});

})();

body {
  background: #000;
}
.navigation ul { list-style: none; margin-left: 5px; }
.navigation ul li { display: inline-block; margin: 0 29px 0 0; }
.navigation ul li a { display: block; padding: 6px 0 8px 0; text-decoration: none; font-size: 15px; color: #e7d9bb; }
.navigation ul li a:hover { color: #a4987f; }

/* Mobile nav icon */ 
#menu-icon {
    width: 30px;
    height: 12px;
    display: none;
    position: relative;
    margin-top: 10px;
}

#menu-icon span,
#menu-icon span:before,
#menu-icon span:after { position: absolute; left: 0; height: 3px; background: #fff; width: 100%; border-radius: 2px; }
#menu-icon span:before { content: ''; top: 10px; }
#menu-icon span:after { content: ''; top: -10px; }

@media (max-width: 480) {
  .navigation { display: none; background: #5a9abe; position: absolute; top: 100%; width: 100%; max-width: 300px; padding: 0px 0 25px 0; opacity: 0; visibility: hidden; }
  #menu-icon .navigation { transition: opacity .3s ease, visibility 0s linear .3s; }
  #menu-icon .navigation { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s linear 0s; }
  #menu-icon { display: inline-block; position: absolute; top: 50px; left: 85%; z-index: 999999; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-nav">
  <a id="menu-icon" href="#"><span></span></a>
  <nav class="navigation active">
    <ul>
      <li><a href="#">Home Page</a></li>
      <li><a href="#">New Products</a></li>
      <li><a href="#">Specials</a></li>
      <li><a href="#">My Account</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav><!-- navigation -->
</div><!-- main-nav -->

Answer 1

删除实际HTML中的active类，并将CSS修改为以下内容：

body {
    background: #000;
}

.navigation ul {
    list-style: none;
    margin-left: 5px;
}

.navigation ul li {
    display: inline-block;
    margin: 0 29px 0 0;
}

.navigation ul li a {
    display: block;
    padding: 6px 0 8px 0;
    text-decoration: none;
    font-size: 15px;
    color: #e7d9bb;
}

.navigation ul li a:hover {
    color: #a4987f;
}
/* Mobile nav icon */

#menu-icon {
    width: 30px;
    height: 12px;
    display: none;
    position: relative;
    margin-top: 10px;
    z-index: 10;
}

#menu-icon span,
#menu-icon span:before,
#menu-icon span:after {
    position: absolute;
    left: 0;
    height: 3px;
    background: white;
    color: white;
    width: 100%;
    border-radius: 2px;
    z-index: 100;
}

#menu-icon span:before {
    content: '';
    top: 10px;
}

#menu-icon span:after {
    content: '';
    top: -10px;
}

@media (max-width: 480px) {

 .active { //need to add some sort of logic for active
        display: inline-block;
        opacity: 1 !important;
        color: white;
        top: 0% !important; //on active, navigation is in the screen
        transition-duration: 0.5s;
 }

 .navigation {
    background: #5a9abe;
    position: absolute;
    top: -100%; //navigation is originally hidden above the screen
    width: 100%;
    max-width: 300px;
    padding: 0px 0 25px 0;
    opacity: 0;
    transition-duration: 0.5s; //make sure the transition duration is only in the media query
 }

 .navigation ul li {
    width: 100%;
 }

 #menu-icon {
    display: inline-block;
    position: absolute;
    top: 50px;
    left: 85%;
    z-index: 999999;
 }

}

这是小提琴：https://jsfiddle.net/auaLqccv/

我没有真正通过并修改其他任何内容。我只是希望功能首先出现在那里。按照你认为合适的方式设计它。

toggleClass显示导航问题

1 个答案: