I'm trying to toggle the display of ul element using an hamburger icon such that when I click on the icon the ul element is displayed or hidden
here is my code.
The ul element disappears real quick and does not stay longer . I want to to click the hamburger menu and display the ul element or hide them. Your help will be appreciated.
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <!--<![endif]-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Fashionation</title>
<meta name="description" content="">
<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">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
Brand Name
<ul id="list">
<li>Home</li>
<li>New Arrivals</li>
<li>Clothes</li>
<li>Sales</li>
<li>Stores</li>
<li>About</li>
<li>Contact</li>
</ul>
<i class="fa fa-bars fa-2x"></i>
</nav>
</header>
<script src="script.js"></script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style-type: none;
text-decoration: none;
}
body {
/* background-color: red; */
}
header {
height: 450px;
/* background-color: orangered; */
}
nav {
height: 50px;
background-color: #262626;
line-height: 50px;
position: relative;
}
nav ul {
/* background-color: orangered; */
margin-top: 10px;
margin-bottom: 10px;
/* display: none; */
}
nav ul li {
padding: 2px;
text-align: center;
}
a {
color: #C70D6C;
}
.menu {
color: #C70D6C;
position: absolute;
top: 6px;
right: 10px;
line-height: 50px;
display: none;
}
#media screen and (max-width: 767.98px) {
.menu {
display: inline-block;
}
}
JavaScript
function displayMenu() {
let list = document.getElementById('list');
if (list.style.display === "none") {
list.style.display = "block";
} else {
list.style.display = "none";
}
}
using this href="" causes the page to reload.
Use one of these solution.
<button class="menu" id="menu" onclick="displayMenu()">
<i class="fa fa-bars fa-2x"></i>
</button>
or
<a style="cursor: pointer" class="menu" id="menu" onclick="displayMenu()">
<i class="fa fa-bars fa-2x"></i>
</a>
In case u use the the second solution please move the inline
css to your css class "menu".
You shouldn't use a for this particular task. Use button instead. Replace the a with button and with the help of some styling you can achieve the exact same result
function displayMenu(e) {
let list = document.getElementById('list');
if (list.style.display === "none") {
list.style.display = "block";
} else {
list.style.display = "none";
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style-type: none;
text-decoration: none;
}
body {
/* background-color: red; */
}
header {
height: 450px;
/* background-color: orangered; */
}
nav {
height: 50px;
background-color: #262626;
line-height: 50px;
position: relative;
}
nav ul {
/* background-color: orangered; */
margin-top: 10px;
margin-bottom: 10px;
/* display: none; */
}
nav ul li {
padding: 2px;
text-align: center;
}
a {
color: #c70d6c;
}
.menu {
color: #c70d6c;
position: absolute;
top: 6px;
right: 10px;
height: 2rem;
width: 2rem;
background-color: #262626;
border: none;
}
#media screen and (max-width: 767.98px) {
.menu {
display: inline-block;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<header>
<nav>
Brand Name
<ul id="list">
<li>Home</li>
<li>New Arrivals</li>
<li>Clothes</li>
<li>Sales</li>
<li>Stores</li>
<li>About</li>
<li>Contact</li>
</ul>
<button class="menu" id="menu" onclick="displayMenu()"><i class="fa fa-bars fa-2x"></i></button>
</nav>
</header>
Related
I've been trying to make a drop-down menu for my e-commerce website for the user to find their favorite genre.
I used CSS and HTML to make the drop-down menu workable but it still not working, the drop-down menu's elements appear to be under the menu but it is just like a normal menu, not a drop-down.
Screenshot of the result:
My JS:
const search = () => {
const searchbox = document.getElementById("search-item").value.toUpperCase();
const storeitems = document.getElementById("game-list")
const product = document.querySelectorAll(".col-4")
const pname = storeitems.getElementsByTagName("h4")
for (var i = 0; i < pname.length; i++) {
let match = product[i].getElementsByTagName('h4')[0];
if (match) {
let textvalue = match.textContent || match.innerHTML
if (textvalue.toUpperCase().indexOf(searchbox) > -1) {
product[i].style.display = "";
} else {
product[i].style.display = "none";
}
}
}
}
/*----------SUB-MENU--------*/
nav ul li:hover{
background: #000;
border-radius: 3px;
}
.sub-menu-1{
display: block;
position: absolute;
background-color: var(--color-black);
}
.sub-menu-1 ul{
display: inline-block;
margin: 10px;
}
.sub-menu-1 ul li{
width: 150px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testing</title>
<link rel="stylesheet" href="Gamology.css">
<script src="app.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<style>
#import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
</style>
</head>
<body>
<div class="header">
<div class="container">
<div class="navbar">
<div class="logo">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Video_game_controller_icon_designed_by_Maico_Amorim.svg/2498px-Video_game_controller_icon_designed_by_Maico_Amorim.svg.png" width="200px">
</div>
<nav>
<ul id="MenuItems">
<li>Home</li>
<li>Games</li>
<div class="sub-menu-1">
<ul>
<li>Action</li>
<li>Shooting</li>
<li>Survival</li>
<li>Indie</li>
</ul>
</div>
<li>About</li>
<li>Contact</li>
<li>Account</li>
</ul>
</nav>
<img src="https://cdn-icons-png.flaticon.com/512/263/263142.png" width="30px" height="30px">
<img src="https://assets.stickpng.com/images/588a6507d06f6719692a2d15.png" class="menu-icon" onclick="menutoggle()">
</div>
You need to put button to hold your dropdown menu.
I don't know if this what you want. but try it.
.dropbtn {
color: blue;
font-size: 16px;
text-decoration: underline;
background: transparent;
outline: none;
border: none;
}
.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: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
<nav>
<ul id="MenuItems">
<li>Home</li>
<li>Games</li>
<li>
<div class="dropdown">
<button class="dropbtn">Sub-menu items</button>
<div class="dropdown-content">
Action
Shooting
Survival
Indie
</div>
</div>
</li>
<li>About</li>
<li>Contact</li>
<li>Account</li>
</ul>
</nav>
It works when you hover it, You can modify it if you want the click action.
currently i'm working on my portfolio website, i've created hamburger menu using Javascript and it works on my homepage, but when i created another page, i copied everything from <header>, but the humburger menu didn't work. I am sure that i already change the path of the file. Also i'm using sass. Is there anything i missed?
HomePage Header HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="../images/logo-yellow.png" type="image/x-icon">
<link href="/../fontawesome-free-5.15.4-web/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="../css/style.css">
<title>igeegi</title>
</head>
<body>
<header>
<nav>
<img src="./images/main-logo.png" alt="igeegi">
<div class="openMenu">
<i class="fa fa-bars"></i>
</div>
<ul class="mainMenu">
<li>Work</li>
<li>Résumé</li>
<li>About</li>
<li>Contact</li>
<div class="closeMenu">
<i class="fa fa-times"></i>
</div>
</ul>
</nav>
</header>
<script src="./app/app.js"></script>
</body>
</html>
Header style
header {
width: 100vw;
height: 80px;
background-color: white;
box-shadow: 0px 1px 5px rgba(51, 51, 51, 0.15);
position: fixed;
z-index:10000;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
margin-left: 20px;
margin-right: 20px;
.mainMenu {
display:flex;
}
}
nav .mainMenu li a {
display: inline-block;
color: $color-Dark;
padding: 30px;
font-size: 1.25rem;
font-weight: 400;
}
nav .mainMenu li a:hover {
color: #616161
}
nav .openMenu {
font-size: 30px;
color: $color-Dark;
margin: 10px;
display: none;
cursor: pointer;
}
nav .mainMenu .closeMenu, i {
font-size: 30px;
display: none;
cursor: pointer;
}
#media(max-width: 768px){
nav .mainMenu {
height: 100vh;
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 10;
flex-direction: column;
justify-content: center;
align-items: center;
background: $color-Yellow;
transition: top 1s ease;
display: none;
}
nav .mainMenu .closeMenu {
display: block;
position: absolute;
top: 20px;
right: 20px;
}
nav .openMenu {
display: block;
}
}
Hamburger menu Javascirpt
const mainMenu = document.querySelector('.mainMenu');
const closeMenu = document.querySelector('.closeMenu');
const openMenu = document.querySelector('.openMenu');
openMenu.addEventListener('click',show);
closeMenu.addEventListener('click',close);
function show(){
mainMenu.style.display = 'flex';
mainMenu.style.top = '0';
}
function close(){
mainMenu.style.top = '-120%';
}
Sub Page Header HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="../images/logo-yellow.png" type="image/x-icon">
<link href="/../fontawesome-free-5.15.4-web/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="../css/style.css">
<title>works</title>
</head>
<body>
<header>
<nav>
<img src="../images/main-logo.png" alt="igeegi">
<div class="openMenu">
<i class="fa fa-bars"></i>
</div>
<ul class="mainMenu">
<li>Work</li>
<li>Résumé</li>
<li>About</li>
<li>Contact</li>
<div class="closeMenu">
<i class="fa fa-times"></i>
</div>
</ul>
</nav>
</header>
<script src="../app/app.js"></script>
</body>
</html>
My problem is this. I have a fixed navigation bar and I have to change the list font color based on the background of the section under it. for example i have the first section background black and navbar font color is white when i scroll down and reach the second section which has a background color of black the navbar font color turns black .
here is the code
function parallax(element,distance,speed){
const item = document.querySelector(element);
item.style.transform = `translateY(${distance * speed}px)`;
}
window.addEventListener("scroll",function() {
parallax(".video",window.scrollY,1);
});
var vid = document.getElementById("specsVid");
vid.playbackRate = 1.7;
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: black;
font-family: 'Poppins', sans-serif;
}
section{
height:100vh ;
}
.homepage video{
height: 80vh;
position: absolute;
bottom: 0vh;
left: 30vh;
z-index: -3;
}
nav{
position: fixed;
z-index: 1;
}
li {
display: inline-block;
}
nav a {
color: white;
text-decoration: none;
font-size: 1.4rem;
margin-left: 10vh;
position: relative;
top: 5vh;
left: 55vh;
}
nav a:hover{
opacity: 0.8;
}
video::-webkit-media-controls {
display:none ;
}
.specs{
background: white;
}
.specsVid{
height: 80vh;
width: 90%;
position: relative;
top: 20%;
left: 5%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mohamed amine wannes project</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#700&display=swap" rel="stylesheet">
</head>
<body>
<section class="homepage" id="homepage">
<video class="video" id="myVideo" src="Video.mp4" muted autoplay ></video>
<nav>
<ul>
<li>Home</li>
<li>Specs</li>
<li>Models</li>
<li>Pricing</li>
</ul>
</nav>
</section>
<section class="specs" id="specs">
<video src="specs.mp4" class="specsVid" id="specsVid" autoplay muted></video>
<nav class="specsNav">
<ul>
<li>Home</li>
<li>Specs</li>
<li>Models</li>
<li>Pricing</li>
</ul>
</nav>
</section>
<script src="app.js"></script>
</body>
</html>
You can just style the class based on the sections offset to the viewport via JS:
document.onscroll = function() {
const specs = document.querySelector('#specs');
const nav = document.querySelector('nav');
if(specs.getBoundingClientRect().top <= 0) { // if the distance of the 'specs' section to the browser top is smaller than 0
nav.classList.add('dark'); // add dark font color
} else {
nav.classList.remove('dark'); // remove dark font color
}
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: black;
font-family: 'Poppins', sans-serif;
}
section{
height:100vh ;
}
nav{
position: fixed;
z-index: 1;
}
li {
display: inline-block;
}
nav a:hover{
opacity: 0.8;
}
video::-webkit-media-controls {
display:none ;
}
.specs{
background: white;
}
/* IMPORTANT CSS */
nav a {
color: white;
text-decoration: none;
font-size: 1.4rem;
margin-left: 10vh;
position: relative;
top: 5vh;
left: 55vh;
}
nav.dark a {
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mohamed amine wannes project</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#700&display=swap" rel="stylesheet">
</head>
<body>
<section class="homepage" id="homepage">
<nav>
<ul>
<li>Home</li>
<li>Specs</li>
<li>Models</li>
<li>Pricing</li>
</ul>
</nav>
</section>
<section class="specs" id="specs">
<nav class="specsNav">
<ul>
<li>Home</li>
<li>Specs</li>
<li>Models</li>
<li>Pricing</li>
</ul>
</nav>
</section>
<script src="app.js"></script>
</body>
</html>
Hi I've been trying to troubleshoot this on my own but I already spent too many hours trying to figure it out. I couldn't add the images because idk how to on here but if someone could help me please. Or at least guide me in the right direction. My main.js is in a folder called js. My styles.css and html don't have folders but they seem to be working fine cause I know that matters as well.
function menuToggle() {
var MenuItems = document.getElementById("MenuItems");
MenuItems.style.maxHeight = "0px";
if (MenuItems.style.maxHeight == "0px") {
MenuItems.style.maxHeight = "200px";
} else {
MenuItems.style.maxHeight = "0px";
}
}
.menu-icon {
width: 28px;
margin-left: 20px;
display: none;
}
/*--- media query for menu ---*/
#media only screen and (max-width: 800px) {
nav ul {
position: absolute;
top: 70px;
left: 0;
background: #333;
width: 100%;
overflow: hidden;
transition: max-height 0.5s;
}
nav ul li {
display: block;
margin-right: 50px;
margin-top: 10px;
margin-bottom: 10px;
}
nav ul li a {
color: #fff;
}
.menu-icon {
display: block;
cursor: pointer;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gucci</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Assistant:wght#200;800&display=swap" rel="stylesheet">
<script src="js/main.js"></script>
</head>
<body>
<div class="header">
<div class="container">
<div class="navbar">
<div class="logo">
<img src="images/logogucci.png" width="125px">
</div>
<nav>
<ul id="MenuItems">
<li>Home</li>
<li>Products</li>
<li>About</li>
<li>Contact</li>
<li>Account</li>
</ul>
</nav>
<img src="images/carticon.png" width="30px" height="30px">
<img src="images/hamburger-menu-icon-transparent-1.jpg" class="menu-icon" onclick="menuToggle()">
</div>
The problem with your toggle function is that you're setting the height to 0px every time you toggle
You need to remove this line:
MenuItems.style.maxHeight = "0px";
function menuToggle() {
var MenuItems = document.getElementById("MenuItems");
if (MenuItems.style.maxHeight == "0px") {
MenuItems.style.maxHeight = "200px";
} else {
MenuItems.style.maxHeight = "0px";
}
}
.menu-icon {
width: 28px;
margin-left: 20px;
display: none;
}
/*--- media query for menu ---*/
#media only screen and (max-width: 800px) {
nav ul {
position: absolute;
top: 70px;
left: 0;
background: #333;
width: 100%;
overflow: hidden;
transition: max-height 0.5s;
}
nav ul li {
display: block;
margin-right: 50px;
margin-top: 10px;
margin-bottom: 10px;
}
nav ul li a {
color: #fff;
}
.menu-icon {
display: block;
cursor: pointer;
}
}
<div class="header">
<div class="container">
<div class="navbar">
<div class="logo">
<img src="images/logogucci.png" width="125px">
</div>
<nav>
<ul id="MenuItems">
<li>Home</li>
<li>Products</li>
<li>About</li>
<li>Contact</li>
<li>Account</li>
</ul>
</nav>
<img src="images/carticon.png" width="30px" height="30px">
<img src="images/hamburger-menu-icon-transparent-1.jpg" class="menu-icon" onclick="menuToggle()">
So, I can run this on Firefox and it works just fine. But when running this on Chrome, I'm getting a loading icon which keeps just 'loading'.
Like this: http://prntscr.com/8erab4
On Firefox the result is just great, example: http://weveloped.com/app
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>HorizonApp</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="custom.css" />
</head>
<body>
<!--Welcoming Page-->
<div data-role="page" id="homepage">
<div data-role="header" class="header">
<i class="fa fa-bars left"></i>
<h1>Horizon GPD</h1>
<i class="fa fa-home right"></i>
</div>
<div data-role="main" class="ui-content">
<div data-role="panel" data-position="left" data-display="overlay" id="panel">
<div class="sideMenu">
<ul>
<li class="navTitle">Tijden</li>
<li>van 09:00 tot 11:00</li>
<li>van 11:30 tot 13:00</li>
<li>van 13:30 tot 15:00</li>
</ul>
</div>
</div>
<div class="content">
</div>
</div>
</div>
</body>
</html>
CSS CODE:
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);
body {
font-family: 'Open Sans', sans serif;
}
/* Header */
.header {
height: 40px;
border: none;
}
.ui-page .ui-header {
background-color: #013378;
color: #FFF;
text-shadow: none;
}
.header a i {
font-size: 24px;
color: #FC7C00;
margin-top: 5px;
}
.header a i.left {
margin-left: 5px;
}
.header a i.right {
margin-right: 5px;
}
.header a:hover > i {
color: #FFF;
}
/* Side Menu */
.sideMenu, .sideMenu ul {
padding: 0; margin: 0;
text-shadow: none;
}
.sideMenu ul {
list-style-type: none;
position: relative;
}
.sideMenu ul li.navTitle {
height: 40px; line-height: 40px;
background-color: #FC7C00;
color: #FFF;
font-weight:700;
text-align: center;
}
.sideMenu ul li {
display: block;
}
.sideMenu ul li a {
height: 40px; line-height: 40px;
padding-left: 10px;
color: #222;
text-decoration: none;
display: block;
}
.sideMenu ul li a:hover {
color: #FFF;
background-color: rgba(1, 51, 120, 0.8);
}
.ui-panel-inner {
padding: 0; margin: 0;
}
Install WampServer on your computer, copy the folder of your project in c:\wamp\www\ , turn on the local server and run your jQuery Mobile page (localhost/folder-of-your-project/jquery-mobile-page).
You need a local server to run any jquery mobile page in Chrome
Regards