1

Please see this codepen for an example of what I am talking about http://codepen.io/MarkRBM/pen/auDvp

I have a nav .mainnav containing a series of links (not a list not sure if its better for them to be a list or not). onclick the display of .mainnav is toggled and the links appear aswell as a div to close the nav again.

Issue1: The divs animation comes from the left so they slide in from the left but I would like them to slide down from the div you click to make them appear.

Issue2: I would like the links to appear one by one quickly but obviously one by one.

Here is the code

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");
        });
4

1 回答 1

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");
        });
于 2013-07-21T12:26:25.800 回答