DropDown menu closing when link is clicked, and closing when clicking away

DropDown menu closing when link is clicked, and closing when clicking away - javascript

I wanted my menu to close when any of the links were clicked, and the same when I clicked outside the menu area, I tried different ways and was unsuccessful, could you help me?
I tried to use javascript but the result failed, I'm still a beginner so I'm having trouble.
JS
const btnMobile = document.getElementById('btn-mobile');
function toggleMenu(event) {
if (event.type === 'touchstart') event.preventDefault();
const nav = document.getElementById('nav');
nav.classList.toggle('active');
const active = nav.classList.contains('active');
event.currentTarget.setAttribute('aria-expanded', active);
if (active) {
event.currentTarget.setAttribute('aria-label', 'Fechar Menu');
} else {
event.currentTarget.setAttribute('aria-label', 'Abrir Menu');
}
}
btnMobile.addEventListener('click', toggleMenu);
btnMobile.addEventListener('touchstart', toggleMenu);
I looked in various forums and classes, however, for some reason none of the scripts worked.
HTML
<!DOCTYPE html>
<html lang="pt-br">
<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">
<title>Menu Mobile</title>
<link rel="stylesheet" href="menu.css">
</head>
<body>
<header id="header">
<a id="logo" href="">Menu</a>
<nav id="nav">
<button aria-label="Abrir Menu" id="btn-mobile" aria-haspopup="true" aria-controls="menu" aria-expanded="false">
<span id="hamburger"></span>
</button>
<ul id="menu" role="menu">
<li>Home</li>
<li>Serviços</li>
<li>Páginas</li>
<li>Projetos</li>
<li>Empresas</li>
<li>Cupcode</li>
<li>Recursos</li>
<li>Contato</li>
</ul>
</nav>
</header>
<script src="menu.js"></script>
</body>
</html>

