如何使用jQuery和bootstrap css实现带图标的扩展折叠侧导航_Jquery_Html_Css_Twitter Bootstrap

如何使用jQuery和bootstrap css实现带图标的扩展折叠侧导航

jquery html css twitter-bootstrap

如何使用jQuery和bootstrap css实现带图标的扩展折叠侧导航,jquery,html,css,twitter-bootstrap,Jquery,Html,Css,Twitter Bootstrap,我几乎完成了使用jQuery和Bootstrap扩展折叠侧导航的工作。这是我的html和屏幕截图 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <script src="https://code.jquery.com/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcd

我几乎完成了使用jQuery和Bootstrap扩展折叠侧导航的工作。这是我的html和屏幕截图

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
        rel="stylesheet" type="text/css" />
    <%--Add the css reference here--%>
    <link href="../css/simple-sidebar.css" rel="stylesheet" type="text/css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#ToggleSideMenu").click(function (e) {
                e.preventDefault();
                $("#wrapper").toggleClass("toggled");
            });
        });
    </script>
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
                    </span>
                </button>
                <a class="navbar-brand" href="/">Application name</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/">Home</a></li>
                    <li><a href="/Home/About">About</a></li>
                    <li><a href="/Home/Contact">Contact</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
    </div>
    <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="#">Home</a> </li>
                <li><a href="#">About</a> </li>
                <li><a href="#">Contact</a> </li>
            </ul>
        </div>
        <!-- /#sidebar-wrapper -->
        <!-- Page Content -->
        <div id="page-content-wrapper">
            <br />
            <br />
            <a href="#ToggleSideMenu" class="btn btn-default" id="ToggleSideMenu">Toggle Menu</a>
            <hr />
            <footer>
            <p>&copy; 2015 - My ASP.NET Application</p>
        </footer>
        </div>
        <!-- /#page-content-wrapper -->
    </div>
</body>
</html>

只要告诉我要在我的html和css中更改什么，以使左侧导航中有一个小图标。如果可能，请帮助我的代码样本。谢谢

只需在导航栏标题div中移动按钮，如下所示：

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
        </span>
    </button>
    <a class="navbar-brand" href="/">Application name</a>
</div>

这是一个简单的边栏，里面有一个切换按钮。当您单击它时，它将切换一个类

。侧栏将折叠

，这将应用属性来隐藏该栏。此外，按钮向右移动以保持可见

CSS

.sidebar, .toggle {
    transition:all .5s ease-in-out;
    -webkit-transition:all .5s ease-in-out;
}

.sidebar {
    background:lightgrey;
    width:200px;
    height:100vh;
    position:absolute;
    top:0;
    left:0;
}

.toggle {
    position:absolute;
    right:5px;
    top:5px;
    width:30px;
    height:30px;
    background:black;
}

.sidebar-collapsed {
     transform:translateX(-100%);   
    -webkit-transform:translateX(-100%);
}

.sidebar-collapsed .toggle {
    right:-5px;
     transform:translateX(100%);   
    -webkit-transform:translateX(100%);   
}

您可以在html中将按钮放置在导航栏中，并将其绝对放置在css的右上角。如果您想在单击按钮时完全隐藏侧边栏，请不要忘记在css中为右属性设置负值，以便按钮保持在屏幕上。这将需要你保持你的边栏溢出可见。你会plzz张贴一些相关的代码，因为我在html和css中丢失。好，但你没有使用引导。如果有人使用我发布的代码并根据期望的结果进行更改，那就太好了。

.navbar-header {
    position: relative;
}

.navbar-toggle {
    position: absolute;  // this takes the button out of the regular document flow 
    left: 100%;    // this will stick the button on the outside right edge -- reduce this if you want the button more inside of the navbar-header
    top: 50%;
    transform: translateY(-50%);  // this & the rule above it will center the button vertically relative to the navbar-header
}

.sidebar, .toggle {
    transition:all .5s ease-in-out;
    -webkit-transition:all .5s ease-in-out;
}

.sidebar {
    background:lightgrey;
    width:200px;
    height:100vh;
    position:absolute;
    top:0;
    left:0;
}

.toggle {
    position:absolute;
    right:5px;
    top:5px;
    width:30px;
    height:30px;
    background:black;
}

.sidebar-collapsed {
     transform:translateX(-100%);   
    -webkit-transform:translateX(-100%);
}

.sidebar-collapsed .toggle {
    right:-5px;
     transform:translateX(100%);   
    -webkit-transform:translateX(100%);   
}