I have successfully created a responsive Navigation bar but made the drop down menu as-well but when there is A div the drop down menu go under the content any one know what can I do please thanks.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Mac gallery</title>
<link rel="stylesheet" type="text/css" href="css/nav.css">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<link rel="stylesheet" type="text/css" href="css/gallerystyles.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="js/nav.js"></script>
<script src="js/javascript.js"></script>
<script src="js/footer.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="js/galleria/galleria-1.5.7.min.js"></script>
<style>
.galleria{ max-width: 700px; height: 400px; background: #000 }
</style>
<script>
(function() {
Galleria.loadTheme('js/galleria/themes/classic/galleria.classic.min.js');
Galleria.run('.galleria');
}());
</script>
</head>
<body onload="time()">
<nav>
<ul class="topnav" id="myTopnav">
<li>Home</li>
<div class="dropdown">
<li class="dropbtn" onclick="myFunction1()">Gallerys</li>
<div class="dropdown-content" id="myDropdown">
<li>Iphone Gallery</li>
<li>Mac Gallery</li>
<li>Ipad Gallery</li>
</div>
</div>
<li>Contact US</li>
<li>☰</li>
</ul>
</nav>
<div class="galleria">
<img src="img/macgallery/Imac.jpg">
<img src="img/macgallery/macbook.png">
<img src="img/macgallery/macbookpro.jpg">
<img src="img/macgallery/macmini.jpg">
</div>
<footer>
<p>Develop and maintain by Alastair Micallef (<span id="date"></span>)</p>
<ul class="footernav">
<li>Home</li>
<li>Gallery</li>
<li>Iphone gallery</li>
<li>Mac gallery</li>
<li>Ipad gallery</li>
<li>Iphone History</li>
<li>Mac Hostory</li>
<li>Ipod Histry</li>
</ul>
</footer>
</body>
</html>
CSS
/* 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;
}
.dropdown {
float: left;
overflow: hidden;
position: absolute;
}
.dropdown .dropbtn {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
display: none;
}
.container a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.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;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
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;
}
}
li{
list-style: none;
}
put all your code to website. provided code isn't suffiecient
Related
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>
been trying to do a Nav bar, though through live stream it the #.media command does not effect my coding, no idea why. it should just keep a home sign in mobile state, though it does not effect it all. using chrome browsers, Brackets.
help me please.
----------------------------------------------------------------------- css stylesheet
/*#################Defults############*/
nav,
header,
footer {
display: block;
}
body {
line-height: 1;
margin: 0;
}
/*################Nav Bar##################*/
nav {
width: 100%;
margin: 0;
}
nav ul {
background-color: #eee;
overflow: hidden;
margin: 0;
padding: 0;
}
ul.topnav li {
list-style: none;
float: left;
}
ul.topnav li.topnav-right {
float: right;
}
ul.topnav li a {
display: block;
text-decoration: none;
min-height: 16px;
text-align: center;
padding: 14px;
text-transform: uppercase;
color: #666;
}
ul.topnav li a:hover {
background-color: #0080ff;
color: #fff;
}
ul.topnav li.dropdownIcon {
display: none;
}
/*################# mobile #############*/
u/media screen and (max-width: 680px) {
ul.topnav li:not(:nth-child(1)) {
display: none;
}
}
<!doctype html>
<html lang="en">
<head>
<title> MY CSS website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul class="topnav">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="topnav-right">Sign Up</li>
<li class="topnav-right">Sign In</li>
<li class="dropdownIcon"><a href="">\☰
</a></li>
</ul>
</nav>
</body>
</html>
Seems to work fine for me. Try this code and you should also include <meta name="viewport" content="width=device-width, initial-scale=1.0"> in your head
----------------------------------------------------------------------- css stylesheet
/*#################Defults############*/
nav,
header,
footer {
display: block;
}
body {
line-height: 1;
margin: 0;
}
/*################Nav Bar##################*/
nav {
width: 100%;
margin: 0;
}
nav ul {
background-color: #eee;
overflow: hidden;
margin: 0;
padding: 0;
}
ul.topnav li {
list-style: none;
float: left;
}
ul.topnav li.topnav-right {
float: right;
}
ul.topnav li a {
display: block;
text-decoration: none;
min-height: 16px;
text-align: center;
padding: 14px;
text-transform: uppercase;
color: #666;
}
ul.topnav li a:hover {
background-color: #0080ff;
color: #fff;
}
ul.topnav li.dropdownIcon {
display: none;
}
/*################# mobile #############*/
#media screen and (max-width: 680px) {
ul.topnav li:not(:nth-child(1)) {
display: none;
}
}
<!doctype html>
<html lang="en">
<head>
<title> MY CSS website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul class="topnav">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="topnav-right">Sign Up</li>
<li class="topnav-right">Sign In</li>
<li class="dropdownIcon"><a href="">\☰
</a></li>
</ul>
</nav>
</body>
</html>
I've been trying to make my nav (including the "works" dropdown button) responsive by making them appear through the usual three parallel lines on the top right margin that would then display what I've written on the nav bar when clicked from a mobile.
I've been trying for about two hours without a decent result.
I'm pretty sure it's not the hardest thing but I can't seem to get it right. Would love to understand how it works. Here's the desktop size, non-responsive navbar.
Here's the html:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AURORA CATERA -- 2020 ALL RIGHT RESERVED</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="css/font-awesome.min.css" rel="stylesheet"/>
<link rel='icon' href='FAVICON.jpg' type='image/x-icon'/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="wrapper">
<div class="header">
<img src="img/AURORA-YLOW-FIN.png" alt="logo"></div>
<div class="menu">
<ul>
<li>ALL</li>
<div class="dropdown">
<button class="dropbtn">STUFF ▾</button>
<div class="dropdown-content">
PHOTOS
VIDEOS
POSTERS
</div>
</div>
<li>ABOUT</li>
<li>CONTACT</li>
<li><i class="fa fa-instagram"></li></i>
</ul>
</div>
</body>
</html>
and here is the CSS:
.wrapper{
width: 100%;
}
body{
margin: 0;
padding: 0;
background-color: black;
}
.header{
padding: 5px 0px;
display: inline-block;
width: 100%;
}
.header img{
max-height: 400px;
max-width: 550px;
margin-left: 60px;
margin-top: 30px;
}
.menu{
float: right;
position: relative;
display: inline-block;
top: -85px;
left: 0px;
margin-right: 70px;
}
.menu ul li{
display: inline-block;
float: left;
line-height: 28px;
margin-top: 10px;
}
.menu ul li a{
text-decoration: none;
color:#F8E315;
font-family: Rajdhani, "sanf serif";
font-size: 15px;
padding: 5px 10px;
}
.menu ul li a:hover{
color:#C7C7C7;
}
.dropbtn {
background-color: black;
color: #F8E315;
padding: 14px;
font-family: Rajdhani, "sans-serif";
font-size: 15px;
border: none;
}
.dropbtn:hover{
color: #c7c7c7;
}
.dropdown {
position: relative;
display: inline-block;
float: left;
}
.dropdown-content {
display: none;
position: absolute;
background-color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: #F8E315;
font-family: Rajdhani, "sans-serif";
font-size: 15px;
padding: 5px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: black;
color: #c7c7c7;
}
.dropdown:hover .dropdown-content {
display: block;
}
A basic burger-menu can be achieved by doing the following steps:
1) Create a with the class of burger-menu as a previous sibling element of the navigation you want to hide on mobile screen width.
a) You dont want this to show on your desktop medias, so in the css, style it as display: none;
2) Create a media query for the desired device. Let's say 480px for a mobile device.
3) Within this media query, style the navigation that you want to appear on hover (or click) as display: none;
4) Within this media query, style your burger-menu. In my example, I've styled something very basic, for time reasons, but you can research using spans to make a responsive burger menu.
5) Within this media query, declare an on hover pseudo-class for your burger-menu which accesses the hidden navigation. Since you placed the burger-menu as a the previous sibling element of your navigation, you can use the + css rule to target it like so
.burger-menu:hover + .menu {
}
This means that, when you hover over the burger-menu, you will affect the css of .menu. You can place how .menu's styles will be affected in the above CSS selector.
Here is a basic example of how this process works with your code.
Add this to your html, before your .menu <div>
<div class="burger-menu"></div>
<div class="menu">
Add this to your css file, at the bottom
.burger-menu {
display: none;
}
#media (max-width: 480px) {
.menu {
display: none;
}
.burger-menu {
display: block;
background-color: white;
height: 30px;
width: 30px;
position: fixed;
top: 10px;
right: 10px;
}
.burger-menu:hover + .menu {
display: block;
}
}
Typically, you would advance this by using toggleClass with JQuery to add and remove display to your navigation menu on clicking the burger menu.
P.s the benefit of using spans to create your burger-menu will be when you want it to have nice animation, changing from a burger menu to a cross, or arrow, etc.
here is a solution with a responsive menu list. Now you should add this menu list to your project.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
body {margin:0;font-family:Arial}
.topnav {
overflow: hidden;
background-color: #333;
}
.menu li{
display: inline-block;
float: left;
line-height: 28px;
margin-top: 10px;
}
.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, li {
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;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<!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">
<div class="topnav" id="myTopnav">
ALL
<div class="dropdown">
<button class="dropbtn">STUFF ▾</button>
<div class="dropdown-content">
PHOTOS
VIDEOS
POSTERS
</div>
</div>
ABOUT
CONTACT
<a href="https://www.instagram.com/auroracatera" target="_blank"> <i class="fa fa-instagram"></i>
</a>
☰
</div>
I hope you can do something with it and add it to your project ...
I am following this tutorial EDIT: changed link to specific time of video https://www.youtube.com/watch?v=XZsuI5wyRzs&feature=youtu.be&t=560 on how to make a responsive nagivation bar before I dive into the main content.
For some reason at this part of the timeline here (I saved the link to current time so you can see what I'm talking about without having to skim through the video) I followed the steps exactly, but my hamburger icon is not being activated when it is clicked in order to bring down the drop-down menu. Other than that, everything else looks pretty good. What is wrong with my code? Please take a look at it below.
Thanks
/*CSS Page*/
/*-----HTML Body-----*/
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
/*----End HTML Body-----*/
/*-----Start of Navigation Bar-----*/
nav {
width: 100%;
background: #8000ff;
}
ul {
width: 50%;
margin: 0 auto;
padding: 0;
}
ul li {
list-style: none;
display: inline-block;
padding: 20px;
}
/*For mouse hover*/
ul li:hover {
background: #4dff4d;
}
/*Smartphone/Tablet: Menu Bar*/
.toggle {
width: 100%;
padding: 10px 20px;
background: #cc66ff;
text-align: right;
box-sizing: border-box;
color: #000000;
font-size: 30px;
display: none;
}
/*-----End of Navigation Bar-----*/
/* Media Queries for Smaller Screen Size Begins */
#media (max-width: 786px) {
.toggle {
display: block;
}
/* Navigation Drop down */
ul {
width: 100%;
display: none;
}
/* End Navigation Drop Down */
ul li {
display: block;
text-align: center;
}
.active {
display: block;
}
}
/* Media Queries for Smaller Screen Size Ends */
<!DOCTYPE html>
<!--HTML Page-->
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<title>test</title>
</head>
<link rel="stylesheet" href="css/style.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<body>
<nav>
<div class="toggle">
<i class="fa fa-bars menu" aria-hidden="true"></i>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>
<script src="https:////code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready() {
$('menu').click(function() {
$('ul').toggleClass('active')
})
})
</script>
</body>
</html>
2 issues...
Missing callback function on the ready event...
$(document).ready()
Need to be this...
$(document).ready(function () {
You're missing the '.' in front of 'menu' class selector...
$('menu')
Needs to be like this...
$('.menu')
Working example below...
/*CSS Page*/
/*-----HTML Body-----*/
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
/*----End HTML Body-----*/
/*-----Start of Navigation Bar-----*/
nav {
width: 100%;
background: #8000ff;
}
ul {
width: 50%;
margin: 0 auto;
padding: 0;
}
ul li {
list-style: none;
display: inline-block;
padding: 20px;
}
/*For mouse hover*/
ul li:hover {
background: #4dff4d;
}
/*Smartphone/Tablet: Menu Bar*/
.toggle {
width: 100%;
padding: 10px 20px;
background: #cc66ff;
text-align: right;
box-sizing: border-box;
color: #000000;
font-size: 30px;
display: none;
}
/*-----End of Navigation Bar-----*/
/* Media Queries for Smaller Screen Size Begins */
#media (max-width: 786px) {
.toggle {
display: block;
}
/* Navigation Drop down */
ul {
width: 100%;
/* display: none; */
display: block;
height:0px;
transition: height 0.5s linear;
overflow: hidden;
}
/* End Navigation Drop Down */
ul li {
display: block;
text-align: center;
}
.active {
/* display: block; */
height: 300px;
}
}
/* Media Queries for Smaller Screen Size Ends */
<!DOCTYPE html>
<!--HTML Page-->
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<title>test</title>
</head>
<!-- <link rel="stylesheet" href="css/style.css"> -->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<body>
<nav>
<div class="toggle">
<i class="fa fa-bars menu" aria-hidden="true"></i>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>
<script src="https:////code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.menu').click(function() {
$('ul').toggleClass('active')
})
})
</script>
</body>
</html>
this is my first post. Hope I'm specific enough to get some help :)
I created a dropdown menu in my navigation bar for my clanwebsite. But I can't change the css in a way that it would be the same as my other titles from the navigation bar.
Also when I go over it with my cursor, the login button is being moved. And the css of my navigation is different when I go to the Main team page in the dropdown menu.
Thanks!
NOTE don't mind the php. Still working on that.
my HTML of the home page
<html>
<head>
<link rel="stylesheet" href="Opmaak.css">
<title>WKG</title>
</head>
<body>
<ul>
<li>Home</li>
<li>Line-ups</li>
<li><div class="dropdown">
<button class="dropbtn">Teams</button>
<div class="dropdown-content">
Main Team
Team 2
</div>
<li>Matchen</li>
<li>About</li>
<li>Games</li>
</ul>
</body>
</html
my CSS
p {
font-size: 20px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: visible;
background-color: #444;
}
li {
float: left;
box-shadow: 15px 15px 50px #888888;
font-size: 20px;
}
li a {
display: block;
color: darkgray;
text-align: center;
padding: 20px 50px;
text-decoration: inherit;
box-shadow: 3px 3px 3px crimson;
border-color: crimson;
position: relative;
display: inline-block;
}
.dropdown-content a {
display: block;
background-color: slategray;
}
.dropdown-content {
display: none;
position: inherit;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropbtn {
overflow: hidden;
background-color: slategray;
color: darkgray;
text-align: center;
padding: 20px 50px;
text-decoration: inherit;
box-shadow: 3px 3px 3px crimson;
border-color: crimson;
font-size: 20px;
position: relative;
display: inline-block;
}
. dropbtn:hover {
background-color: crimson;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: crimson;
padding: 20px 50px;
}
and my Main Team page
<html>
<head>
<link rel="stylesheet" href="Opmaak.css">
<title>WKG</title>
</head>
<body>
<ul>
<li>Home</li>
<li>Line-ups</li>
<div class="dropdown">
<button class="dropbtn">Teams</button>
<div class="dropdown-content">
Main Team
Team 2
</div>
<li>Matchen</li>
<li>About</li>
<li>Games</li>
</ul>
</body>
</html