Something like this should work. It's with JQuery.
I'm a beginner myself so it's maybe a bit too complicated or something else. But that did work for me.
It's not with your class and id names. It's just for you seeing how it can work.
$(document).mouseup(function (e) {
var container = $("#nav-toggle");
if (!container.is(e.target) // if clicked outside
&& container.has(e.target).length === 0)
{
container.hide();
$( "#nav-toggle" ).prop( "checked", false ); //to uncheck
}
});
$('.i').click(function() { // if i is clicked hide all the links
$('#nav-li').hide();
});
$('.nav-toggle').click(function() { // if the hamburger is clicked show them again
$('#nav-li').show();
});
#navbar {
text-align: center;
margin-top: -13px;
z-index: 999;
width: 100%;
font-family: 'Poppins';
position: sticky;
top: 0;
width: 100%;
height: 80px;
background-color: #fff
box-shadow: 10px 10px 20px #fff
}
.logo {
letter-spacing: 1px;
margin-bottom: -10px;
font-weight: bold;
margin-left: 10px;
font-size: 20px;
text-align: left;
font-family: 'Poppins';
padding: 5px;
text-transform: uppercase;
color: #000;
}
.nav-toggle {
display: none;
}
.nav-toggle-label {
position: absolute;
top: 15px;
right: 20px;
height: 30px;
display: flex;
align-items: center;
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
display: block;
background: #000;
height: 2px;
width: 2em;
border-radius: 5px;
position: relative;
}
.nav-toggle-label span::before,
.nav-toggle-label span::after {
content: '';
position: absolute;
}
.nav-toggle-label span::before {
bottom: 7px;
}
.nav-toggle-label span::after {
top: 7px;
}
nav {
cursor: pointer;
position: absolute;
text-align: left;
background: var(--background);
width: 100%;
transform: scale(1, 0);
transform-origin: top;
transition: transform 400ms ease-in-out;
}
nav ul {
padding: 0;
height: 220px;
list-style: none;
background-color: #fff;
}
nav li {
margin-bottom: 1em;
margin-left: 1em;
}
nav a {
color: black;
text-decoration: none;
font-size: 1.2rem;
text-transform: uppercase;
opacity: 0;
transition: opacity 150ms ease-in-out;
transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-webkit-transition: all 250ms ease-in-out;
}
.nav-toggle:checked ~ nav {
transform: scale(1, 1);
background-color: #fff;
}
.nav-toggle:checked ~ nav a {
opacity: 1;
transition: opacity 250ms ease-in-out 250ms;
}
.nav-toggle:checked ~ nav ul {
background-color: #fff;
}
.nav-toggle:checked ~ .nav-toggle-label {
display: none;
}
.nav-close-label {
font-size: 28px;
position: absolute;
top: 10px;
right: 24px;
display: none;
}
.nav-toggle:checked ~ .nav-close-label {
display: block;
animation: nav3 1s ease;
}
.fadeInBottom { animation-name: nav3 }
#keyframes nav3 {
from {
opacity: 0;
}
to { opacity: 1 }
}
.background {
background-color: white;
}
.spacer {
height: 2000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="background">
<header id="navbar">
<h1 class="logo">
<div>
Logo
</div>
</h1>
<input label="" type="checkbox" id="nav-toggle" class="nav-toggle">
<nav>
<ul id="nav-li">
<li class="i">Home</li>
<li class="i">Example</li>
<li class="i">Example</li>
<li class="i">Example</li>
<li class="i">Example</li>
</ul>
</nav>
<label for="nav-toggle" class="nav-toggle-label" id="nav-toggle-label">
<span></span>
</label>
<label class="nav-close-label" id="nav-close-label">✕</label>
</header>
<div class="spacer"></div> <!--DONT COPY-->
</div>

Related

How to define the width limit which defines whether or not to display an hamburger menu

Good day,
I was inspired by a youtube tutorial to create a hamburger menu. When I resize my PC browser window to a given width, the hamburger menu appears and everything is working absolutely fine, as you can see in this first screenshot:
The only problem I'm facing is when I try to call the same page using my Android (Samsung Galaxy S20) smartphone, the "classic" menu bar appears.
Do you think I need to add a function which would be smartphone specific, so I could have the same hamburger menu on my smartphone as on the first picture?
I don't know whether it could be helpful - most importantly, I don't know where to start to investigate - but I'm enclosing my html, css and javascript files.
Any help is appreciated. Thanks in advance.
Here is my html code:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="css/mystyle.css?rnd=999" />
<script type="text/javascript" src="scripts/menu.js"></script>
</head>
<body>
<header>
<nav class="navbar">
<div class="branding">
<h2>Welcome</h2>
</div>
<label for="input-hamburger" class="hamburger "></label>
<input type="checkbox" id="input-hamburger" hidden>
<ul class="menu">
<li>Home</li>
<li>Portfolio</li>
<li class="has-dropdown">
<a href="#" class="menu-link">Services
<span class="arrow"></span>
</a>
<ul class="submenu">
<li>Web Design</li>
<li>Web Development</li>
<li class="has-dropdown">
<a href="#" class="menu-link">Full Stack Development
<span class="arrow"></span>
</a>
<ul class="submenu">
<li>Wordpress Development</li>
<li>Front End Development</li>
<li class="has-dropdown">
<a href="#" class="menu-link">MEAN Stack Development
<span class="arrow"></span>
</a>
<ul class="submenu">
<li>MongoDb</li>
<li>ExpressJS</li>
<li>AngularJS</li>
<li>NodeJS</li>
</ul>
</li>
<li>Back End Development</li>
</ul>
</li>
<li>UI/UX Design</li>
</ul>
</li>
<li>Articles</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main></main>
</body>
</html>
Here is my css code (mystyle.css) that my html code is referring to :
:root {
box-sizing: border-box;
--primary: #e70146;
--hover-color: #fdd052;
--dark: #1c2022;
--light: #fff;
--header-bg: var(--primary);
}
*,
*::after,
*::before {
box-sizing: inherit;
margin: 0;
padding: 0;
}
body {
font-family: "josefin sans", "helvetica", sans-serif;
font-size: 1rem;
}
header {
background: var(--header-bg);
padding-left: 1.5em;
position: sticky;
top: 0;
}
.branding-logo {
color: var(--light);
font-size: calc(0.8rem + 1vw);
text-decoration: none;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
.menu {
display: flex;
flex-direction: row;
}
.menu li {
list-style: none;
}
.menu li a {
display: block;
text-decoration: none;
color: var(--light);
padding: 1em 1.5em;
font-size: 1rem;
}
/* Styling submenu */
.has-dropdown {
position: relative;
}
.submenu {
position: absolute;
left: 0;
background-color: var(--dark);
white-space: nowrap;
padding: 1.5em 0;
min-width: 16em;
/* hide submenus */
opacity: 0;
transform: scaleY(0);
transform-origin: top center;
}
.submenu > li > a {
padding: 0.8em 1.5em;
}
.submenu .submenu {
left: -100%;
top: 0;
}
.submenu .submenu .submenu {
left: -100%;
top: 0;
}
.menu > li:hover > a,
.submenu > li:hover > a {
background-color: hsla(0, 0%, 100%, 0.05);
color: var(--hover-color);
}
.menu > li:hover > a {
background-color: hsla(0, 0%, 0%, 0.95);
}
/* Arrows */
.arrow {
width: 0.5em;
height: 0.5em;
display: inline-block;
vertical-align: middle;
border-left: 0.15em solid currentColor;
border-bottom: 0.15em solid currentColor;
transform: rotate(-45deg);
margin-top: -0.25em;
transition: transform 100ms ease-in-out;
}
/* Reveal */
.menu > li:hover > a + .submenu,
.submenu > li:hover > a + .submenu {
opacity: 1;
transform: scaleY(1);
}
/* ANIMATE aRROWS */
.menu > li:hover > a > .arrow,
.submenu > li:hover > a > .arrow {
transform: rotate(225deg);
}
#media only screen and (max-width: 78.75em) {
.submenu .submenu .submenu {
left: -100%;
top: 0.5em;
}
.submenu {
min-width: 16em;
}
}
#media only screen and (max-width: 58.75em) {
.menu li a {
font-size: 1rem;
}
}
#media only screen and (max-width: 500px) {
header {
/* position: relative; */
padding: 1.5em 2em;
}
.menu {
flex-flow: column;
position: absolute;
background: var(--light);
top: 4.55em;
left: 0;
right: 0;
height: 100vh;
opacity: 0;
transform: scaleY(0);
transform-origin: top center;
transition: 200ms transform cubic-bezier(0.36, 0.4, 0.42, 1.48) 100ms,
100ms opacity ease-in-out;
overflow-y: scroll;
}
.menu > li > a {
font-size: 1rem;
color: var(--dark);
}
.submenu > li > a {
font-size: 1rem;
}
.submenu {
top: 0;
padding-left: 1.5em;
border-left: 0.12em dotted hsla(342, 99%, 45%, 0.95);
}
.submenu .submenu {
left: 0;
top: 0;
}
.submenu .submenu .submenu {
left: 0;
top: 0;
}
.menu > li:hover > a + .submenu,
.submenu > li:hover > a + .submenu {
position: relative;
}
.hamburger {
width: 2em;
height: 0.25em;
display: block;
background: var(--light);
position: relative;
cursor: pointer;
transition: 0.2s transform ease-in-out;
}
.hamburger::after,
.hamburger::before {
content: "";
position: absolute;
left: 0;
background: inherit;
width: inherit;
height: inherit;
transition: 0.2s transform ease-in-out;
}
.hamburger::after {
top: 0.65em;
}
.hamburger::before {
bottom: 0.65em;
}
.close::after,
.close::before {
top: 0;
transition: 0.2s transform ease-in-out;
}
.close::before {
display: none;
}
.close {
transform: rotate(45deg);
transition: 0.2s transform ease-in-out;
}
.close::after {
transform: rotate(-90deg);
}
/* reveal menu */
input[type="checkbox"]:checked + .menu {
position: absolute;
opacity: 1;
transform: scaleY(1);
}
}
main {
/* just to make scrollable vertically to see sticky navbar */
height: 200vh;
}
Here is my javascript code (menu.js) that my html is referring to:
const hamburger = document.querySelector(".hamburger");
hamburger.addEventListener("click", function () {
this.classList.toggle("close");
});

