admin管理员组文章数量:1430802
Currently my navbar shrinks with the page size, using @media screen. This works fine, but when the page is very small I want the navbar to collapse into a vertical drop down which requires a click to open.
Due to my circumstances I cannot use bootstrap, just html/css and js.
example on jsfiddle
Currently my navbar shrinks with the page size, using @media screen. This works fine, but when the page is very small I want the navbar to collapse into a vertical drop down which requires a click to open.
Due to my circumstances I cannot use bootstrap, just html/css and js.
example on jsfiddle
Share Improve this question edited Sep 1, 2017 at 11:54 giorgio 10.2k2 gold badges29 silver badges41 bronze badges asked Sep 1, 2017 at 10:54 CharlieCharlie 411 gold badge1 silver badge2 bronze badges 2- Hi Charlie. This is not a plete question. There is not enough detail regarding what you have tried or implemented. I would request you to do a basic research and try to implement something first. When you are not able to implement any thing, then e to us with details of the issues that you are facing. This will enable us better to help you. See the How to Ask page for help clarifying this question. – viCky Commented Sep 1, 2017 at 10:58
- I have tried, every single example of this i can find uses bootstrap, obviously because it's easier but due to my circumstances i cannot use bootstrap. Having a thread like this, with an answer on how to preform this task without bootstrap would be very useful to alot of people in my situation – Charlie Commented Sep 1, 2017 at 11:14
3 Answers
Reset to default 1first hide the nav bar element using @media and change elements into list view
@media screen and (max-width: 850px){
//replace max width with your width
ul li {
display: block;
}
ul {
display: none;
}
}
Showmenu functions toggles the visibility of nav bar's elements
function showmenu()
{
var x = document.getElementById('myUL');
if (x.style.display == 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
Also add a button to trigger the function
<!DOCTYPE html>
<html lang="en">
<head>
<button onclick = 'showmenu();'>click me to see menu</button>
<ul id='myUL'>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</head>
</html>
Hope this helps
So, you would need a bit of javascript. This is a working example which I have received from w3schools. You can read the full article here : https://www.w3schools./howto/howto_js_topnav_responsive.asp
Basically what you do is, you hide the menu on mobile view using media query, change its style and then show them using javascript.
You need javascript for the menu dropdown toggle to work. Rest is handled by CSS.
If you have any queries you can put them in ments.
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}<div class="topnav" id="myTopnav">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
</div>Try these....and modify according to your requirment.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
</body>
</html>
本文标签： javascriptMaking navbar collapse with JSStack Overflow
版权声明：本文标题：javascript - Making navbar collapse with JS - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745553322a2663043.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论