Question

我对这个菜单有一些问题，我有转换工作，但它不如我想要的那么顺利。我该怎么做才能让它更好用？

HTML

<?php
        $host='dbhost';
        $user='dbuser';
        $pass='dbpassword';
        $db='dbname';


        $mysqli = new mysqli($host,$user,$pass,$db) or die( mysqli_error() );
        if ( $mysqli->connect_error ) die( 'Connect Error (' . $mysqli->connect_errno . ') ' . $mysqli->connect_error );



        $sql='select `id`,`name`,`phone`,`email`,`address` from `media`;';

        $res=$mysqli->query($sql);

        while( $rs = $res->fetch_object() ) {
            echo $rs->id, $rs->name, $rs->phone, $rs->email, $rs->address,' <br />';
        }

        $mysqli->close();
?>

CSS

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

JS

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

小提琴 http://jsfiddle.net/wnaux6j6/1/

修改我想我找到了办法 http://jsfiddle.net/wnaux6j6/17/

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

Answer 1

最好使用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>

Answer 2

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

-

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

jQuery在水平菜单中的li项目中滑动

2 个答案: