How to make a navbar neatly open and close with javascript? - javascript

I'd like to make a good navbar with the following functionality, but I can't seem to figure it out in javascript.
I'd like it to have the following functionality:
Menu opens when a hamburger icon is clicked
Menu closes when the hamburger icon is clicked again
Menu is also closed if a link in the menu is clicked
Menu is also closed if anywhere outside of the menu is clicked
I've already added a (.active for my css menu class which can toggle whether or not the menu is displayed.) Now I originally did an onclick function, but while not only was it not good practice, it also did not give the UX I would like. This is because the only way the menu would appear or disappear was if the hamburger menu was pressed.
Here's some basic html and css that follows similarly to what I am working with:
Here's a JSFiddle: https://jsfiddle.net/L0vr8j59/
(Note: the hamburger icon only appears at screen width 800px or less via a media query)
HTML:
<nav class="navbar">
<div class="nav-list">
<ul id="menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
<div id="hamburger" class="hamburgermenu">
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>
CSS:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html{
scroll-behavior: smooth;
}
li{
font-size: 2.75rem;
}
li a:hover{
text-decoration: overline;
}
.hamburgermenu{
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
}
.hamburgermenu span{
display: flex;
justify-content: center;
align-items: center;
height: 4px;
width: 40px;
margin: 4px;
background: black;
}
ul{
display: flex;
justify-content: space-around;
list-style-type: none;
}
ul a{
text-decoration: none;
font-size: 1.5rem;
color: black;
}
.navbar{
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
.navbar::before{
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
filter: blur(5px);
z-index: -10;
color: white;
}
.navbar.active{
background-color: black;
color: white;
z-index: 20;
}
.navbar.active::before{
box-shadow: none;
}
.navbar.active ul a {
color: white;
}
.navbar.active .hamburgermenu span{
background-color: white;
}
.nav-list{
display: block;
padding-left: 50%;
line-height: 5rem;
padding-bottom: 5px;
}
#media screen and (max-width: 800px) {
.nav-list{
display: flex;
flex-direction: column-reverse;
}
#menu{
display: none;
opacity: 0;
}
#menu.active{
position: relative;
display: flex;
top: 5px;
background-color: rgb(61, 60, 60);
flex-direction: column;
align-items: center;
opacity: 1;
transition: 5ms ease-in;
}
ul a{
color: white;
}
.hamburgermenu{
display: flex;
visibility: visible;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
align-items: flex-end;
padding-right: 2rem;
}
I can also provide any additional info if needed.
Thanks in advance. :D

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;
}

Text inside the burger menu not animating

I made a burger menu in a website, but when I click on burger icon the background animates, but the text doesn't animate. I don't know where I went wrong, so kindly help me to fix this problem
Thank you!
This is HTML code
<nav class="navig h-nav-resp">
<img src="Images/logo.jpg" alt="MyWeb" class="logo">
<ul class="navul v-class-resp">
<li class="navc">Home</li>
<li class="navc">About</li>
<li class="navc">Pricing</li>
<li class="navc">Contact Us</li>
<li class="navc">Privacy Policy</li>
<li class="navc">Terms And Conditions</li>
</ul>
<div class="burger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</nav>
This is CSS code
.navig{
display: flex;
align-items: center;
}
.navul{
display: flex;
}
.navc{
list-style: none;
padding: 8px;
margin: 5px;
}
.navc a{
text-decoration: none;
color: white;
font-size: 18px;
font-family: 'Inter', sans-serif;
}
.navc a:hover{
color: rgb(209, 209, 209);
}
.burger{
width: 33px;
height: 33px;
display: none;
position: absolute;
cursor: pointer;
right: 10%;
top: 15px;
}
.line{
background-color: white;
width: 33px;
height: 4px;
margin: 5px 5px;
}
CSS in mobile
.navul {
flex-direction: column;
}
.header {
justify-content: center;
align-items: center;
}
.navig {
height: 287px;
flex-direction: column;
transition: all 0.3s ease-out;
}
.burger {
display: block;
}
.menu {
width: 70px;
height: 30px;
}
.h-nav-resp {
height: 54px;
}
.v-class-resp {
display: none;
}
This is javascript code
burger = document.querySelector('.burger');
navig = document.querySelector('.navig');
navul = document.querySelector('.navul');
burger.addEventListener('click', ()=>{
navul.classList.toggle('v-class-resp');
navig.classList.toggle('h-nav-resp');
});
I expect both background and text to animate

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;
}

