Question

请参阅此codepen以获取我所谈论的http://codepen.io/MarkRBM/pen/auDvp

的示例

我有一个nav .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");
        });

Answer 1

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垂直切换菜单

1 个答案: