如何使我的左側菜單欄顯示並隱藏帶有更改圖標的單擊
[英]How to make my left side menu bar to show and hide on click with changing icons
問題描述
您好，我知道這個問題已經被問過很多次了，我嘗試了許多解決方案，但對我來說卻很有用。 因此，我想發布此問題以尋求幫助。 我有一個django應用程序，它具有一些通過bootstrap完成的html模板。 現在，我希望div之一完全隱藏（ 當隱藏時，應該在側邊欄出現一個圖標 ），並在單擊圖標時顯示左側菜單欄。 這是我的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
在上面的html頁面中，我希望此div在每次單擊時顯示和隱藏，並且在同一菜單欄上應該有一個用於執行此操作的圖標。 注意：圖標應始終可見。 請幫助我完成此功能。 提前致謝。 和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
我想您需要折疊的導航欄。 有關於它的信息： http : //getbootstrap.com/components/#navbar
如何使我的移動菜單按鈕顯示和隱藏導航欄，以及在負數空間中單擊時隱藏
[英]How do I make my mobile menu button reveal and hide the navigation bar as well as hide on click in negative space
如何使我的徽標 go 向左，我的導航欄圖標在中間？
[英]How do I make my logo go towards the left and my nav bar icons in the middle?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.