如何使我的左侧菜单栏显示并隐藏带有更改图标的单击
[英]How to make my left side menu bar to show and hide on click with changing icons
问题描述
Hello i know this question is being asked many times, i tried many of the solutions but it dint work for me. 
您好，我知道这个问题已经被问过很多次了，我尝试了许多解决方案，但对我来说却很有用。 Hence i thought of posting this question for some help. 因此，我想发布此问题以寻求帮助。 I have an django applications which have some html templates done with the help of bootstrap . 我有一个django应用程序，它具有一些通过bootstrap完成的html模板。 Now i want one of div to completely hide ( when it is hidden an icon should be appearing in place of sidebar ) and show left side menu bar on-click of icon. 现在，我希望div之一完全隐藏（ 当隐藏时，应该在侧边栏出现一个图标 ），并在单击图标时显示左侧菜单栏。 Here is my html file 这是我的html文件
{% load staticfiles %} <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>**</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet" media="screen"> <link href="{% static 'bootstrap/css/dashboard.css' %}" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script> <link href="{% static 'style.css' %}" rel="stylesheet"> <script src='http://codepen.io/assets/libs/fullpage/jquery.js'></script> </head> <body> {% block content %} <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="http://www.google.com/"><img src="{% static "bootstrap/css/logo4.png" %}" alt="MPOWER" style="margin-top:-5%;"/></a> </div> <div> <ul class="nav navbar-nav navbar-right"> <li></li> <li><a href="#"><span class="glyphicon glyphicon-user"></span> {% if user.is_authenticated %} {{ user.first_name }} {{ request.user.username }}</a></li> {% endif %} <li><a href="{% url 'django.contrib.auth.views.logout' %}"><span class="glyphicon glyphicon-log-out\\"></span>Logout</a></li> </ul> </div> </div> </nav> <div class="container-fluid" > <div id="overlay"></div> <div class="row"> <div class="col-sm-3 col-md-2 sidebar" id="mobile-menu"> <ul class="nav nav-sidebar"> <li><a href="#"><span id="menu-button"><span class="glyphicon glyphicon-chevron-right"></span></span></a></li> <li><span style="color:blue; font-weight:bold;">Dashboardsssss</span></li> {% for Dashboard in dashboards %} <li><a href="{{ Dashboard.d_url }}" target="iframe_a">{{ Dashboard.d_name }}</a></li> {% endfor %} </ul> </div> <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" style="height:600px; margin-top:4%;"> <iframe width="100%" height="95%" name="iframe_a" frameborder="0"></iframe> </div> </div> </div> <script src='http://codepen.io/assets/libs/fullpage/jquery.js'></script> <script src="{% static 'index.js' %}"></script> {% endblock %} </body> </html
in above html page i want this div to be showed and hidden on each click and it should have an icon on the same menu bar for doing this. 在上面的html页面中，我希望此div在每次单击时显示和隐藏，并且在同一菜单栏上应该有一个用于执行此操作的图标。 note: icon should be visible in all time. 注意：图标应始终可见。 please help me to do this functionality. 请帮助我完成此功能。 thanks in advance. 提前致谢。 and css looks like 和CSS看起来像
#main_header .panel_btn { display: block; position: absolute; left: 15px; top: 15px; height: 20px; width: 20px; background: rgb(200,200,200); z-index: 5; } #main_header .panel_btn .line { display: block; position: relative; height: 4px; margin-bottom: 4px; background: rgb(80,80,80); } #main_header .panel_btn .line:last-child { margin-bottom: 0px; } .navbar-fixed-top { border: 0; } /* * Sidebar */ /* Hide for mobile, show later */ .sidebar { display: none; } @media (min-width: 768px) { .sidebar { position: fixed; top: 51px; bottom: 0; left: 0; z-index: 1000; display: block; padding: 20px; overflow-x: hidden; overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ background-color: #f5f5f5; } } /* Sidebar navigation */ .nav-sidebar { margin-right: -21px; /* 20px padding + 1px border */ margin-bottom: 20px; margin-left: -20px; } .nav-sidebar > li > a { padding-right: 20px; padding-left: 20px; } .nav-sidebar > .active > a, .nav-sidebar > .active > a:hover, .nav-sidebar > .active > a:focus { color: #fff; background-color: #428bca; } /* * Main content */
1 个解决方案
解决方案1
1 2015-04-09 12:25:28
I guess that you need the collapsed navbar. 我想您需要折叠的导航栏。 There is the information about it: http://getbootstrap.com/components/#navbar 有关于它的信息： http : //getbootstrap.com/components/#navbar
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.