YOU CAN TRY THIS:-
<!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">
<title>Document</title>
<!-- Font Awesome -->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
rel="stylesheet"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
rel="stylesheet"
/>
<!-- MDB -->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.6.0/mdb.min.css"
rel="stylesheet"
/>
</head>
<body>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler ms-auto" type="button" data-mdb-toggle="collapse"
data-mdb-target="#navbarToggleExternalContent3" aria-controls="navbarToggleExternalContent3"
aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
</div>
</nav>
<div class="collapse" id="navbarToggleExternalContent3">
<div class="bg-light shadow-3 p-4">
<button class="btn btn-link btn-block border-bottom m-0">Link 1</button>
<button class="btn btn-link btn-block border-bottom m-0">Link 2</button>
<button class="btn btn-link btn-block m-0">Link 3</button>
</div>
</div>
<!-- MDB -->
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.6.0/mdb.min.js"
></script>
</body>
</html>

You just missed to add:
<meta name="viewport" content="width=device-width, initial-scale=1" />
It is necessary to add "viewport" to tell the browser to render pages according to the width of the device.

How do I animate my Navigation Button to perform the proper animation assigned to it using JavaScript?

So here's what I have and I can figure out why my burger div (navigation button on mobile) won't animate to shape a X can anyone explain what I'm missing or doing wrong?
Ive tried changing the class name using toggle through javaScript but it doesn't animate the lines 45 degrees and Im unsure why that is?
I would like to know what I can do in terms of changing the burger (nav button) to form a X and hide the center line by fading it out using a javaScript
This also my first time using stack overflow in terms of asking a question so please go easy on me.
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-items');
const navItems = document.querySelectorAll('.nav-items li');
burger.addEventListener('click', () => {
//NAV Toggle
nav.classList.toggle('nav-active');
//Items Animated
navItems.forEach((item, index) => {
if (item.style.animation) {
item.style.animation = '';
} else {
item.style.animation = `navItemFade 0.5s ease forwards ${index / 7 + .3}s`;
}
});
//Burger Animation
burger.classList.toggle('tip');
});
}
navSlide();
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
a {
text-decoration: none;
color: rgb(245, 245, 245);
transition: .3s;
}
/* NAV */
nav {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 11vh;
font-family: 'Poppins', sans-serif;
background-color: rgb(255, 145, 0);
}
.logo {
margin-left: 3rem;
}
.logo>a>h1 {
color: rgb(245, 245, 245);
letter-spacing: 3px;
text-transform: uppercase;
font-size: 32px;
}
.nav-items {
display: flex;
align-items: center;
list-style-type: none;
margin-right: 25rem;
}
.nav-items>li {
padding: 1.5rem;
}
.nav-items>li>a {
font-size: 16px;
}
.nav-items>li>a:hover {
color: rgb(0, 0, 0);
}
.nav-icons {
display: flex;
margin-right: 2rem;
}
.nav-fas {
margin: 1rem;
cursor: pointer;
}
.burger {
display: none;
margin-left: 1rem;
}
.burger>div {
width: 25px;
height: 3px;
background-color: rgb(0, 0, 0);
margin: 5px;
transition: all 0.3s ease;
}
/* NAV MOBILE */
#media screen and (max-width:1240px) {
.nav-items {
margin-right: 10px;
transition: .3s;
}
}
#media screen and (max-width:860px) {
body {
overflow-x: hidden;
}
.nav-items {
width: 100%;
max-width: 300px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
position: absolute;
height: 90vh;
top: 14vh;
background-color: rgb(255, 145, 0);
transform: translateX(-100%);
transition: transform 0.5s ease-in;
}
.nav-items li {
opacity: 0;
}
.burger {
display: block;
cursor: pointer;
}
#fas1,
#fas2 {
display: none;
}
}
.nav-active {
transform: translateX(0%);
}
#keyframes navItemFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
.tip .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.tip .line2 {
opacity: 0;
}
.tip .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
<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="stylesheet" href="main.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<title>E-Store</title>
</head>
<body>
<header>
<nav>
<div class="burger">
<div clsss="line1"></div>
<div clsss="line2"></div>
<div clsss="line3"></div>
</div>
<div class="logo">
<a href="index.html">
<h1>logo</h1>
</a>
</div>
<ul class="nav-items">
<li>Home</li>
<li>Collection</li>
<li>About</li>
<li>Contact us</li>
</ul>
<div class="nav-icons">
<div class="nav-fas" id="fas1">
<i class="fas fa-map-marker-alt"></i>
</div>
<div class="nav-fas" id="fas2">
<i class="fas fa-envelope"></i>
</div>
<div class="nav-fas" id="fas3">
<i class="fas fa-search"></i>
</div>
<div class="nav-fas" id="fas4">
<i class="fas fa-shopping-cart"></i>
</div>
</div>
</nav>
</header>
<script src="./app.js" type="module"></script>
</body>
</html>

