javascript - jqueryでメニューを縦に切り替える

Question

私が話していることの例については、このコードペンを参照してください http://codepen.io/MarkRBM/pen/auDvp

一連のリンクを含む nav .mainnav があります(リストである方が良いかどうかわからないリストではありません)。onclick .mainnav の表示が切り替えられ、リンクが表示され、ナビゲーションを再び閉じるための div が表示されます。

問題 1: div アニメーションは左から来るので、左からスライドしますが、クリックして表示する div から下にスライドさせたいと思います。

問題 2: リンクを 1 つずつすばやく、ただし明らかに 1 つずつ表示したい。

ここにコードがあります

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;  
}

Jクエリ

$(".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");
        });