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>
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.
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>
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>
my name is Daniel and im working on my portfolio website. I want an overlay when i click on my hamburger menu so that everything becomes darker and the focus lays on the menu. And i want it to go away when you click on the menu again, or click on one of the menu items or click on the overlay self. (only for my mobile version)
Also i have weird border-line when i open my hamburger menu on mobile and i don't know how to remove it
Link to my website so far: http://20162.hosts.ma-cloud.nl/portfoliowebsite/
(the latest version isn't online yet)
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<meta name="author" content="Daniel Gotz">
<title>Daniel Gotz | Porfolio </title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href="css/scrolling-nav.css" rel="stylesheet">
<link href="dist/hamburgers.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Exo+2:600,900|Roboto" rel="stylesheet">
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation -->
<section id="intro" class="intro-section">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header page-scroll">
<button class="hamburger hamburger--spin navbar-toggle visible-xs" type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class=" hamburger-box">
<span class=" hamburger-inner"></span> </span>
</button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav right">
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li> <a class="page-scroll" href="#intro">Intro</a> </li>
<li> <a class="page-scroll" href="#mijnwerk">Mijn werk</a> </li>
<li> <a class="page-scroll" href="#overdaniel">Over Daniel</a> </li>
<li> <a class="page-scroll" href="#contact">Contact</a> </li>
</ul>
</div>
</nav>
<div class="overlay" id="overlay"></div>
<div class="title">
<h1> Every mountain top is within reach if you just keep climbing</h1> </div>
<div class="berg">
<img src="berg.svg">
</div>
</section>
<section id="mijnwerk" class="about-section"> </section>
<section id="overdaniel" class="services-section"> </section>
<section id="contact" class="contact-section"> </section>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
<script src="js/hamburgers.js"></script>
</body>
</html>
CSS:
.overflow {
overflow-x: hidden;
position: relative;
}
.home {
height: 100vh;
width: 100vw;
background-color: #2ecc71;
}
.mijnwerk {
height: 100vh;
width: 100vw;
background-color: #27ae60;
}
.navbar-default {
background: none;
border-color: transparent;
z-index: 3;
}
.right {
float: right;
text-align: right;
}
.navbar-default .navbar-nav>li>a {
font-family: 'Roboto', sans-serif;
color: #ecf0f1;
font-size: 14px;
}
.nav>li>a {
padding: 15px 25px;
border-style: none;
}
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
color: #ecf0f1;
border-style: none;
}
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
background: none
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-style: none;
}
h1 {
font-family: 'Exo 2' , sans-serif;
font-weight: 900;
font-size: 37px;
line-height: 60px;
}
.title {
font-family: 'Exo 2', sans-serif;
text-align: center;
width: 350px;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
.berg {
position: absolute;
width: 100%;
bottom: 0;
margin: 0 0 -2px 0;
}
.overlay {
position: fixed;
top: 0;
z-index: 2;
display: none;
overflow: auto;
width: 100%;
height: 100%;
background: #333;
}
body {
width: 100%;
height: 100%;
}
html {
width: 100%;
height: 100%;
}
#media(min-width:767px) {
.navbar {
}
.top-nav-collapse {
padding: 0;
}
}
.intro-section {
height: 100%;
background: #2ecc71;
color: white;
text-align: center;
}
.about-section {
height: 100%;
background: #27ae60;
}
.services-section {
height: 100%;
background: #3498db;
}
.contact-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #eee;
}
JS:
// Look for .hamburger
var hamburger = document.querySelector(".hamburger");
// On click
hamburger.addEventListener("click", function() {
// Toggle class "is-active"
hamburger.classList.toggle("is-active");
// Do something else, like open/close menu
});
I hope someone can help me out with these problems! :)
With this config you just pass background to the menu, and the close button will not be included and remove the border.
.navbar-collapse navbar-ex1-collapse collapse in {
background: rgba(27, 27, 62, 0.5);
}
.navbar-default {
background: none;
border: none;
z-index: 3;
}
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