来回切换菜单垂直与jQuery

问题描述：

请参见本codepen对我所说的例子约http://codepen.io/MarkRBM/pen/auDvp 来回切换菜单垂直与jQuery

我有一个包含一系列的环节（不是列表，如果它能够更好不知道一个导航.mainnav对它们进行一个列表或不）。点击.mainnav的显示被切换，并且链接显示为div并再次关闭导航。

问题1：divs动画来自左侧，因此它们从左侧滑入，但我希望它们从您单击的div上滑下来以使它们出现。

问题2：我希望链接能够一个接一个快速显示，但显然是一个接一个。

下面是代码

的Html

<div class="navtoggle">Menu</div> 
        <div class="navtoggleclose">X</div> 
        <nav class="mainnav"> 
         <a href=""><div class="navbutton">Home</div></a> 
         <a href=""><div class="navbutton">About</div></a> 
         <a href=""><div class="navbutton">Locations</div></a> 
         <a href=""><div class="navbutton">Prices</div></a> 
         <a href=""><div class="navbutton">Book</div></a> 
         <a href=""><div class="navbutton">Private</div></a> 
         <a href=""><div class="navbutton">Affiliates</div></a> 
         <a href=""><div class="navbutton">Shop</div></a> 
        </nav>

CSS

.navtoggle{ 
    display: block; 
    visibility: visible; 
    text-align: center; 
    } 
    .navtoggleclose{ 
    display: none; 
    visibility: visible; 
    text-align: center; 
    } 
.mainnav{ 
    display: none; 

} 


.navbutton{ 
    display: none; 
    text-align: center; 
    width: 50%; 
    margin-right: auto; 
    margin-left: auto; 
    background: $rgradl; 
    border-radius: 5%; 
    margin-top: 0.4em; 
    box-shadow: $dshadow; 
}

jQuery的

$(".navtoggle").click(function() { 
      $(".mainnav").toggle("slow"); 
      $(".navtoggle").toggle("slow"); 
      $(".navtoggleclose").toggle("slow"); 
      $(".navbutton").toggle("slow"); 
     }); 

     $(".navtoggleclose").click(function(){ 
      $(".mainnav").toggle("slow"); 
      $(".navtoggle").toggle("slow"); 
      $(".navbutton").toggle("slow"); 
      $(".navtoggleclose").toggle("slow"); 
     });

为了解决第一个问题，你可以将用户.slideToggle（ “慢”） –

答

的slideToggle和更改代码下面已经接近给我的影响足够到我想要的。谢谢。

HTML

<div class="navtoggle">Menu</div> 
         <a href=""><nav class="navbutton">Home</nav></a> 
         <a href=""><nav class="navbutton">About</nav></a> 
         <a href=""><nav class="navbutton">Locations</nav></a> 
         <a href=""><nav class="navbutton">Prices</nav></a> 
         <a href=""><nav class="navbutton">Book</nav></a> 
         <a href=""><nav class="navbutton">Private</nav></a> 
         <a href=""><nav class="navbutton">Affiliates</nav></a> 
         <a href=""><nav class="navbutton">Shop</nav></a>

CSS

.navtoggle{ 
    display: none; 
    visibility: hidden; 
    } 

    .navbutton{ 
    display: none; 
    text-align: center; 
    width: 50%; 
    margin-right: auto; 
    margin-left: auto; 
    background: $rgradl; 
    border-radius: 5%; 
    margin-top: 0.4em; 
    box-shadow: $dshadow; 
}

jQuery的

$(".navtoggle").click(function() { 
      $(".navbutton").slideToggle("slow"); 
      $(".navtoggleclose").slideToggle("slow"); 
     });

来回切换菜单垂直与jQuery

相关推荐