I made a nav bar using nav and li tags, including a notifications icon, I am trying to make notifications nested list to show notifications, and use JavaScript to toggle/hide the menu, so far no luck. I've been looking for snippets online to support my logic, but I am stuck in the styling part and the JavaScript functionality. code below:
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
html {
scroll-behavior: smooth;
}
* {
font-family: 'Roboto', sans-serif;
font-style: normal;
padding: 0;
margin: 0;
text-decoration: none;
}
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
::-webkit-scrollbar {
width: 1.32vmin;
}
/*
::-webkit-scrollbar-track{
border: 0.53vmin solid rgba(7, 67, 146, 0.17);
box-shadow: inset 0 0 0.33vmin 0.26vmin rgba(7, 67, 146, 0.17);
}
*/
::-webkit-scrollbar-thumb {
background: #074392;
border-radius: 0vmin;
}
::-webkit-scrollbar-button {
height: 7.45vmin;
background: #074392;
}
body {
font-weight: 400;
font-size: 2.12vmin;
background-color: #FFFFFF;
/*overflow: hidden;*/
height: 100%;
}
h1 {
margin-left: 3vmin;
}
h5 {
margin: 2vmin 3vmin;
position: absolute;
width: 14.72vmin;
font-weight: 500;
font-size: 2.65vmin;
letter-spacing: 0.79vmin;
color: #FFFFFF;
display: inline;
}
nav {
background-color: #074392;
height: 7.42vmin;
width: 100%;
/*position: relative;*/
/*overflow: hidden;*/
position: sticky;
top: 0;
}
img.logo {
margin: 1.855vmin 3vmin;
height: 3.5vmin;
width: 7vmin;
}
nav ul {
float: right;
margin: 1.855vmin 2vmin;
}
nav ul li {
display: inline-block;
}
nav ul li::before {
content: " ";
padding: 0vmin 0.5vmin;
}
nav ul li a {
color: white;
/*margin: 0vmin 1vmin;*/
/*border-top-left-radius: 1.326vmin;
border-top-right-radius: 1.326vmin;
border-bottom-left-radius: 1.326vmin;
border-bottom-right-radius: 1.326vmin;*/
}
a.active,
a:hover {
font-variation-settings: 'FILL' 1;
}
.checkbtn {
color: #ffffff;
float: left;
cursor: pointer;
display: none;
margin: 1.855vmin 3vmin;
}
#check {
display: none;
}
#check:checked~ul {
left: 0;
}
.dropdown {}
.dropdown .dropbtn {
cursor: pointer;
border: none;
outline: none;
background-color: #074392;
color: #FFFFFF;
}
.dropdown:hover .dropbtn,
.dropbtn:focus {
color: #FFFFFF;
font-variation-settings: 'FILL' 1;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #0743922B;
width: 37.5vmin;
overflow-wrap: break-word;
transform: translateX(-56%);
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: justify;
}
.dropdown-content a:hover {
background-color: #0743922B;
}
.show {
display: block;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD#20..48,100..700,0..1,-50..200" />
<div class="container">
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="material-symbols-rounded" style="font-size:3.5vmin;" title="Menu">menu</i>
</label>
<h5>LOGO</h5>
<ul>
<li>
<i class="material-symbols-rounded" style="font-size:3.5vmin;" title="Home">home</i>
</li>
<!-- <li> <i class="material-symbols-rounded" style="font-size:3.5vmin;" title="Notifications">notifications</i> -->
<li class="dropdown"><button class="dropbtn" onclick="myFunction()"><i class="material-symbols-rounded" style="font-size:3.5vmin;" title="Notifications">notifications</i></button>
<div class="dropdown-content" id="myDropdown">
<div>Link 1</div>
<div>Link 2</div>
<div>Link asasdasdasdasdasdsadsadasdasdasdasd asddasdas asd asd asd dasd asd</div>
</div>
</li>
<li>
<i class="material-symbols-rounded" style="font-size:3.5vmin;" title="Tasks">task</i>
</li>
<li>
<i class="material-symbols-rounded" style="font-size:3.5vmin;" title="Profile">person</i>
</li>
</ul>
<script type="text/javascript" src="JS/ActiveTab.js"></script>
<script type="text/javascript" src="JS/ToggleNotifications.js"></script>
</nav>
<main>
<h1>Example Page</h1>
</main>
</div>
By default set a display: none on the dropdown element and set a display: block on the hover pseudo-class of the dropdown element so when a hover event is triggered the dropdown appears.
Also, you can use classList.toggle method to remove if exists or to add if not exist the class.
Remove
Just add the following to the .css:
#myDropdown {
display: none;
}
#myDropdown.show {
display: block;
}
Remove onclick="myFunction()". And replace the .js with:
const myDropdown = document.getElementById('myDropdown')
addEventListener('click', event => {
let dropbtn = event.target.closest('button.dropbtn')
if (!dropbtn) return myDropdown.classList.remove('show')
console.log('hii')
myDropdown.classList.toggle('show')
})
Related
I'm making a menu but I have a problem with my JavaScript.
I messed up the JavaScript file, but it works in general. The thing is that when you load the page and your with is less than 858px and then you click in one of the items of the menu, if then you make your width larger the menu disappears. So I want to not disappear it.
JavaScript, HTML and CSS:
const mediaQuery = window.matchMedia("(max-width: 858px)");
// Check if the media query is true
if (mediaQuery.matches) {
// function that hides the menu when a "ul li a" is clicked, then, if you click it again, it recovers its form
function hide() {
document.getElementById("hidden").style.display = "none";
// to do an autoclick to class "checkbtn"
document.getElementsByClassName("checkbtn")[0].click();
}
// function that shows the menu when you click the hamburguer (fas fa-bars)
function show() {
document.getElementById("hidden").style.display = "inherit";
}
} else {
function hide() {
document.getElementById("hidden").style.display = "inherit";
document.getElementsByClassName("checkbtn")[0].click();
}
function show() {
document.getElementById("hidden").style.display = "inherit";
}
}
// Initial check
handleTabletChange(mediaQuery);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test</title>
<!-- (fonts.google.com) -->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap"
rel="stylesheet"
/>
<script src="./main.js"></script>
<!-- material design icons -->
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<!-- hamburger menu -->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<style>
/* menu styling */
nav {
background: linear-gradient(
90deg,
rgba(255, 136, 75, 1) 0%,
rgba(254, 72, 64, 1) 100%
);
height: 55px;
width: 100%;
border-radius: 0;
position: fixed;
z-index: 100;
}
label.logo {
color: white;
font-size: 25px;
line-height: 55px;
padding: 0 100px;
font-weight: bold;
}
label.logo a {
color: white;
}
label.logo a:hover {
box-shadow: none;
background: none;
}
nav ul {
float: right;
margin-right: 20px;
border-radius: 0;
}
nav ul li {
display: inline-block;
line-height: 55px;
margin: 0 5px;
}
nav ul li a {
color: white;
font-size: 14px;
padding: 7px 13px;
}
nav ul li a:hover {
background-color: #2c3e50;
transition: 0.5s;
}
.checkbtn {
font-size: 30px;
color: white;
float: right;
line-height: 55px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check {
display: none;
}
/* menu media queries */
#media (max-width: 952px) {
label.logo {
font-size: 25px;
padding-left: 50px;
}
nav ul li a {
font-size: 16px;
}
}
#media (max-width: 858px) {
.checkbtn {
display: block;
}
ul {
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 55px;
left: -100%;
text-align: center;
transition: all 0.5s;
}
nav ul li {
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a {
font-size: 17px;
}
nav ul li a:hover {
background: linear-gradient(
90deg,
rgba(255, 136, 75, 1) 0%,
rgba(254, 72, 64, 1) 100%
);
box-shadow: inset 0 0 0 25px rgb(254, 72, 64);
}
#check:checked ~ ul {
left: 0;
}
}
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
border-radius: 10px;
transition: all 0.6s;
}
body {
background-color: #2c3e50;
color: white !important;
font-family: "Ubuntu", sans-serif;
}
.cssAnimation:hover {
transform: translateY(10px) !important;
}
</style>
</head>
<body id="body">
<!-- menu -->
<nav>
<input type="checkbox" id="check" />
<label for="check" class="checkbtn"
><i class="fas fa-bars" onclick="show()"></i
></label>
<label class="logo">Name</label>
<ul id="hidden">
<li>
Test
</li>
<li>
Test
</li>
<li>
Test
</li>
<li>
Test
</li>
</ul>
</nav>
</body>
</html>
The function "hide()" makes the navigation disappear. For example, you said in the navigation that if you click on the list element, the navigation should disappear. If you remove the "display: none" everything should work as you wanted it to.
function hide() {
document.getElementById("hidden").style.display = "none";
// to do an autoclick to class "checkbtn"
document.getElementsByClassName("checkbtn")[0].click();
}
Try it this way:
const mediaQuery = window.matchMedia("(max-width: 858px)");
// Check if the media query is true
if (mediaQuery.matches) {
// function that hides the menu when a "ul li a" is clicked, then, if you click it again, it recovers its form
function hide() {
// to do an autoclick to class "checkbtn"
document.getElementsByClassName("checkbtn")[0].click();
}
// function that shows the menu when you click the hamburguer (fas fa-bars)
function show() {
document.getElementById("hidden").style.display = "inherit";
}
} else {
function hide() {
document.getElementById("hidden").style.display = "inherit";
document.getElementsByClassName("checkbtn")[0].click();
}
function show() {
document.getElementById("hidden").style.display = "inherit";
}
}
// Initial check
handleTabletChange(mediaQuery);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test</title>
<!-- (fonts.google.com) -->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap"
rel="stylesheet"
/>
<!-- material design icons -->
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<!-- hamburger menu -->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<style>
/* menu styling */
nav {
background: linear-gradient(
90deg,
rgba(255, 136, 75, 1) 0%,
rgba(254, 72, 64, 1) 100%
);
height: 55px;
width: 100%;
border-radius: 0;
position: fixed;
z-index: 100;
}
label.logo {
color: white;
font-size: 25px;
line-height: 55px;
padding: 0 100px;
font-weight: bold;
}
label.logo a {
color: white;
}
label.logo a:hover {
box-shadow: none;
background: none;
}
nav ul {
float: right;
margin-right: 20px;
border-radius: 0;
}
nav ul li {
display: inline-block;
line-height: 55px;
margin: 0 5px;
}
nav ul li a {
color: white;
font-size: 14px;
padding: 7px 13px;
}
nav ul li a:hover {
background-color: #2c3e50;
transition: 0.5s;
}
.checkbtn {
font-size: 30px;
color: white;
float: right;
line-height: 55px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check {
display: none;
}
/* menu media queries */
#media (max-width: 952px) {
label.logo {
font-size: 25px;
padding-left: 50px;
}
nav ul li a {
font-size: 16px;
}
}
#media (max-width: 858px) {
.checkbtn {
display: block;
}
ul {
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 55px;
left: -100%;
text-align: center;
transition: all 0.5s;
}
nav ul li {
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a {
font-size: 17px;
}
nav ul li a:hover {
background: linear-gradient(
90deg,
rgba(255, 136, 75, 1) 0%,
rgba(254, 72, 64, 1) 100%
);
box-shadow: inset 0 0 0 25px rgb(254, 72, 64);
}
#check:checked ~ ul {
left: 0;
}
}
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
border-radius: 10px;
transition: all 0.6s;
}
body {
background-color: #2c3e50;
color: white !important;
font-family: "Ubuntu", sans-serif;
}
.cssAnimation:hover {
transform: translateY(10px) !important;
}
</style>
</head>
<body id="body">
<!-- menu -->
<nav>
<input type="checkbox" id="check" />
<label for="check" class="checkbtn"
><i class="fas fa-bars" onclick="show()"></i
></label>
<label class="logo">Name</label>
<ul id="hidden">
<li>
Test
</li>
<li>
Test
</li>
<li>
Test
</li>
<li>
Test
</li>
</ul>
</nav>
</body>
</html>
Happy Coding!
I want to make the menu stick to the top of the page.
The code works just fine if I just add the code to the page.
However, I want to use javascript because I want to be able to change the menu on every page without having to do it manually on each one.
document.getElementById('menu-js').innerHTML = `<div id="menu">
<div class="dropdown">
<button class="dropbtn">Button_1</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Button_2</button>
<div class="dropdown-content">
Link 4
Link 5
Link 6
</div>
</div>
</div>`
#import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Arsenal|Rubik&display=swap');
#menu {
background-color: white;
top: 0px;
left: 0px;
position: sticky;
padding-left: 10px;
margin-top: -8px;
margin-left: -30px;
margin-right: -0.51%;
border-bottom-color: black;
border-bottom-style: solid;
border-bottom: 5px;
}
.dropbtn {
background-color: white;
color: black;
padding: 16px;
font-size: 16px;
border: none;
margin: none;
font-family: 'Arsenal';
}
.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f2d3d8;
min-width: 200px;
z-index: 1;
font-family: 'Arsenal';
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ffd3b6;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #c06014;
color: white;
}
#page-container {
position: relative;
min-height: 100vh;
}
#content-wrap {
padding-bottom: 2.5rem;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem;
}
hr {
margin-left: -20px;
color: #c06014
}
<html>
<head>
<title>TITLE</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id='page-container'>
<div id='content-wrap'>
<h1>Content above menu</h1>
<div id='menu-js'></div>
<h1>body</h1>
<h2>body</h2>
</div>
<footer>
<hr>FOOTER</footer>
</div>
<script src='menu.js'></script>
</body>
</html>
If possible, I would like to only use these three languages.
Thanks!
Your code seems almost perfect in terms of sticky property.
Try to add a max-height property(value in pixel) to the menu-js div.
My website navigation should have three main links on the left ("Menu", "Coffee", and "Our Story"), and two on the right ("Wholesale" and "Talk to Us"). The first two ("Menu" and "Coffee") should be dropdown menus, however when I click "Menu" the dropdown menu only sometimes appears. When I click "Coffee" the dropdown sometimes appears too, but it shows the dropdown links for "Menu" instead of it's own.
My first thought is that maybe I need two separate functions for "Menu" and "Coffee"? Is there a way to properly display the dropdown links on click? And can I also somehow display the dropdown on hover?
Thank you in advanced.
HTML:
<nav class ="navbar">
<ul class="left-nav">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn"><li>Menu</li></button>
<div id="myDropdown" class="dropdown-content">
Drinks
Pastries
Catering
</div>
</div>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn"><li>Coffee</li></button>
<div id="myDropdown" class="dropdown-content">
Blends
Beanie's Brand
</div>
</div>
<li>Our Story</li>
</ul>
<ul class="right-nav">
<li>Wholesale</li>
<li>Talk To Us</li>
</ul>
</nav>
CSS:
.navbar {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.navbar ul {
top: 170px;
position: fixed;
z-index: 1;
}
.left-nav {
flex: 50%;
display: block;
margin-right: auto;
float: left;
left: 0px;
}
.right-nav {
flex: 50%;
display: block;
float: right;
right: 50px;
}
.navbar li {
list-style-type: none;
}
.navbar ul li {
display: inline-block;
}
.navbar a {
text-decoration: none;
/* color: rgb(255, 180, 148); */
color: white;
margin: 20px;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-weight: 530;
font-size: 20px;
}
.navbar a:hover {
color: hsl(39, 92%, 70%);
}
/* Dropdown Navigation */
.dropbtn {
background-color: rgba(255,255,255,0);
color: white;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-weight: 530;
font-size: 20px;
border: none;
cursor: pointer;
padding-right: 15px;
padding-left: 20px;
}
.dropbtn:hover, .dropntn:focus {
color: hsl(39, 92%, 70%);
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 2;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
display: block;
}
.show {display:block;}
Javascript:
/* Toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
There should be only one element with same id on a page, you should target the dropdown differently:
function myFunction(element) {
element.parentNode.querySelector('.dropdown-content').classList.toggle("show");
}
<button onclick="myFunction(this)" class="dropbtn"><li>Coffee</li></button>
I started writing a responsive navigation bar (4 menu item) with two clickdowns. Now, I would like to add a third one. But when I add a third one, it won't dropdown. Earlier someone helped me with the second one (which also didn't drop down) and it works. So I thought I'd just copy the JS from the second one but that didn't work. Can someone tell me what I need to do in order for the third one to also dropdown? Thx!
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
/*If you bind 2 onclick then only last one will fire*/
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
removeShow("dropdown-content");
}
if (!event.target.matches('.dropbtn2')) {
removeShow("dropdown-content2");
}
}
function removeShow(className) {
var dropdowns = document.getElementsByClassName(className);
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
function myFunction2() {
document.getElementById("myDropdown2").classList.toggle("show");
}
/* Navigation */
.navbar-0 {
height: auto;
}
.navbar-1 {
text-align: center;
color: #FB4D4D;
padding: 0px;
}
.home,
.contact {
padding: 5px;
}
/* Dropdown Button */
.dropbtn {
text-align: center;
font-size: 15px;
font-family: 'Open Sans', sans-serif;
background-color: white;
color: #FB4D4D;
padding: 0px;
margin: 0px;
border: none;
cursor: pointer;
font-weight: bold;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
margin: 5px;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #FB4D4D;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
display: block;
border: none;
}
/*2e drop*/
/* Dropdown Button */
.dropbtn2 {
font-size: 15px;
font-family: 'Open Sans', sans-serif;
background-color: white;
color: #FB4D4D;
padding: 0px;
margin: 0px;
border: none;
cursor: pointer;
font-weight: bold;
}
/* The container <div> - needed to position the dropdown content */
.dropdown2 {
position: relative;
margin: 5px;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content2 {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content2 a {
color: #FB4D4D;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content2 a:hover {
background-color: #f1f1f1
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
display: block;
border: none;
}
/*3e drop*/
/* Dropdown Button */
.dropbtn3 {
font-size: 15px;
font-family: 'Open Sans', sans-serif;
background-color: white;
color: #FB4D4D;
padding: 0px;
margin: 0px;
border: none;
cursor: pointer;
font-weight: bold;
}
/* The container <div> - needed to position the dropdown content */
.dropdown3 {
position: relative;
margin: 5px;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content3 {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content3 a {
color: #FB4D4D;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content3 a:hover {
background-color: #f1f1f1
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
display: block;
border: none;
}
button:focus {
outline: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-12 navbar-0">
<div class="col-10 col-container col-center-block navbar-1">
<div class="colom col-3 home"><strong>HOME</strong></div>
<div class="colom col-3 dropdown aanbod">
<button onclick="myFunction()" class="dropbtn">ONS AANBOD</button>
<div id="myDropdown" class="dropdown-content col-12">
WebDesign
Retoucheren
</div>
</div>
<div class="colom col-3 dropdown2 portfolio">
<button onclick="myFunction2()" class="dropbtn2">PORTFOLIO</button>
<div id="myDropdown2" class="dropdown-content2 col-12">
Websites
Retoucheringen
</div>
</div>
<div class="colom col-3 dropdown spelers">
<button onclick="myFunction3()" class="dropbtn3">SPELERS</button>
<div id="myDropdown3" class="dropdown-content3 col-12">
A-Kern
B-Kern
</div>
</div>
<div class="colom col-3 contact"><strong>CONTACT</strong></div>
</div>
</div>
You are calling myFunction3 but not defined you have to create myFunction3 in
js.
function myFunction3() {
document.getElementById("myDropdown3").classList.toggle("show");
}
Appreciate if useful.
Your onClick buttons should be ...
<button onclick="myFunction('myDropdown')" class="dropbtn">ONS AANBOD</button>
<button onclick="myFunction('myDropdown2')" class="dropbtn">PORTFOLIO</button>
<button onclick="myFunction('myDropdown3')" class="dropbtn">SPELERS</button>
... and your function myFunction should look like this:
function myFunction(id) {
document.getElementById(id).classList.toggle("show");
}
I am currently creating my first website and I created a navigation bar. But I have noticed that there is some extra space on the right side of the bar. So when I highlight over the last thing on my bar there is a little bit of space that does not change colors (when I hover over things on the tab it changes the background color). So I was wondering if anyone has a solution to this problem?
ul.tab {
list-style-type: none;
margin: auto;
font-family: "CopperPlate", Times, serif;
padding-left: 0px;
padding-right: 0px;
overflow: hidden;
background-color: #1A1B1F;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.6);
opacity: .95;
width: 742px;
}
ul.tab li {
float: left;
padding: 0px;
}
ul.tab a {
display: block;
color: #E7E8EC;
text-align: center;
font-size: 16px;
padding: 16px 64px;
text-decoration: none;
transition: .3s;
}
.home:hover {
background-color: #0EB323;
}
.about:hover {
background-color: #0EB323;
}
.projects:hover {
background-color: #0EB323;
}
.contact:hover {
background-color: #0EB323;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgba(34, 43, 47, .8);
width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #0EB323}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE HTML>
<html>
<title> Website </title>
<head>
<link rel = "stylesheet" href = "CSScode.css">
<script src = "JavaScript.js"></script>
<style>
</style>
</head>
<body>
<ul class = "tab">
<li><a class = "home" href = "HomePage.html">Home</a></li>
<li><a class = "about" href = "#about"> About </a></li>
<li class = "dropdown">
<a class = "projects dropbtn"> Projects </a>
<div class = "dropdown-content">
Project 1
Project 2
Project 3
</div>
<li><a class = "contact" href = "ContactPage.html"> Contact </a></li>
</ul>
</body>
</html>
Give flexbox a try.
display: flex on the ul, and flex: 1 on the li:
To align the dropdown menu with the button, relative position the button, 100% width on the dropdown div, and remove overflow hidden from the ul
Also, you don't need to add left and right padding to the a elements because you display them as block.
ul.tab {
list-style-type: none;
margin: auto;
font-family: "CopperPlate", Times, serif;
padding-left: 0px;
padding-right: 0px;
/*overflow: hidden;*/
background-color: #1A1B1F;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.6);
opacity: .95;
width: 742px;
display: flex;
}
ul.tab li {
flex: 1;
/*float: left;*/
padding: 0px;
}
ul.tab a {
display: block;
color: #E7E8EC;
text-align: center;
font-size: 16px;
padding: 16px 0;
text-decoration: none;
transition: .3s;
}
.home:hover {
background-color: #0EB323;
}
.about:hover {
background-color: #0EB323;
}
.projects:hover {
background-color: #0EB323;
}
.contact:hover {
background-color: #0EB323;
}
li.dropdown {
display: inline-block;
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgba(34, 43, 47, .8);
width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 0;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #0EB323}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE HTML>
<html>
<title> Website </title>
<head>
<link rel = "stylesheet" href = "CSScode.css">
<script src = "JavaScript.js"></script>
<style>
</style>
</head>
<body>
<ul class = "tab">
<li><a class = "home" href = "HomePage.html">Home</a></li>
<li><a class = "about" href = "#about"> About </a></li>
<li class = "dropdown">
<a class = "projects dropbtn"> Projects </a>
<div class = "dropdown-content">
Project 1
Project 2
Project 3
</div>
<li><a class = "contact" href = "ContactPage.html"> Contact </a></li>
</ul>
</body>
</html>
You've set the width of your nav bar to 742px. The combined width of all your items (your li's) doesn't add up enough to fill the whole bar.
Try:
ul.tab li {
float: left;
padding: 0px;
width: 25%;
}
4 items at 25% total 100% of the container.
The width of the nav bar is greater than the width of then nav items. Unless you declare a hard width on the items that adds up to the same as the width of the nav bar, you shouldn't use a fixed width.
What I would do is change ul.tab to be display:inline-block; so that it will only take up as much space as needed and will shrink to match the size of it's direct descendents, and add text-align: center; to that element's parent (body in this case) to center the element.
Here's a demo - http://codepen.io/anon/pen/JEdywM
Your li elements all have dynamic widths which are rendered as float values for the pixels and eventually rounded to full pixels. That's where that margin comes from. To prevent that:
In the CSS rule for ul.tab remove the width setting alltogether and add display: inline-block;.
PLUS: Wrap the ul in a container div which has text-align: center:
(view the snippet in full page mode to see the result)
.listcontainer {
text-align: center;
}
ul.tab {
list-style-type: none;
margin: auto;
font-family: "CopperPlate", Times, serif;
padding-left: 0px;
padding-right: 0px;
overflow: hidden;
background-color: #1A1B1F;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.6);
opacity: .95;
display: inline-block;
}
ul.tab li {
float: left;
padding: 0px;
}
ul.tab a {
display: block;
color: #E7E8EC;
text-align: center;
font-size: 16px;
padding: 16px 64px;
text-decoration: none;
transition: .3s;
}
.home:hover {
background-color: #0EB323;
}
.about:hover {
background-color: #0EB323;
}
.projects:hover {
background-color: #0EB323;
}
.contact:hover {
background-color: #0EB323;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgba(34, 43, 47, .8);
width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #0EB323}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE HTML>
<html>
<title> Website </title>
<head>
<link rel = "stylesheet" href = "CSScode.css">
<script src = "JavaScript.js"></script>
<style>
</style>
</head>
<body>
<div class="listcontainer">
<ul class = "tab">
<li><a class = "home" href = "HomePage.html">Home</a></li>
<li><a class = "about" href = "#about"> About </a></li>
<li class = "dropdown">
<a class = "projects dropbtn"> Projects </a>
<div class = "dropdown-content">
Project 1
Project 2
Project 3
</div>
<li><a class = "contact" href = "ContactPage.html"> Contact </a></li>
</ul>
</div>
</body>
</html>
Try this, it may help.
*body {
overflow-x :hidden;
}