Mobile nav has weird transitions in jQuery, and not displaying correctly

I have created a template with a horizontal navigation in desktop, and a vertical navigation in mobile. I am using one nav list and changing the styling of it for desktop to mobile.
The thing is, the jQuery that I have given it adds some strange transitions to it that I want removed. A fade in/fade out of the text and the sidebar and a weird slide in/slide out effect.
What I am trying to achieve is to make the mobile nav slide in/slide out with the width intact, with no fade effects. I think the toggle() class has something to do with it, but Im not sure.
Also, when you open then click the hamburger to open then close the mobile nav, then go to view the desktop mode, the desktop nav is gone also until you refresh the page.
Any help would be great. Thanks.
$('.toggle-menu').click(function() {
$('nav').toggle("nav");
});
:root {
--black: #212121;
--grey: #ccc;
--light-grey: #eee;
--grey-opacity: #ccc, 0.2;
--gutter: 30px;
}
html,
body {
min-height: 100%;
}
html {
box-sizing: border-box;
background-color: var(--grey);
}
body {
font-family: 'Poppins', sans-serif;
font-size: 14px;
line-height: 1.3;
color: var(black);
margin: 0;
}
a {
text-decoration: none;
color: var(--black);
}
a:hover,
a:focus {
color: var(--black);
}
ul {
padding: 0;
}
ul li {
display: inline;
list-style-type: none;
}
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-areas: "header" "aside content" "overview overview" "footer footer";
}
.header-skin {
background-color: rgba(255, 255, 255, 0.1);
}
header {
grid-area: header;
display: flex;
justify-content: space-between;
padding: var(--gutter) 15px;
max-width: 1200px;
margin: 0 auto;
}
.toggle-menu span {
width: 20px;
height: 2px;
margin-bottom: 4px;
border-radius: 50px;
background: var(--black);
display: block;
}
#media (min-width: 839px) {
.toggle-menu {
display: none;
}
nav ul {
margin: 0;
}
nav ul li {
text-transform: capitalize;
padding-left: 20px;
}
nav ul li a {
position: relative;
}
nav ul li a.active {
color: var(--black);
font-weight: 700;
}
nav ul li a.active::after {
content: ' ';
width: 100%;
height: 2px;
display: block;
position: absolute;
left: 0;
bottom: -4px;
background-color: var(--black);
}
nav ul li:nth-child(4n) {
margin-right: 200px;
}
}
#media (max-width: 840px) {
nav {
height: 100%;
position: fixed;
background-color: rgba(255, 255, 255, 0.1);
left: 0;
top: 78px;
width: 300px;
margin-right: -300px;
display: none;
}
nav ul {
margin: 0;
padding: 40px 0 0 40px;
display: flex;
flex-direction: column;
}
nav ul li {
text-transform: capitalize;
padding-bottom: 40px;
}
nav ul li a {
position: relative;
}
nav ul li a.active {
color: var(--black);
font-weight: 700;
}
nav ul li a.active::after {
content: ' ';
width: 100%;
height: 2px;
display: block;
position: absolute;
left: 0;
bottom: -4px;
background-color: var(--black);
}
nav ul li:nth-child(4n) {
margin-right: 200px;
}
}
<div class="container">
<div class="header-skin">
<header>
<div class="logo">
logo
</div>
<div class="toggle-menu">
<span></span>
<span></span>
<span></span>
</div>
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>news</li>
<li>contact</li>
<li>twitter</li>
<li>instagram</li>
</ul>
</nav>
</header>
</div>
<div class="aside"></div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="functions.js"></script>
</div>

: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