滑动收缩导航菜单

效果图：

点击前：   

 

点击时滑动展开，点击后：

 

Css代码： 

.am-collapse {  //点击前样式

  display: none;

}

.am-collapse.am-in { //点击后样式

  display: block;

}

.am-collapsing { //点击时样式

  position: relative;

  height: 0;

  overflow: hidden;

  -webkit-transition: height .3s ease;

          transition: height .3s ease;

}

 [data-am-collapse] 

{

  cursor: pointer;}

 

JS代码

这种为覆盖式收缩滑动。

    $(function () {

            var kg = false;

            $(".admin-parent").click(function () {

                var height = $(".admin-parent").height();

                var height1 = $(".admin-parent li").height();

                var height2 = $("#collapse-nav").height();

                alert(height2);

                if (!kg) {

                    $("#collapse-nav").slideToggle(1);

                    $(this).animate({

                        position: "relative",

                        height: "320px",

                        overflow: "hidden"

                    }, 500);

                    kg = true;

                }

                else {

                    kg = false;

                    $(this).animate({

                        position: "relative",

                        height: "50px",

                        overflow: "hidden"

                    }, 500, function () { $("#collapse-nav").slideToggle(); });

 

                }

            });

        });

 

这种为挤压式收缩滑动。

        $(function () {

            $(".admin-parent").click(function () {

            $("#collapse-nav").slideToggle();

        }); 

        });