个人中心
gpt4 book ai didi

jquery - 如何使用 jQuery 和 bootstrap css 实现 Expand collapse Side Nav with icon

转载 作者：太空宇宙 更新时间：2023-11-04 15:02:35 25 4
gpt4 key购买 nike

我几乎完成了使用 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>

屏幕截图

enter image description here

在我的例子中，导航正在通过按钮展开和折叠，我想使用与导航栏粘在一起的图标。在这里，我给出了一个看起来与我的要求相同的网址。 

http://www.keenthemes.com/preview/index.php?theme=conquer

enter image description here

请告诉我要更改我的 html 和 css 中的哪些内容，以便在我的左侧导航栏中添加一个小图标。如果可能的话，请帮助我提供代码示例。谢谢

最佳答案

这是一个简单的边栏，里面有一个切换按钮。当您单击它时，它会切换类 .sidebar-collapsed，这将应用属性来隐藏栏。此外，该按钮会向右移动以保持可见。

http://jsfiddle.net/xpp5sgg8/2/

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%);   
}

关于jquery - 如何使用 jQuery 和 bootstrap css 实现 Expand collapse Side Nav with icon，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32289217/

25 4 0
文章推荐： c++ - 使用指针 c++ 违反 const 变量
文章推荐： php - 在CSS中重叠图像
文章推荐： Java org/objectweb/asm/ClassVisitor 未找到
文章推荐： java - 在java中将表的内容从一个类保存到另一个类
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com