jQuery slide in li item in horizontalmenu

本文关键字：in horizontalmenu item li jQuery slide 更新时间：2023-09-26

我对这个菜单有一些问题，我可以进行转换，但它没有我想要的那么平滑。我能做些什么来使它更好地工作？

html

<ul>
    <li class="hidden"><a href="#">Link 1</a></li>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 1</a></li>
</ul>
<br />
<button>Push me in!</button>

css

.hidden {
    display:none;
    overflow:hidden;
}
ul {
    list-style:none;
    margin:0;
    padding:0;
    display:block:
    float:left;
    overflow:hidden;
}
li {
    display:block;
    float:left;
    overflow:hidden;
}
li a {
    display:block;
    background-color:red;
    text-decoration:none;
    color:#fff;
    padding:5px 10px;
    overflow:hidden;
}

js

$('button').click(function() {
    $(".hidden").toggle("slide", {
        direction: "left"
    }, 1000);
});

Fiddlehttp://jsfiddle.net/wnaux6j6/1/

编辑我想我找到了办法http://jsfiddle.net/wnaux6j6/17/

但如果有人知道更好的方法，请分享

最好使用Bootstrap来设计Toggle菜单。这将对你有所帮助。。

http://startbootstrap.com/template-overviews/simple-sidebar/

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">
        <title>Simple Sidebar - Start Bootstrap Template</title>
        <!-- Bootstrap Core CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <!-- Custom CSS -->
        <link href="css/simple-sidebar.css" rel="stylesheet">
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <div id="wrapper">
            <!-- Sidebar -->
            <div id="sidebar-wrapper">
                <ul class="sidebar-nav">
                    <li class="sidebar-brand">
                        <a href="#">
                            Start Bootstrap
                        </a>
                    </li>
                    <li>
                        <a href="#">Dashboard</a>
                    </li>
                    <li>
                        <a href="#">Shortcuts</a>
                    </li>
                    <li>
                        <a href="#">Overview</a>
                    </li>
                    <li>
                        <a href="#">Events</a>
                    </li>
                    <li>
                        <a href="#">About</a>
                    </li>
                    <li>
                        <a href="#">Services</a>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                    </li>
                </ul>
            </div>
            <!-- /#sidebar-wrapper -->
            <!-- Page Content -->
            <div id="page-content-wrapper">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-12">
                            <h1>Simple Sidebar</h1>
                            <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
                            <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
                            <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /#page-content-wrapper -->
        </div>
        <!-- /#wrapper -->
        <!-- jQuery -->
        <script src="js/jquery.js"></script>
        <!-- Bootstrap Core JavaScript -->
        <script src="js/bootstrap.min.js"></script>
        <!-- Menu Toggle Script -->
        <script>
        $("#menu-toggle").click(function(e) {
            e.preventDefault();
            $("#wrapper").toggleClass("toggled");
        });
        </script>
    </body>
    </html>

http://jsfiddle.net/wnaux6j6/24/

-

$('#push-in').click(function() {
    $(".hidden").animate({'width':'60px'}, 2000);
});
$('#push-out').click(function() {
    $(".hidden").animate({'width':'-60px'}, 2000);
});

.hidden {
    width:0px;
    
}
ul {
    list-style:none;
    margin:0;
    padding:0;
    display:block:
    float:left;
}
li {
    display:block;
    float:left;
}
li a {
    display:block;
    background-color:red;
    text-decoration:none;
    color:#fff;
    padding:5px 3px;
    width:60px;
}

<div><ul>
    <li class="hidden"><a href="#">Link 1</a></li>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 1</a></li>
</ul>
<br /></div>
<div>
<button id="push-in">Push me in!</button>
<button id="push-out">Push me out!</button>
    </div>