Does not work
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
body {margin:0;}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav li:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul class="topnav" id="myTopnav">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
<li><a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a></li>
</ul>
<div style="padding-left:16px">
<h2>Responsive Topnav Example</h2>
<p>Resize the browser window to see how it works.</p>
</div>
</body>
</html>
In the code, when the screen size is less than 600px, the title of the house remains, and the rest should be accessible via the hamburger icon, which should be displayed in the right corner, but it doesn't work. What have I done wrong? What changes should I make to make it work? Please, help
source to share
While the other answers provide a solution using your current code, I would recommend a different approach for quite a few things ...
-
Unobtrusive JS is essential for a better SoC (Separation of Concerns). Store it outside the HTML / global scope with a method
addEventListener()
and optionally an IIFE. -
CSS should take a more mobile approach.
-
:hover
must always be accompanied:focus
. Use the Tab key to navigate from control to control, and you'll see why. Not everyone uses a mouse. -
HTML should probably use HTML5 semantics
-
This is less important, but I would still show the Home link.
-
Update: Also, use an appropriate heading level (h2 is not the top level)
(function() {
'use strict';
var headerEl = document.querySelector('body > header');
var btnEl = document.querySelector('.menu-btn');
if(btnEl && headerEl) {
btnEl.addEventListener('click', function() {
headerEl.classList.toggle('open');
});
}
})();
.page-header {
background-color: #333;
color: #f2f2f2;
overflow: hidden;
}
.page-header a { display: block; }
.page-header a,
.menu-btn {
color: inherit;
text-decoration: none;
font-size: 17px;
padding: 14px 16px;
}
button.menu-btn {
border: none;
background: none;
cursor: pointer;
}
.page-header a:hover,
.page-header a:focus,
.menu-btn:hover,
.menu-btn:focus {
background-color: #ddd;
color: black;
outline: none;
}
.page-header:not(.open) a { display:none; }
.menu-btn { float: right; }
@media(min-width: 768px) {
.page-header.page-header a { display: inline-block; }
.menu-btn { display: none; }
}
<header class="page-header">
<button class="menu-btn">☰</button>
<nav>
<a href="#home">Home</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</nav>
</header>
<main>
<h1>Responsive Topnav Example</h1>
<p>Resize the browser window to see how it works.</p>
</main>
source to share
The main problem is that you hide the elements when you go into a small state, but you don't show them when you add the class .responsive
. I've made some updates for you here:
https://jsfiddle.net/9xxzsypu/
.topnav.responsive li.item:not(:first-child) { display: block!important; }
source to share