Hamburger menu - why is my code not working? - javascript

I'm trying to do a simple hamburger menu using jQuery or JS (I'm easy either way) but my code simply won't work and I can't for the life of me work out why.
It's structured as hamburger top left, logo in the middle then a profile and basket top right.
At the moment all I'm trying to do is literally get the nav list to appear on click and then I can style it however. I'm trying to do this using the .hidden class to display the nav as block when the burger is clicked.
Here's the code:
HTML:
<section class="header-section">
<div class="header-container">
<div class="header-content">
<div class="hamburger-container">
<i id="burger" class="fas fa-bars fa-2x"></i>
</div>
<div class="header-logo-container">
<h2>Logo goes here</h2>
</div>
<div class="header-profile-and-signin">
<i class="fas fa-user-circle fa-2x"></i>
<i class="fas fa-suitcase-rolling fa-2x"></i>
</div>
<ul id="nav">
<li>
Holidays
</li>
<li>
Sign In / Register
</li>
</ul>
</div>
</div>
</section>
CSS:
body {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header-section {
height: 100px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #999;
}
.header-container {
height: 100%;
width: 90%;
display: flex;
align-items: center;
justify-content: center;
background-color: blue;
}
.header-content {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: yellow;
}
.hamburger-container {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
background-color: red;
}
.hamburger-container i {
margin-left: 20px;
}
.header-logo-container {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: center;
background-color: green;
}
.header-profile-and-signin {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: space-around;
}
#nav {
list-style: none;
display: none;
}
.hidden {
display: block;
}
#burger {
cursor: pointer;
}
jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("burger").click(function() {
$("nav").toggleClass("hidden");
});
</script>
Any help would be really appreciated. Thank you.

There's at least three issues in your code:
$('burger') needs to be $('#burger') to include the id selector prefix
Similarly, $('nav') needs to be $('#nav')
.hidden in your CSS needs to be #nav.hidden so that it's specific enough to override the default style. I'd also suggest changing it to .visible to match its purpose, but that's purely a semantics issue.
The other possible issue is that you may need to add a document.ready event handler to your JS logic, depending on where you've placed it in the page. This will ensure the jQuery code executes after the DOM has been fully loaded.
jQuery(function($) {
$("#burger").click(function() {
$("#nav").toggleClass("hidden");
});
});
body {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header-section {
height: 100px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #999;
}
.header-container {
height: 100%;
width: 90%;
display: flex;
align-items: center;
justify-content: center;
background-color: blue;
}
.header-content {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: yellow;
}
.hamburger-container {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
background-color: red;
}
.hamburger-container i {
margin-left: 20px;
}
.header-logo-container {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: center;
background-color: green;
}
.header-profile-and-signin {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: space-around;
}
#nav {
list-style: none;
display: none;
}
#nav.hidden {
display: block;
}
#burger {
cursor: pointer;
}
<section class="header-section">
<div class="header-container">
<div class="header-content">
<div class="hamburger-container">
<i id="burger" class="fas fa-bars fa-2x">Burger</i>
</div>
<div class="header-logo-container">
<h2>Logo goes here</h2>
</div>
<div class="header-profile-and-signin">
<i class="fas fa-user-circle fa-2x"></i>
<i class="fas fa-suitcase-rolling fa-2x"></i>
</div>
<ul id="nav">
<li>
Holidays
</li>
<li>
Sign In / Register
</li>
</ul>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Related

How can I position my autocomplete box under the search box?

