1

我正在尝试为网站制作此导航，现在它似乎可以工作，我只是无法获得正确的动画。我曾尝试使用动画，但我无法让它工作，我不确定这是否是最好的方法。

我希望我的菜单从他们居住的一侧滑入 - 而不是像标准的 .show / .hide 那样从顶角缩小。

HTML

<div class="wrapper">
    <div class="nav">
        <a href="#" class="nav-show">menu</a>
        <a href="#" class="search-show">search</a>

        <div class="nav-wrap">
            <ul>
                <li><a herf="#">1</a></li>
                <li><a herf="#">2</a></li>
                <li><a herf="#">3</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
            </ul>
        </div>

        <div class="search-wrap">
            <ul>
                <li><a herf="#">1</a></li>
                <li><a herf="#">2</a></li>
                <li><a herf="#">3</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
            </ul>
        </div>
    </div>
</div>

CSS

body {background-color:#567;}
* {margin:0; padding:0;}
ul, li {margin:0; padding:0;}

.wrapper {width:100%; height:60px; background-color:#333;}
.nav {width:100%; height:60px;}
.nav-show {width:60px; background-color:#666; color:#FFF; display:inline-block; height:100%; line-height:60px; text-align:center;}
.search-show {width:60px; background-color:#666; color:#FFF; display:inline-block; height:100%; line-height:60px; text-align:center; float:right;}

.nav-wrap {width:90%; background-color:#999; color:#000;padding:10px; display:none; position:fixed; top:60px; left:0; bottom:0; overflow:auto;}
.nav-wrap ul {list-style:none; background-color:#F60;}
.nav-wrap ul li {height:60px; width:100%; background-color:#CCC;margin-bottom:5px;}

.search-wrap {width:90%; background-color:#999; color:#000;padding:10px; display:none; position:fixed; top:60px; right:0; bottom:0; overflow:auto;}
.search-wrap ul {list-style:none; background-color:#F60;}
.search-wrap ul li {height:60px; width:100%; background-color:#CCC;margin-bottom:5px;}

查询

$(document).ready(
    function(){
        $(".nav-show").click(function () {
            $(".search-wrap").hide("slow");
            $(".nav-wrap").toggle("slow");
        });

        $(".search-show").click(function () {
            $(".nav-wrap").hide("slow");
            $(".search-wrap").toggle("slow");
        });
    });

我也做了一个小提琴

我知道我的 jquery 代码不是最好的，我在这里比较菜鸟，所以如果它可以做得更聪明，我很乐意看到它。也许只使用 CSS3 做动画会更好？

4

2 回答 2

1

根据您的需要修复它

新的jsFiddle

HTML：

<div class="nav-wrap hidden">
            <ul>
                <li><a herf="#">1</a></li>
                <li><a herf="#">2</a></li>
                <li><a herf="#">3</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
            </ul>
        </div>

        <div class="search-wrap hidden">
            <ul>
                <li><a herf="#">1</a></li>
                <li><a herf="#">2</a></li>
                <li><a herf="#">3</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
            </ul>
        </div>

JS：

$(document).ready(
function(){
    $(".nav-show").click(function () {
        $(".search-wrap").hide('slide', {direction: 'right'}, 1000);
        $(".search-wrap").addClass("hidden");
        if($(".nav-wrap").hasClass('hidden')){
            $(".nav-wrap").show('slide', {direction: 'left'}, 1000);
            $(".nav-wrap").removeClass("hidden");
        } else {
            $(".nav-wrap").addClass("hidden");
            $(".nav-wrap").hide('slide', {direction: 'left'}, 1000)
        }
    });

    $(".search-show").click(function () {
        $(".nav-wrap").hide('slide', {direction: 'left'}, 1000);
        $(".nav-wrap").addClass("hidden");
        $(".search-wrap").show('slide', {direction: 'right'}, 1000);

        if($(".search-wrap").hasClass('hidden')){
            $(".search-wrap").show('slide', {direction: 'right'}, 1000);
            $(".search-wrap").removeClass("hidden");
        } else {
            $(".search-wrap").addClass("hidden");
            $(".search-wrap").hide('slide', {direction: 'right'}, 1000)
        }

    });
});
于 2013-08-08T14:50:56.013 回答
0

尝试使用缓动插件，看起来很棒：

小提琴

$(document).ready(
    function(){
        $(".nav-show").click(function () {
            $(".search-wrap").hide("slow");
            $(".nav-wrap").toggle('slide', {direction: 'left'}, 1000, "easeOutExpo");
        });

        $(".search-show").click(function () {
            $(".nav-wrap").hide("slow");
            $(".search-wrap").toggle('slide', {direction: 'right'}, 1000, "easeOutExpo");
        });
    });
于 2013-08-08T15:08:08.860 回答