Everything is right. You just have one simple spelling mistake, you wrote clsss instead of class on three divs with class line1, line2, line3.
PS:- It looks like you are new to web development. A piece of advice for you, make use of text editor(whatever you might be using) to detect small spelling mistakes and other linting errors. It will save you a lot of time.

How to close navigation bar when I click on other contents in the webpage

I created a navigation bar it works fine.
It consists of several tabs such as Home, about, services, contact.
But I want to close it when I click on the contents of the web page.
Code:
(function() {
var bodyEl = $('nav'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
})();
var height = $(window).height();
var width = $(window).width();
$(window).resize(function() {
$("nav").removeClass("active-nav");
});
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav {
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 50px;
line-height: 40px;
text-align: center;
background-color: #666;
}
.content {
padding-top: 300px;
height: 1200px;
background-color: lightgrey;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
.fa-bars {
font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<nav>
<a href="#" class="nav-toggle-btn"> <i class="fa fa-bars"></i>
</a>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>
How can I close my navigation bar, when I click on the other contents in the web page.
Any help will be appreciated.
Thank you in advance.

The simplest way is to set a "click" event on the "content" area so that whenever anything within it is clicked on, it causes the menu to be hidden again:
$(".content").click(function(e) {
bodyEl.removeClass('active-nav');
});
Demo:
$(function() {
var bodyEl = $('nav'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
$(".content").click(function(e) {
bodyEl.removeClass('active-nav');
});
var height = $(window).height();
var width = $(window).width();
$(window).resize(function() {
$("nav").removeClass("active-nav");
});
});
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav {
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 50px;
line-height: 40px;
text-align: center;
background-color: #666;
}
.content {
padding-top: 300px;
height: 2000px;
background-color: #ccf;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
.fa-bars {
font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<nav>
<a href="#" class="nav-toggle-btn"> <i class="fa fa-bars"></i>
</a>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>
P.S. I rearranged the rest of your JavaScript slightly to all be within a "ready" block, I wasn't sure what the logic of it was previously.
P.P.S. Your demo contained jQuery twice. This is both unnecessary and can also lead to unpredictable issues. I've removed the older version in my demo above.

SERBIAN: Jednostavno samo dodaj ovo na kraju svoje skripte:
ENG: Just add this at the end of your script:
$('div').click(function(){
$('nav').removeClass("active-nav");
});

You only have to attach an onclick event handler to document.
var height = $(window).height();
var width = $(window).width();
$(function() {
var bodyEl = $('nav'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
$(document).on('click', function(e) {
if(!$(e.target).closest(bodyEl).length && bodyEl.hasClass('active-nav')) {
bodyEl.removeClass('active-nav');
}
});
});
$(window).resize(function() {
$("nav").removeClass("active-nav");
});
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav{
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width:50px;
line-height: 40px;
text-align:center;
background-color: #666;
}
.content {
padding-top: 300px;
height: 2000px;
background-color: #ccf;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
.fa-bars{
font-size:20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
</script>
<nav>
<i class="fa fa-bars"></i>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>

Why is my Add to Cart button appearing next to the image instead of below the image even on using the line break tag?

I am creating an eCommerce site. I have a header and a sidebar. And then I have the main body section. In the main body section, I have a heading for Featured Products. And then I have some images below the Featured Products heading which I will replace with actual images. But when I add the image, and then I also add the Add the Add to Cart button below each image. But when I add a button, it is coming right to the image instead of below it. Even though I have a line break tag.
Some help will be really appreciated
Thanks
The index.php
<?php
require_once 'Partials/header.php';
?>
<br><br><br><br>
<link rel="stylesheet" type="text/css" href="Styles/Style.css">
<div class="main_wrapper">
<?php
require_once 'Partials/sidebar.php';
?>
<!--The main body section start here-->
<div class="main">
<!--Featured Products List Starts Here-->
<h2 style="text-align: center;">Featured Products</h2>
<div class="container">
<img src="Images/Logo5.JPG">
<br><button>Add to cart</button>
<img src="Images/Logo5.JPG">
<br><button>Add to cart</button>
<img src="Images/Logo5.JPG">
<br><button>Add to cart</button>
<img src="Images/Logo5.JPG">
<br><button>Add to cart</button>
</div>
<h2 style="text-align: center;">New Arrivals</h2>
<div class="container 2">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
</div>
<h2 style="text-align: center;">Clothes</h2>
<div class="container 3">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
</div>
<h2 style="text-align: center;">Brands</h2>
<div class="container 4">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
<img src="Images/Logo5.JPG">
</div>
<style>
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
overflow: auto;
justify-content: space-between;
}
.container > img {
display: block;
margin-top: 5px;
}
</style>
<!--Featured Products List Ends Here-->
<button name="Black">Black</button>
</div>
<!--The main body section ends here-->
<!--Back To Top Coding Starts Here-->
<head>
<style>
#back-to-top-btn{
display: none;
position: fixed;
bottom: 20px;
right: 20px;
font-size: 20px;
width: 50px;
height: 50px;
background-color: #fff;
color: #333;
cursor: pointer;
outline: none;
border: 3px solid #333;
border-radius: 50%;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
transition-property: background-color, color;
}
#back-to-top-btn:hover, #back-to-top-btn:focus{
background-color: #333;
color: #fff;
}
/* Animations */
.btnEntrance {
animation-duration: 0.5s;
animation-fill-mode: both;
animation-name: btnEntrance;
}
/* zoomIn */
/* #keyframes btnEntrance {
from {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
}
to {
opacity: 1;
}
} */
/* fadeInUp */
#keyframes btnEntrance {
from {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.btnExit {
animation-duration: 0.25s;
animation-fill-mode: both;
animation-name: btnExit;
}
/* zoomOut */
/* #keyframes btnExit {
from {
opacity: 1;
}
to {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
}
} */
/* fadeOutDown */
#keyframes btnExit {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
}
</style>
</head>
<button id="back-to-top-btn"><i class="fas fa-angle-double-up"></i></button>
<script src="js/Back_To_Top.js"></script>
<!--Back To Top Coding Ends Here-->
</div>
</body>
</html>
And then this is the header.php
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Home - Diamond Collections</title>
<script src="https://kit.fontawesome.com/1cde82a3ba.js"></script>
<style>
#import url('https://fonts.googleapis.com/css?family=Work+Sans:300,600');
:root {
--background: rgba(0, 214, 170, .85);
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
/*background-image: radial-gradient(circle, red, yellow, green);*/
font-family: 'Work Sans', sans-serif;
font-weight: 400;
}
.content {
}
/* navigation styles start here */
header {
background: var(--background);
text-align: center;
position: fixed;
z-index: 999;
width: 100%;
}
/* changed this from the tutorial video to
allow it to gain focus, making it tabbable */
.nav-toggle {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.nav-toggle:focus ~ .nav-toggle-label {
outline: 3px solid rgba(lightblue, .75);
}
.nav-toggle-label {
position: absolute;
top: 0;
left: 0;
margin-left: 1em;
height: 100%;
display: flex;
align-items: center;
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
display: block;
background: white;
height: 2px;
width: 2em;
border-radius: 2px;
position: relative;
}
.nav-toggle-label span::before,
.nav-toggle-label span::after {
content: '';
position: absolute;
}
.nav-toggle-label span::before {
bottom: 7px;
}
.nav-toggle-label span::after {
top: 7px;
}
nav {
position: absolute;
text-align: left;
top: 100%;
left: 0;
background: var(--background);
width: 100%;
transform: scale(1, 0);
transform-origin: top;
transition: transform 400ms ease-in-out;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
margin-bottom: 1em;
margin-left: 1em;
}
nav a {
color: white;
text-decoration: none;
font-size: 1.2rem;
text-transform: uppercase;
opacity: 0;
transition: opacity 150ms ease-in-out;
}
nav a:hover {
color: #000;
}
.nav-toggle:checked ~ nav {
transform: scale(1,1);
}
.nav-toggle:checked ~ nav a {
opacity: 1;
transition: opacity 250ms ease-in-out 250ms;
}
#media screen and (min-width: 800px) {
.nav-toggle-label {
display: none;
}
header {
display: grid;
grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr;
height: 76px
}
.logo {
grid-column: 2 / 3;
position: absolute;
height: 200px;
//transform: scale(2,2);
}
nav {
// all: unset; /* this causes issues with Edge, since it's unsupported */
position: relative;
text-align: left;
transition: none;
transform: scale(1,1);
background: none;
top: initial;
left: initial;
/* end Edge support stuff */
grid-column: 3 / 4;
display: flex;
justify-content: flex-end;
align-items: center;
}
nav ul {
display: flex;
}
nav li {
margin-left: 3em;
margin-bottom: 0;
}
nav a {
opacity: 1;
position: relative;
}
nav a::before {
content: '';
display: block;
height: 5px;
background: black;
position: absolute;
top: 1.75em;
left: 0;
right: 0;
transform: scale(0, 1);
transition: transform ease-in-out 250ms;
}
nav a:hover::before {
transform: scale(1,1);
}
}
h1 {
margin:0
}
.logo a {
display: flex;
justify-content: center;
}
.logo img {
height: 74px;
margin-top: 1.1px;
}
</style>
</head>
<body>
<header>
<h1 class="logo"><img src="Images/Logo5.JPG"></h1>
<input type="checkbox" id="nav-toggle" class="nav-toggle">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
<form action="" method="" class="search" style="margin-top: 24px;">
<input type="" name="search" placeholder="Search..." style="padding: 5px; font-size: 15px">
</form>
<label for="nav-toggle" class="nav-toggle-label">
<span></span>
</label>
</header>
And then this is the sidebar.php
<style>
.sidenav {
height: 100%;
width: 160px;
margin-top: 6.1%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.main {
margin-left: 160px; /* Same as the width of the sidenav */
font-size: 28px; /* Increased text to enable scrolling */
padding: 0px 10px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
<div class="sidenav">
New Arrivals
Featured
Clothes
Brands
</div>

I reviewed your code and the reason you're not getting the result you want is because you put everything inside the div CONTAINER.
You put IMG BUTTON IMG BUTTON IMG BUTTON IMMG BUTTON so when the code runs it displays everything in a straight line as it actually is.
in order to get the result you want you need to structure your code with more divs inside the container div.
EXAMPLE:
<div class="container">
<div class="test">
<img src="Images/Logo5.JPG">
<button>Add to cart</button>
</div>
<div class="test">
<img src="Images/Logo5.JPG">
<button>Add to cart</button>
</div>
<div class="test">
<img src="Images/Logo5.JPG">
<button>Add to cart</button>
</div>
<div class="test">
<img src="Images/Logo5.JPG">
<button>Add to cart</button>
</div>
</div>
Let me know if you need more help.
And P.S keep your style code inside the style.css and not html files.

Add transition to centered navbar icon/logo/image on scrolldown

I've made a simple Navbar that's fixed to the top.
Originally when at the top, I would like the logo to be slightly larger, then on scroll down make it transition itself into the navbar.
When scrolling back to the top I would like the logo to come back out.
Any help or tips greatly appreciated!
Not scrolled
Scrolled down
Here's a codepen of what I have so far; the logo is oval shaped so I used batman as an example:
http://codepen.io/anon/pen/NRzWXk
HTML:
<nav>
<div id="nav_wrapper">
<ul>
<li>One
</li>
<li>Two
</li>
<li>Three
</li>
<li><img src="http://vignette1.wikia.nocookie.net/marvel_dc/images/c/ca/Batman_logo.png/revision/latest?cb=20140312205908" height="50px" width="60px">
</li>
<li>Four
</li>
<li>Five
</li>
<li>Six</li>
</ul>
</div>
</nav>
CSS:
html, body {
margin: 0;
padding: 0;
font-family: sans-serif;
background-color: #d7d2c4;
}
nav {
background-color: #704e46;
top: 0;
position: fixed;
width: 100%;
}
#nav_wrapper {
text-align: center;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
list-style-type: none;
display: inline-block;
padding: 15px;
-webkit-transition: background-color 0.5s; /* Safari */
transition: background-color 0.5s;
}
nav ul li a {
text-decoration: none;
color: white;
-webkit-transition: background-color 0.5s; /* Safari */
transition: background-color 0.5s;
}
nav ul li:hover {
background-color: #5d4037;
cursor: pointer;
}
nav ul li:hover a{
color: whitesmoke;
}

Hope you are looking for something like this
$(window).scroll(function() {
var scroll = $(window).scrollTop();
//>=, not <=
if (scroll >= 300) {
//clearHeader, not clearheader - caps H
$("#nav_wrapper").addClass("scrolled");
}
else{
$("#nav_wrapper").removeClass("scrolled");
}
});
html, body {
margin: 0;
padding: 0;
font-family: sans-serif;
background-color: #d7d2c4;
height: 1000px;
}
nav {
background-color: #704e46;
top: 0;
position: fixed;
width: 100%;
}
#nav_wrapper {
text-align: center;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
list-style-type: none;
display: inline-block;
padding: 15px;
-webkit-transition: background-color 0.5s; /* Safari */
transition: background-color 0.5s;
}
nav ul li a {
text-decoration: none;
color: white;
-webkit-transition: background-color 0.5s; /* Safari */
transition: background-color 0.5s;
}
nav ul li:hover {
background-color: #5d4037;
cursor: pointer;
}
nav ul li:hover a{
color: whitesmoke;
}
.logo {
padding: 50px;
transition: all ease-in .25s;
margin-bottom: -30px
}
.logo img{
transform : scale(3);
transition: all ease-in .25s;
}
.scrolled .logo{
padding: 15px;
}
.scrolled .logo img{
transform : scale(1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title> Camping Santa Lucia </title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<nav>
<div id="nav_wrapper">
<ul>
<li>One
</li><li>Two
</li><li>Three
</li><li class="logo"><img src="http://vignette1.wikia.nocookie.net/marvel_dc/images/c/ca/Batman_logo.png/revision/latest?cb=20140312205908" height="50px" width="60px">
</li><li>Four
</li><li>Five
</li><li>Six</li>
</ul>
</div>
</nav>
</body>
</html>

I'm not sure how to do it with pure CSS but since you tagged JQuery I'm going to go with that. The updated codepen is here: http://codepen.io/anon/pen/QyggBJ
Basically you add a position of absolute to your image and place it in the center. Then use jquery to detect scrolling and change position between static and absolute.
CSS:
img{
position:absolute;
right:48%;
}
Jquery:
$(window).scroll(function (e){
var scrollTop = $('body').scrollTop();
var topDistance = $('#nav_wrapper').offset().top;
if (topDistance == 0) {
$('img').css('position','absolute');
}else{
$('img').css('position','static');
}
});

try the jquery scroll() method
$("window").scroll(function() {
$("logo").animate(params);});
for params put in what 2d tranform you want like scale(2,3) etc.

Heres my take on it. Used jQuery for the toggling of the class:
http://codepen.io/banned/pen/GoEvEY
HTML:
<html>
<head>
<title> Camping Santa Lucia </title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<nav>
<div id="nav_wrapper">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<a class="image" href="#"></a>
<ul>
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ul>
</div>
</nav>
</body>
</html>
html, body {
margin: 0;
padding: 0;
font-family: sans-serif;
background-color: #d7d2c4;
height: 800px;
}
nav {
background-color: #704e46;
position: fixed;
width: 100%;
}
#nav_wrapper {
width: 100%;
text-align: center;
display: block;
}
nav ul {
list-style: none;
display: inline-block;
padding: 0;
margin: 0;
}
nav ul li {
list-style-type: none;
display: inline;
padding: 15px;
-webkit-transition: background-color 0.5s; /* Safari */
transition: background-color 0.5s;
}
Css:
nav ul li a {
text-decoration: none;
color: white;
-webkit-transition: background-color 0.5s; /* Safari */
transition: background-color 0.5s;
}
nav ul li:hover {
background-color: #5d4037;
cursor: pointer;
}
nav ul li:hover a{
color: whitesmoke;
}
.image {
height: 50px;
width: 80px;
background: url("http://vignette1.wikia.nocookie.net/marvel_dc/images/c/ca/Batman_logo.png/revision/latest?cb=20140312205908") no-repeat;
background-size: contain;
display: inline-block;
vertical-align: middle;
transition: 0.5s;
transform: scale(2);
margin: 30px 30px 0px;
}
.image.scrolled {
transition: 0.5s;
transform: scale(1);
margin: 0 10px;
}
jQuery:
$(window).scroll(function() {
if ($(window).scrollTop() > 70) {
if (!$(".image").hasClass("scrolled")) {
$(".image").toggleClass("scrolled");
}
} else if ($(window).scrollTop() < 70) {
if ($(".image").hasClass("scrolled")) {
$(".image").toggleClass("scrolled");
}
}
});

Develop Reference

JavaScript is the programming language of the Web.

DropDown menu closing when link is clicked, and closing when clicking away - javascript

Related

How to define the width limit which defines whether or not to display an hamburger menu

How do I animate my Navigation Button to perform the proper animation assigned to it using JavaScript?

How to close navigation bar when I click on other contents in the webpage

Why is my Add to Cart button appearing next to the image instead of below the image even on using the line break tag?

Add transition to centered navbar icon/logo/image on scrolldown

Categories

Resources