Hello I'm trying to create a custom suggestion box for search box. The parent div is flex box and suggestion box is positioned absolute. but the top and left property of css. It is taking of global page and not parent.
.header ul {
list-style-type: none;
overflow: hidden;
display: flex;
width: 100%;
justify-content: flex-end;
margin-right: 25px;
}
.header li {
float: right;
}
.header li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.header{
display: flex;
background-color: #333;
}
.suggesetionbox {
position: absolute;
top: 50px;
width: 150px;
background-color: #fff;
border: 1px solid;
}
.SearchContainer {
width: 100%;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
input{
border-radius: 10px;
}
<div class="header">
<h1>logo</h1>
<ul>
<li>
<div class="SearchContainer">
<input placeholder="Search" class="search" type="text">
<div class="suggesetionbox">
<p>item1</p><p>item2</p>
</div>
</div>
</li>
<li>
Home
</li>
<li> Login</li>
</ul>
</div>
You can see in css "suggesetionbox" the top property is targeting complete page not parent div.
Can someone suggest how can I append the div correctly under search box.
Thanks
EDIT: First, add position: relative to your .SearchContainer. This makes sure that the dropdown is set on the searchcontainer and not on the whole page. Then, the overflow: hidden needs to be removed from .header ul in order to see the whole dropdown.
Remove the display flex on your suggestionbox class. You can fix the alignment of the options in your topbar with the flex box in your .header ul
.header ul {
list-style-type: none;
display: flex;
width: 100%;
justify-content: flex-end;
margin-right: 25px;
align-items: center;
}
.header li {
float: right;
}
.header li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.header{
display: flex;
background-color: #333;
}
.suggesetionbox {
position: absolute;
width: 150px;
background-color: #fff;
border: 1px solid;
}
.SearchContainer {
width: 100%;
position: relative;
}
<div class="header">
<h1>logo</h1>
<ul>
<li>
<div class="SearchContainer">
<input placeholder="Search" class="search" type="text">
<div class="suggesetionbox">
<p>item1</p><p>item2</p>
</div>
</div>
</li>
<li>
Home
</li>
<li> Login</li>
</ul>
</div>
.SearchContainer {
position: relative;
...
}
.suggesetionbox {
position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
height: 100%;
/*position the autocomplete items to be the same width as the container:*/
top: 100%;
left: 0;
right: 0;
}
.SearchContainer {
position: relative;
display: inline-block;
}

How can I show second header when scroll down 60px?

.nav-header2{
background: purple;
display: flex;
justify-content: center;
align-items: center;
}
.header2-container{
width: 68vw;
height: 60px;
padding: 0 2vh;
border: 1px solid red;
border-radius: 0.5rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-header1{
background: lightblue;
display: flex;
justify-content: center;
align-items: center;
}
.header1-container{
width: 68vw;
height: 60px;
padding: 0 2vh;
border: 1px solid blue;
border-radius: 0.5rem;
display: flex;
justify-content: space-between;
align-items: center;
}
<!--header2 -->
<nav class="nav-header2">
<div class="header2-container">
<h1>header2<h2>
</div>
</nav>
<!-- header1 -->
<nav class="nav-header1">
<div class="header1-container">
<h1>header1<h2>
</div>
</nav>
I have two headers for my web page. I named header1 and header2.
I want to show header2 when scrolling down bigger than 60px and hide when scrolling is smaller than 60px.
if (scroll down bigger than 60px){
show header2
}else{
still show header1
}
I have tried many time, But I can't succeed.
Please help
Thank you so much!
Please check the code below when you scroll 60px and more the header 1 disappear and header 2 appear
window.addEventListener("scroll", () => {
if (scrollY >= 60) {
document.querySelector(".headerOne").style.display = "none";
document.querySelector(".headerTwo").style.display = "block";
} else {
document.querySelector(".headerTwo").style.display = "none";
document.querySelector(".headerOne").style.display = "block";
}
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
section {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-size: 60px;
background-color: gray;
}
.headerOne,
.headerTwo {
position: fixed;
top: 0;
left: 0;
background-color: white;
width: 100%;
font-size: 20px;
text-align: center;
height: 60px;
}
.headerTwo {
display: none;
}
<div class="headerOne">header 1</div>
<div class="headerTwo">header 2</div>
<section>section</section>
<section>section</section>

fix uneven spacing between list items css

This is the first time I am trying to make a website and the links in my nav bar are not spaced evenly. Is there a way to rewrite the code to properly space it or are there any CSS properties I can add to help
here is what the navbar links look like
CSS code:
.navbar {
background: #131313;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 999;
}
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 2000px;
margin: 0 auto;
padding: 0 50px;
}
.navbar__menu {
display: flex;
align-items: center;
list-style: none;
}
.navbar__item {
height: 100px;
}
.navbar__links {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
width: 125px;
text-decoration: none;
height: 100%;
transition: all 0.3s ease;
}
HTML:
<ul class="navbar__menu">
<li class="navbar__item">
Home
</li>
<li class="navbar__item">
New Releases
</li>
<li class="navbar__item">
<a href="#clothing" class="navbar__links" id="clothing-page"
>Clothing</a>
</li>
<li class="navbar__btn">
Sign Up
</li>
</ul>
Use justify-contents: space-around; instead.
Remove the width:125px from the <li> tag, then use justify-contents: space-around to the parent tag.
HTML:
<ul class="navbar">
<li><a>Home</a></li>
<li><a>New Release</a></li>
<li><a>Clothing</a></li>
<li><a>Our Story</a></li>
</ul>
CSS:
.navbar {
background-color: #131313;
color: white;
height: 80px;
display: flex;
align-items: center;
justify-content: space-around;
}
.navbar li {
list-style-type:none;
}

Can I do a wipe transition using CSS?

I have the following snippet of example code (I am using React but do not feel like spending time sanitising the actual project code before posting that here):
let menuOpened = false;
document.getElementById('menu-button')
.addEventListener('click', function() {
menuOpened = !menuOpened;
document.getElementById('body').classList.toggle('menu-opened', menuOpened);
document.getElementById('menu').classList.toggle('menu-opened', menuOpened);
});
* {
box-sizing: border-box;
}
body {
margin: 0;
}
body.menu-opened {
overflow-y: hidden;
}
body > * {
width: 100vw;
}
header {
background-color: #6FC5C2;
display: flex;
height: 20vh;
position: sticky;
top: 0;
align-items: center;
justify-content: center;
}
nav {
background-color: #80CAF1;
display: flex;
height: 80vh;
left: 0;
opacity: 0;
padding: 1rem;
position: fixed;
top: 20vh;
transition: all 0.35s ease;
visibility: hidden;
z-index: 20;
align-items: center;
flex-direction: column;
justify-content: center;
}
nav.menu-opened {
opacity: 1;
visibility: visible;
}
a {
color: black;
font-weight: bold;
text-decoration: none;
}
a:not(:last-child) {
margin-bottom: 0.5rem;
}
main {
display: flex;
}
aside {
background-color: #9C9ECF;
display: flex;
flex-basis: 25%;
padding: 3rem 0.5rem;
text-align: center;
justify-content: center;
}
section {
background-color: #F8CFD7;
display: flex;
flex-basis: 75%;
padding: 2rem;
align-items: stretch;
flex-direction: column;
}
article {
border: ridge #80CAF1;
border-width: 3px 3px 0 3px;
display: flex;
font-size: 0.75rem;
min-height: 15vh;
padding: 1rem;
align-items: center;
}
article:last-child {
border-width: 3px;
}
footer {
background-color: #016CBA;
height: 30vh;
}
<body id="body">
<header>
<button id="menu-button" type="button">Menu</button>
</header>
<nav id="menu">
Link 1
Link 2
</nav>
<main id="main">
<aside>Filter Form</aside>
<section>
<article>Article A</article>
<article>Article B</article>
<article>Article C</article>
<article>Article D</article>
<article>Article E</article>
<article>Article F</article>
<article>Article G</article>
<article>Article H</article>
<article>Article I</article>
</section>
</main>
<footer id="footer"></footer>
</body>
Currently, when I click the button to open the navigation menu, the page will disable scrolling and the menu will fade in. When I click the button again, scrolling will be re-enabled and the menu will fade out.
What I actually want is a wipe transition instead of fading, like so:
Using the above image as an analogy, the main page content would be A, and the menu would be B. However, instead of horizontal I want the wipe to be vertical i.e. when I open the menu, the wipe will go from top to bottom, and when I close the menu, the wipe will go from bottom to top. The menu text should not be moving. I want to use the same transition duration and timing function as currently configured.
Is this possible without using JavaScript/React?
Another idea using clip-path
let menuOpened = false;
document.getElementById('menu-button')
.addEventListener('click', function() {
menuOpened = !menuOpened;
document.getElementById('body').classList.toggle('menu-opened', menuOpened);
document.getElementById('menu').classList.toggle('menu-opened', menuOpened);
});
* {
box-sizing: border-box;
}
body {
margin: 0;
}
body.menu-opened {
overflow-y: hidden;
}
body > * {
width: 100vw;
}
header {
background-color: #6FC5C2;
display: flex;
height: 20vh;
position: sticky;
top: 0;
align-items: center;
justify-content: center;
}
nav {
background-color: #80CAF1;
display: flex;
height: 80vh;
left: 0;
padding: 1rem;
position: fixed;
top: 20vh;
transition: all 0.8s ease;
z-index: 20;
align-items: center;
flex-direction: column;
justify-content: center;
clip-path:polygon(0 0,0% 0,-200px 100%,0 100%);
}
nav.menu-opened {
clip-path:polygon(0 0,calc(100% + 200px) 0,100% 100%,0 100%);
}
a {
color: black;
font-weight: bold;
text-decoration: none;
}
a:not(:last-child) {
margin-bottom: 0.5rem;
}
main {
display: flex;
}
aside {
background-color: #9C9ECF;
display: flex;
flex-basis: 25%;
padding: 3rem 0.5rem;
text-align: center;
justify-content: center;
}
section {
background-color: #F8CFD7;
display: flex;
flex-basis: 75%;
padding: 2rem;
align-items: stretch;
flex-direction: column;
}
article {
border: ridge #80CAF1;
border-width: 3px 3px 0 3px;
display: flex;
font-size: 0.75rem;
min-height: 15vh;
padding: 1rem;
align-items: center;
}
article:last-child {
border-width: 3px;
}
footer {
background-color: #016CBA;
height: 30vh;
}
<body id="body">
<header>
<button id="menu-button" type="button">Menu</button>
</header>
<nav id="menu">
Link 1
Link 2
</nav>
<main id="main">
<aside>Filter Form</aside>
<section>
<article>Article A</article>
<article>Article B</article>
<article>Article C</article>
<article>Article D</article>
<article>Article E</article>
<article>Article F</article>
<article>Article G</article>
<article>Article H</article>
<article>Article I</article>
</section>
</main>
<footer id="footer"></footer>
</body>
now, you use it with visibility yes?
don't use it!
use height: 0;
then when you want open it in js convert it to height: 100% or another size.
and use transition: height .5s; for open as an animation.
After fiddling around, I've finally found a solution that gives me the desired effect:
let menuOpened = false;
document.getElementById('menu-button')
.addEventListener('click', function() {
menuOpened = !menuOpened;
document.getElementById('body').classList.toggle('menu-opened', menuOpened);
document.getElementById('menu').classList.toggle('menu-opened', menuOpened);
});
* {
box-sizing: border-box;
}
body {
margin: 0;
overflow-x: hidden;
}
body.menu-opened {
overflow-y: hidden;
}
body > * {
width: 100vw;
}
header {
background-color: #6FC5C2;
display: flex;
height: 20vh;
position: sticky;
top: 0;
align-items: center;
justify-content: center;
}
nav {
background-color: #80CAF1;
clip-path: inset(0 0 80vh);
display: flex;
height: 80vh;
left: 0;
padding: 1rem;
position: fixed;
top: 20vh;
transition: clip-path 0.35s ease;
z-index: 20;
align-items: center;
flex-direction: column;
justify-content: center;
}
nav.menu-opened {
clip-path: inset(0);
}
a {
color: black;
cursor: pointer;
font-weight: bold;
text-decoration: none;
}
a:not(:last-child) {
margin-bottom: 0.5rem;
}
main {
display: flex;
}
aside {
background-color: #9C9ECF;
display: flex;
flex-basis: 25%;
padding: 3rem 0.5rem;
text-align: center;
justify-content: center;
}
section {
background-color: #F8CFD7;
display: flex;
flex-basis: 75%;
padding: 2rem;
align-items: stretch;
flex-direction: column;
}
article {
border: ridge #80CAF1;
border-width: 3px 3px 0 3px;
display: flex;
font-size: 0.75rem;
min-height: 15vh;
padding: 1rem;
align-items: center;
}
article:last-child {
border-width: 3px;
}
footer {
background-color: #016CBA;
height: 30vh;
}
<body id="body">
<header>
<button id="menu-button" type="button">Menu</button>
</header>
<nav id="menu">
<a>Link 1</a>
<a>Link 2</a>
</nav>
<main id="main">
<aside>Filter Form</aside>
<section>
<article>Article A</article>
<article>Article B</article>
<article>Article C</article>
<article>Article D</article>
<article>Article E</article>
<article>Article F</article>
<article>Article G</article>
<article>Article H</article>
<article>Article I</article>
</section>
</main>
<footer id="footer"></footer>
</body>
The trick is to use clip-path to create a mask over the menu.

:hover is not working

I am fairly new to web development, so although appreciated, I am not looking for critiques on "best practices", I realize this is not beautiful code, but I am not sure why the a:hover function is not working. it does indeed work for other parts of the code that are not included but I am not sure why this code will not work, any insight would be appreciated.
NOTE: There is no issue with the .css filepath or anything, all the other styles elements work just fine.
So with this question I have included two files, my .html file as well as my main.css file. I have removed any personal information and any code that is not pertinent to the actual issue.
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
text-decoration-color: white;
}
html {
margin: 0px;
}
body {
margin: 0px;
min-height: 100%;
}
.home {
position: relative;
z-index: -2;
}
.intropage {
position: fixed;
z-index: 100;
height: 100%;
width: 100%;
overflow: hidden;
}
#enterwebsite {
font-family: 'Cookie';
font-size: 48px;
color: white;
border: solid white 2px;
border-radius: 15px;
text-align: center;
padding: 10px 25px;
}
#enterwebsite:hover {
font-family: 'Cookie';
font-size: 48px;
color: black;
border: solid black 2px;
border-radius: 15px;
text-align: center;
padding: 10px 25px;
}
.enterbutton-container {
position: absolute;
top: 60%;
left: 39.5%;
}
.enterbutton {
text-align: center;
}
.backgroundimage {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-image: url("styles/images/SF2.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.backgroundimage img {
min-width: 100%;
width: 100%;
height: auto;
position: fixed;
overflow: hidden;
}
.navigation {
display: flex;
background: rgba(10, 10, 10, 0.9);
}
.logo {
display: flex;
flex-grow: 30;
justify-content: center;
align-items: flex-start;
}
h2 {
color: white;
font-family: 'Raleway';
}
p {
color: white;
padding: 32px;
font-family: 'Raleway';
background-color: rgba(0, 0, 0, 0.2);
border-radius: 10px;
}
.logo h1 {
margin: 0;
color: rgba(230, 230, 230, 1.0);
font-family: 'Raleway';
font-size: 32px;
}
#logotop {
text-decoration: underline;
}
#logobottom {
text-decoration: overline;
}
.logotext {
justify-content: center;
}
.intro-container {
display: flex;
justify-content: center;
margin-top: 150px;
}
.intro {
display: flex;
flex-flow: column;
align-items: center;
width: 40%;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 25px;
}
.menu {
flex-grow: 70;
display: flex;
align-items: flex-end;
z-index: auto;
}
.ul-menu {
flex-grow: 1;
display: flex;
list-style-type: none;
justify-content: space-between;
}
.menu-item {
flex-grow: 1;
color: white;
font-family: 'Raleway';
}
.profilepic img {
border: solid 2px cyan;
border-radius: 50%;
margin-top: -100px;
}
.topmenuitem {
text-decoration: none;
color: white;
flex-grow: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Cookie' rel='stylesheet'>
<div class="home">
<div class="navigation">
<div class="logo">
<div class="logocontainer">
<a href="index.html">
<div class="logotext">
<h1 id="logotop">JOHN J</h1>
</div>
<div class="logotext">
<h1 id="logobottom">JINGLEHEIMERSCHMIDT</h1>
</div>
</a>
</div>
</div>
<div class="menu">
<ul class="ul-menu">
<li class="menu-item"><a class="topmenuitem" href="home.html">Home</a></li>
<li class="menu-item"><a class="topmenuitem" href="home.html">Projects/code</a></li>
<li class="menu-item"><a class="topmenuitem" href="home.html">Music</a></li>
<li class="menu-item"><a class="topmenuitem" href="home.html">Websites</a></li>
<li class="menu-item"><a class="topmenuitem" href="home.html">About</a></li>
<li class="menu-item"><a class="topmenuitem" href="home.html">Contact</a></li>
</ul>
</div>
</div>
<div class="main-body">
</div>
<div class="intro-container">
<div class="intro">
<div class="profilepic">
<img src="assests/profilephoto.jpg" alt="Profile Picture">
</div>
<h2>Welcome!</h2>
<p>Hello, and this is a test link thank you for visiting. here is some text
<br>
<br>
<br> here is some more text
</p>
</div>
</div>
</div>
Remove
z-index: -2;
at .home class
Your body has only one child tag with class home. In this case you shouldn't to set negative z-index. Negative z-index means that this element under the all others elements
Yes Bro, I have debugged your code.
Because of negative z index, your cursor is not detecting the link itself. Removing it, solves the problem. Please check the property properly that how you want to use it.
.home{
position: relative;
// z-index: -2;
}
Just remove z-index: -2; from css file
and for more information related to z-index property in CSS please visit this link
CSS z-index property
First, remove z-index: -2 rule of the .home selector in your CSS
Then, wrap the a with span:
<p>Hello, and <span> this is a test link </span> thank you for visiting..
And in CSS:
span:hover {
//code n' stuffs
}

Categories