I'm trying to add a slide-down transition when the menu is 'opened' but i just can't get my head wrapped around it. Tried numerous things but can't get the transition to work.
I tried adding it to some of the classes with no result.
I read something about display blocking the transition and should be replaced with visibility. That results in two line's with the backgroundcolor and the dropdown button disapearing.
Hope someone can shed some light on this.
HTML:
<div class="topnav" id="myTopnav">
Home
Steppen
Walks
Events
Agenda
Wie zijn wij?
Tips
Contact
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
CSS:
.topnav {
background-color: #3b3b3b;
overflow: hidden;
}
.topnav a {
float: left;
display: block;
color: #5bdeff;
text-align: center;
padding: 1% 2%;
text-decoration: none;
font-size: 22px;
}
.topnav a:hover {
background-color: #5bdeff;
color: black;
}
.topnav a.active {
background-color: #5bdeff;
color: black;
}
.topnav .icon {
display: none;
}
.topnav a:active {
position: relative;
top: 1px;
}
.responsive.fa-bars {
color:#000
}
#media (max-width: 900px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
#media (max-width: 900px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
Related
I have this code in CSS for the navigation menu:
.topnav {
overflow: hidden;
background-color: rgb(0, 0, 0);
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 15px;
text-decoration: none;
font-size: 16pt;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a {display: none;}
.topnav a.icon:before {
content: "Menu";
}
.topnav a {
float: right;
}
.topnav a.icon {
float: right;
display: block;
}
}
.OwnerJoe:before {
content: "Joe's Task: ";
}
#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;
}
}
And this in HTML:
<div class="topnav" id="myTopnav">
<a href#><b>1</b></a>
<a href#><b>2</b></a>
<a href#><b>3</b></a>
<a href#><b>4</b></a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
+JavaScript:
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
I try to edit the code so that in small screen mode (eg cell phone) the text "Menu" appears on the left and three commas on the right and after clicking on the text "Menu" or three commas would be other sections ("1" , "2", "3", "4") displayed under the text "Menu". Three commas must stay in the same place after clicking.
I have a responsive menu that on large screens you see the drop-down menu centered on the page. But on small screens you see a hamburger menu also centered on the page, and I want the icon to be seen on the left. How can i do that? It looks like this: https://postimg.cc/dLFkHH1Z
On large screens there is no problem but in small screens i want to see the hamburguer icon on the left.
Thanks in advance.
/* 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: white;
overflow: hidden;
display:flex;
justify-content: center;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Add an active class to highlight the current page */
.active {
background-color: #4CAF50;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown {
float: left;
overflow: hidden;
}
/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
/* Style the dropdown content (hidden by default) */
.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;
}
/* Style the links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
display: block;
}
/* 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, .dropdown .dropbtn {
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;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
<html>
<head>
<title>Menú Desplegable Responsive</title>
<LINK REL=StyleSheet HREF="estilos.css" TYPE="text/css">
<script src="menu.js" type="text/javascript"></script>
</head>
<body>
<div class="topnav" id="myTopnav">
Home
News
Contact
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
About
☰
</div>
</body>
</html>
i have found the solution.
document.getElementById("menuBars").onclick = function(e) {
e.preventDefault();
var x = document.getElementById("myTopnav");
x.classList.toggle("responsive");
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: white;
text-align: center;
}
/*
.topnav .fl {
float: left;
}
.topnav .fr {
float: right;
}
*/
.topnav .main {
display: inline-block;
}
.topnav .main a {
float: left;
}
.topnav a {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
main {
padding-left: 16px;
}
#media screen and (max-width: 600px) {
.topnav a, .dropdown .dropbtn {
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;
}
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Menú</title>
<LINK REL=StyleSheet HREF="estilos.css" TYPE="text/css">
<script src="menu.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<nav class="topnav" id="myTopnav">
Home
<a href="#about" >About</a>
News
Contact
<!--<a href="" class="icon" id="menuBars">-->
☰
<i class="fa fa-bars"></i>
</a>
</nav>
</body>
</html>
I have following code for responsive navigation bar. Right now all the menu times hide for small screen except Home button.
I need to keep Search menu also for the small screen. How can I do this in below code.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.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 a.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:nth-child(1)) {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;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
<a >Home</a>
<a >News</a>
<a >Contact</a>
<a>About</a>
<a ><i class="fa fa-search"></i>Search</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
I tried by adding .topnav a:not(:nth-child(5)) {display: none;} with the existing css but not working. I already found select multiple child select multiple child in css, but no idea how to apply here .
Try this instead..
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.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 a.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.topnav a:nth-child(2){display:none;}
#media screen and (max-width: 600px) {
.topnav a{display: none;}
.topnav a:first-child,.topnav a:nth-child(2){display: block;}
.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;
}
.topnav.responsive a:nth-child(6){display:none;}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="topnav" id="myTopnav">
<a >Home</a>
<a><i class="fa fa-search"></i>Search</a>
<a >News</a>
<a >Contact</a>
<a>About</a>
<a><i class="fa fa-search"></i>Search</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</body>
</html>
When I toggle the menu icon on my nav bar in mobile view, I can't get the 'work' and 'contact' links to align under the name and stay put. I'm targeting the .topnav.responsive #nav-bar ul in media queries which seems to be moving it, but can't figure out what properties to use to make it align under the 'name' when the menu icon is toggled on.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
.topnav {
overflow: hidden;
position: fixed;
width: 100%;
z-index: 5;
padding-top: 20px;
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 16px;
line-height: 19px;
text-decoration: none;
font-size: 18px;
}
.topnav .icon {
display: none;
}
ul {
margin:0;
padding-top: -80;
}
#nav-bar {
float: right;
}
.nav-link a {
list-style-type: none;
text-decoration: none;
color: black;
}
#nav-bar li {
display: inline-block;
margin-right: 20px;
line-height: 80px;
margin-top: -2px;
}
#work {
margin-right: -5px;
}
#media screen and (max-width: 500px) {
#nav-bar ul {display: none;}
.topnav a.icon {
float: right;
display: block;
margin-right: 10px;
margin-top: -2px;
}
}
#media screen and (max-width: 500px) {
.topnav.responsive {position: fixed;}
.topnav.responsive .icon {
position: absolute;
right: 0px;
top: 20px;
}
.topnav.responsive #nav-bar ul {
float: left;
display: block;
position: relative;
right: 300px;
top: 20px;
text-align: left;
padding-left: 20px;
}
.topnav a {
padding:20px;
}
#nav-bar li {
display:block;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav" id="myTopnav">
NAME
<div id="nav-bar">
<ul>
<li style="list-style-type: none;" class="nav-link"><a id="work" href="#">WORK</a></li>
<li style="list-style-type: none;" class="nav-link">CONTACT</li>
</ul>
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
Don't use floats they're just a bit difficult to control, use flex instead.
I've made a few changes removed some unnecessary code to keep it simple and understandable.
I won't explain what every property is doing that'll take all night, i'm pretty sure you're familiar with most, However if you have any questions please do ask.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.topnav {
overflow: hidden;
position: fixed;
width: 100%;
z-index: 5;
display: flex;
}
.topnav a {
display: block;
color: black;
text-align: center;
padding: 16px;
line-height: 19px;
text-decoration: none;
font-size: 18px;
}
.topnav .icon {
display: none;
}
ul {
display: flex;
margin-left: auto;
}
#media screen and (max-width: 500px) {
.topnav>ul {
display: none;
}
.topnav a.icon {
display: block;
position: absolute;
right: 0;
}
.topnav.responsive {
flex-direction: column;
align-items: flex-start;
}
.topnav.responsive>ul {
display: flex;
flex-direction: column;
margin: 0;
}
.topnav a {
text-align: left;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav" id="myTopnav">
NAME
<ul>
<li style="list-style-type: none;" class="nav-link"><a id="work" href="#">WORK</a></li>
<li style="list-style-type: none;" class="nav-link">CONTACT</li>
</ul>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
I'm working on a website for a school project, i took this format from w3schools and I need to adjust it a bit:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {margin:0;font-family:Arial}
.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;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.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 {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
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;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
Home
News
Contact
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
More Links
</div>
</div>
About
☰
</div>
<div style="padding-left:16px">
<h2>Responsive Topnav with Dropdown</h2>
<p>Resize the browser window to see how it works.</p>
<p>Hover over the dropdown button to open the dropdown menu.</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
i tried to have sub-sub tabs, means that another menu will continue from "More links".
i tried to do some stuff but failed.
and how do i keep the top menu always in place (even after i go to a different link)?
Here's a really basic example that could be improved. There are LOTS of ways to do this. Just a couple of basic functions on mouse enter of the required elements, and changing the CSS classes to keep the sub nav visible on screen if the mouse is over it.
https://codepen.io/cove/pen/VwLdLKr
The javascript:
var dropdown_sub_nav = document.getElementById('dropdown-sub-nav');
var sub_links_1 = document.getElementById('sub-links-1');
dropdown_sub_nav.addEventListener('mouseenter', (event) => {
sub_links_1.setAttribute('class', 'dropdown-content sub-links sub-links-active');
});
dropdown_sub_nav.addEventListener('mouseout', (event) => {
sub_links_1.setAttribute('class', 'sub-links');
});
sub_links_1.addEventListener('mouseenter', (event) => {
sub_links_1.setAttribute('class', 'dropdown-content sub-links sub-links-active');
})
I would ask you how you are going to make this type of navigation truly responsive, as these kinds of hover states aren't user friendly on mobile devices. Will you hide this nav, and show a mobile friendly one?