overlay when i open slide-out menu - javascript

I have an expanding navbar, I have been having difficulties implementing an overlay whenever the expanding navigation is open just like the way youtube's overlay appears when the slide out nav is open. please help.
the code has been well commented.
This is the javascript code for the expanding navigation below, i used jquery
'use strict';
// Open offsite navigation.
$('#nav-expander').on('click', function(e) {
e.preventDefault();
$('nav').toggleClass('nav-expanded');
});
// Close offsite navigation.
$('.menu .close').on('click', function(e) {
e.preventDefault();
$('nav').toggleClass('nav-expanded');
});
// Close offsite navigation after user click on an link in navigation.
$('.menu a').on('click', function(e) {
//se.preventDefault();
$('nav').removeClass('nav-expanded');
});
$('.body').on('click', function(e) {
//e.preventDefault();
$('nav').removeClass('nav-expanded');
});
$('.body2').on('click', function(e) {
//e.preventDefault();
$('nav').removeClass('nav-expanded');
});
$('.btn').on('click', function(e) {
//e.preventDefault();
$('nav').removeClass('nav-expanded');
});
//ending of offsite navigation
/************************************
*************************************
*************************************
GENERAL STYLING
*************************************
*************************************
************************************/
body{
background-color: #F2F3F4;
}
/************************************
GENERAL STYLING ENDING
************************************/
/************************************
*************************************
*************************************
HEADER STYLING
*************************************
*************************************
************************************/
header{
height: 57px;
border-bottom: 1px #DDDDDD solid;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.main__header{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
flex-grow: 1;
}
.header__content__left{
display: flex;
flex-direction: row;
flex-grow: 1;
align-items: center;
}
.header__content__right{
display: inline-flex;
flex-direction: row;
flex-grow: 1;
justify-content: flex-end;
align-items: center;
}
.header__content__right a{
font-weight: 600;
}
.header__margin__right{
margin-right: .5rem;
}
.header__margin__left{
margin-left: 1rem;
}
/************************************
*************************************
*************************************
SLIDE-OUT NAVIGATION STYLING
*************************************
*************************************
************************************/
.menu{
position: relative;
width: 280px;
display: block;
height: 100%;
top: 0;
left:-300px; /*was originally t right when the nav bar was on the right side*/
position: fixed;
z-index: 100;
text-align: center;
transition: left 0.1s; /** default on the right **/
overflow-y: auto; /* makes the expanding nav scrollable */
}
.menu.nav-expanded{
left: 0; /* was at right before, for nav bar to expand from left */
}
.menu .close{
font-size: 30px;
margin-right: 10px;
margin-top:10px;
}
.navbar__header{
height: 50px;
padding: 15px 30px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.nav__items__extra{
padding: 7px 30px 7px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.menu .nav__items{
padding-left: 0;
margin-top: 20px;
margin-bottom: 20px;
}
.menu ul{
list-style: none;
}
.nav__items li{
height: 44px;
}
.menu h4 a{
text-decoration: none;
}
.nav__items a{
text-decoration: none;
font-weight: 500;
}
/************************************
COLORING IN THE NAVBAR
************************************/
.navbar__default {
background: #f4f4f4;
}
.navbar__white {
background: #fff;
}
.navbar__black {
background: #000;
color: #fff;
}
.navbar__header__green{
color: #28B463;
}
.navbar__header__green:hover{
color: #28B463;
}
this is the html code for the expanding navbar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>bootstrap homepage</title>
<link href="https://fonts.googleapis.com/css?family=Droid+Sans|Droid+Serif|Noto+Sans" rel="stylesheet">
<script src="https://use.fontawesome.com/ebcec35828.js"></script>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/style.css">
</head>
<body class="">
<!--- This is for the header content -
------------------------------------->
<header class="container-fluid main__header color__white">
<div class="header__content__left">
<i class="fa fa-bars header__margin__right" style="font-size:20px;"></i>
<div class="color__logo__default">
<h4>spaces</h4>
</div>
</div>
<div class="header__content__right">
Log In<i class="pl-1"></i>
Post
</div>
</header>
<!--- Ending of the header content -
----------------------------------->
<!--- Slide-out navigation - - - - -
----------------------------------->
<nav class="menu navbar__white">
<i class="fa fa-close pt-1 pl-2 pr-2 pb-2"></i>
<h4>spaces</h4><hr style="margin-top:0px;">
<ul class="nav__items">
<li class="nav__li__style"> Explore</li>
<hr>
<li class="nav__li__style">About</li>
<li class="nav__li__style">Guidelines</li>
<li class="nav__li__style">Help and Support</li>
<li class="nav__li__style">Contact Us</li>
</ul>
</nav>
<!--- Ending of navigation - - - - -
----------------------------------->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>

Something like this?
You have to add an overlay div, with a fixed position that will cover the whole screen, next you have to set its z-index to be lower than your navigation panel but higher than all the other elements in your css, in your case setting z-index: 99 works well.
Finally, and since you are using jquery, you can show() and hide() it along with your navbar.
'use strict';
// Open offsite navigation.
$('#nav-expander').on('click', function(e) {
e.preventDefault();
$('nav').toggleClass('nav-expanded');
$('.overlay').show();
});
// Close offsite navigation.
$('.menu .close').on('click', function(e) {
e.preventDefault();
$('nav').toggleClass('nav-expanded');
$('.overlay').hide();
});
// Close offsite navigation after user click on an link in navigation.
$('.menu a').on('click', function(e) {
//se.preventDefault();
$('nav').removeClass('nav-expanded');
$('.overlay').hide();
});
$('.body').on('click', function(e) {
//e.preventDefault();
$('nav').removeClass('nav-expanded');
$('.overlay').hide();
});
$('.body2').on('click', function(e) {
//e.preventDefault();
$('nav').removeClass('nav-expanded');
$('.overlay').hide();
});
$('.btn').on('click', function(e) {
//e.preventDefault();
$('nav').removeClass('nav-expanded');
$('.overlay').hide();
});
//ending of offsite navigation
/************************************
*************************************
*************************************
GENERAL STYLING
*************************************
*************************************
************************************/
body{
background-color: #F2F3F4;
}
.overlay{
position: fixed;
display: none;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(0,0,0,0.8);
z-index: 99;
}
/************************************
GENERAL STYLING ENDING
************************************/
/************************************
*************************************
*************************************
HEADER STYLING
*************************************
*************************************
************************************/
header{
height: 57px;
border-bottom: 1px #DDDDDD solid;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.main__header{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
flex-grow: 1;
}
.header__content__left{
display: flex;
flex-direction: row;
flex-grow: 1;
align-items: center;
}
.header__content__right{
display: inline-flex;
flex-direction: row;
flex-grow: 1;
justify-content: flex-end;
align-items: center;
}
.header__content__right a{
font-weight: 600;
}
.header__margin__right{
margin-right: .5rem;
}
.header__margin__left{
margin-left: 1rem;
}
/************************************
*************************************
*************************************
SLIDE-OUT NAVIGATION STYLING
*************************************
*************************************
************************************/
.menu{
position: relative;
width: 280px;
display: block;
height: 100%;
top: 0;
left:-300px; /*was originally t right when the nav bar was on the right side*/
position: fixed;
z-index: 100;
text-align: center;
transition: left 0.1s; /** default on the right **/
overflow-y: auto; /* makes the expanding nav scrollable */
}
.menu.nav-expanded{
left: 0; /* was at right before, for nav bar to expand from left */
}
.menu .close{
font-size: 30px;
margin-right: 10px;
margin-top:10px;
}
.navbar__header{
height: 50px;
padding: 15px 30px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.nav__items__extra{
padding: 7px 30px 7px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.menu .nav__items{
padding-left: 0;
margin-top: 20px;
margin-bottom: 20px;
}
.menu ul{
list-style: none;
}
.nav__items li{
height: 44px;
}
.menu h4 a{
text-decoration: none;
}
.nav__items a{
text-decoration: none;
font-weight: 500;
}
/************************************
COLORING IN THE NAVBAR
************************************/
.navbar__default {
background: #f4f4f4;
}
.navbar__white {
background: #fff;
}
.navbar__black {
background: #000;
color: #fff;
}
.navbar__header__green{
color: #28B463;
}
.navbar__header__green:hover{
color: #28B463;
}
this is the html code for the expanding navbar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>bootstrap homepage</title>
<link href="https://fonts.googleapis.com/css?family=Droid+Sans|Droid+Serif|Noto+Sans" rel="stylesheet">
<script src="https://use.fontawesome.com/ebcec35828.js"></script>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/style.css">
</head>
<body class="">
<div class="overlay">
</div>
<!--- This is for the header content -
------------------------------------->
<header class="container-fluid main__header color__white">
<div class="header__content__left">
<i class="fa fa-bars header__margin__right" style="font-size:20px;"></i>
<div class="color__logo__default">
<h4>spaces</h4>
</div>
</div>
<div class="header__content__right">
Log In<i class="pl-1"></i>
Post
</div>
</header>
<!--- Ending of the header content -
----------------------------------->
<!--- Slide-out navigation - - - - -
----------------------------------->
<nav class="menu navbar__white">
<i class="fa fa-close pt-1 pl-2 pr-2 pb-2"></i>
<h4>spaces</h4><hr style="margin-top:0px;">
<ul class="nav__items">
<li class="nav__li__style"> Explore</li>
<hr>
<li class="nav__li__style">About</li>
<li class="nav__li__style">Guidelines</li>
<li class="nav__li__style">Help and Support</li>
<li class="nav__li__style">Contact Us</li>
</ul>
</nav>
<!--- Ending of navigation - - - - -
----------------------------------->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>

Related

hamburger toggler animation doesn't work immediately after refresh of page

hamburger toggler animation doesn't work immediately after i refresh the page, it starts working after i hit it one time. the mainMenu appears without animation the first time i hit the openMenu. i dont understand how its possible working after the second time i hit it. there is something i am missing probably. why is this happening?
const mainMenu = document.querySelector(".mainMenu");
const closeMenu = document.querySelector(".closeMenu");
const openMenu = document.querySelector(".openMenu");
openMenu.addEventListener("click", () => {
mainMenu.style.display = "flex";
mainMenu.style.top = "0";
});
closeMenu.addEventListener("click", () => {
mainMenu.style.top = "-100%";
});
.row .left {
height: 98vh;
background-color: #5a2a19;
}
.row .right {
height: 98vh;
background-color: #ff640b;
}
.row .right nav .openMenu {
font-size: 3em;
margin: 10px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
.row .right nav .mainMenu {
background-color: #ff640b;
height: 100vh;
display: none;
position: fixed;
top: 0;
right: 0;
left: 50%;
z-index: 10;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: top 1s ease;
transition: top 1s ease;
list-style: none;
}
.row .right nav .mainMenu li a {
display: inline-block;
padding: 15px;
text-decoration: none;
color: #5a2a19;
font-size: 1.5em;
font-weight: bold;
}
.row .right nav .mainMenu li a:hover {
color: #e6e8de;
}
.row .right nav .mainMenu .closeMenu {
font-size: 2em;
margin: 20px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
.row .right nav .mainMenu .icons i {
display: inline-block;
padding: 12px;
font-size: 2.2em;
color: #5a2a19;
cursor: pointer;
}
.row .right nav .mainMenu .bi-facebook:hover {
color: #4267b2;
}
.row .right nav .mainMenu .bi-instagram:hover {
color: #e1306c;
}
/*# sourceMappingURL=style.css.map */
<!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
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Bees cafe</title>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
crossorigin="anonymous"
></script>
<script src="js/index.js" defer></script>
</head>
<body>
<header>
<div class="row">
<div class="col-12 col-md-6 left"></div>
<div class="col-12 col-md-6 right">
<nav>
<div class="openMenu"><i class="bi bi-list"></i></div>
<ul class="mainMenu">
<li>lala</li>
<li>lala</li>
<li>lala</li>
<div class="closeMenu"><i class="bi bi-x-lg"></i></div>
<span class="icons">
<i class="bi bi-facebook"></i>
<i class="bi bi-instagram"></i>
</span>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>
If we are setting display to flex when opening for .mainMenu, but never when closing, we might as well set it to flex by default. This fixes the initial problem, but causes the menu to be open by default, so we can fix this by adding the same styling we add when closing, to the initial css (setting top: -100%; in .mainMenu).
const mainMenu = document.querySelector(".mainMenu");
const closeMenu = document.querySelector(".closeMenu");
const openMenu = document.querySelector(".openMenu");
openMenu.addEventListener("click", () => {
mainMenu.style.top = "0";
});
closeMenu.addEventListener("click", () => {
mainMenu.style.top = "-100%";
});
.row .left {
height: 98vh;
background-color: #5a2a19;
}
.row .right {
height: 98vh;
background-color: #ff640b;
}
.row .right nav .openMenu {
font-size: 3em;
margin: 10px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
.row .right nav .mainMenu {
background-color: #ff640b;
height: 100vh;
display: flex;
position: fixed;
top: -100%;
right: 0;
left: 50%;
z-index: 10;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: top 1s ease;
transition: top 1s ease;
list-style: none;
}
.row .right nav .mainMenu li a {
display: inline-block;
padding: 15px;
text-decoration: none;
color: #5a2a19;
font-size: 1.5em;
font-weight: bold;
}
.row .right nav .mainMenu li a:hover {
color: #e6e8de;
}
.row .right nav .mainMenu .closeMenu {
font-size: 2em;
margin: 20px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
.row .right nav .mainMenu .icons i {
display: inline-block;
padding: 12px;
font-size: 2.2em;
color: #5a2a19;
cursor: pointer;
}
.row .right nav .mainMenu .bi-facebook:hover {
color: #4267b2;
}
.row .right nav .mainMenu .bi-instagram:hover {
color: #e1306c;
}
/*# sourceMappingURL=style.css.map */
<!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
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Bees cafe</title>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
crossorigin="anonymous"
></script>
<script src="js/index.js" defer></script>
</head>
<body>
<header>
<div class="row">
<div class="col-12 col-md-6 left"></div>
<div class="col-12 col-md-6 right">
<nav>
<div class="openMenu"><i class="bi bi-list"></i></div>
<ul class="mainMenu">
<li>lala</li>
<li>lala</li>
<li>lala</li>
<div class="closeMenu"><i class="bi bi-x-lg"></i></div>
<span class="icons">
<i class="bi bi-facebook"></i>
<i class="bi bi-instagram"></i>
</span>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>

How do i deal with responsive menu?

I'm trying to make a responsive menu but texts are coming down when im resizing my website.
When i'm resizing to a lower dimension like 637 x 400 "a empresa" "projetos" and "contato" they drop and come down.
nav {
height: 60px;
width: 100%;
background-color: #a23286;
color: #eee;
position: fixed;
text-align: center;
}
/* menu + logo dimensoes */
nav ul {
display: inline-block;
padding: 0;
margin: 0;
text-align: center;
}
nav li {
float: none;
display: inline-block;
text-align: center;
}
nav a {
display: inline-block;
width: 100px;
text-align: center;
padding: 17px 0;
color: #eee;
text-decoration: none;
}
nav ul li:hover {
border-bottom: 5px solid #a23286;
}
nav a#openup {
display: none;
}
Should i just create a query in css for this state and change the font of the text?
https://codepen.io/rfop2/pen/JjjBBRe
You can use a media query and set the interval between 400px and 637px and set the width of nav a to 85px.
#media only screen and (max-width: 637px) and (min-width: 400px) {
nav a {
width: 85px;
}
}
Your codepen: Codepen
You can just use css flex for this. See ul style below.
nav ul {
display: flex;
flex-wrap: no-wrap;
justify-content: center;
padding: 0;
margin: 0;
}
$(function() {
menu = $("nav ul");
$("#openup").on("click", function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function() {
var w = $(this).width();
if (w > 480 && menu.is(":hidden")) {
menu.removeAttr("style");
}
});
$("nav li").on("click", function(e) {
var w = $(window).width();
if (w < 480) {
menu.slideToggle();
}
});
$(".open-menu").height($(window).height());
});
$('.cf a').on('click', function(event){
if(this.hash !== ''){
event.preventDefault();
const hash = this.hash;
$('html, body').animate(
{
scrollTop: $(hash).offset().top
},
800,
function(){
window.location.hash = hash;
}
);
}
});
#import url('https://fonts.googleapis.com/css?family=Titillium+Web&display=swap');
/* corpo geral */
body {
font-family: 'Titillium Web', sans-serif;
margin: 0;
line-height: 1.6;
}
/* menu */
nav {
height: 60px;
width: 100%;
background-color: #a23286;
color: #eee;
position: fixed;
text-align: center;
}
/* menu + logo dimensoes */
nav ul {
display: flex;
flex-wrap: no-wrap;
justify-content: center;
padding: 0;
margin: 0;
}
nav li {
float: none;
display: inline-block;
text-align: center;
}
nav a {
display: inline-block;
width: 100px;
text-align: center;
padding: 17px 0;
color: #eee;
text-decoration: none;
}
nav ul li:hover {
border-bottom: 5px solid #a23286;
}
nav a#openup {
display: none;
}
/* logo no menu */
.logo{
float: left;
height: 50px;
}
.textoIn{
background-color: #a23286;
height: 400px;
}
h1{
margin: 0;
padding: 0;
padding-top: 100px;
text-align: center;
font-size: 30px;
color: black;
}
/* texto abaixo do menu */
#media screen and (max-width: 580px) {
nav {
height: auto;
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav li {
width: 100%;
float: left;
position: relative;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
background: #a23286;
border-bottom: 1px solid #555;
}
nav a:hover {
background-color: #a23286;
}
nav a#openup:after {
content: "|||";
transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
/* IE 9 */
-webkit-transform: rotate(-90deg);
/* Safari and Chrome */
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 5px;
top: 20px;
}
nav a#openup {
display: block;
background-color: #a23286;
width: 100%;
position: relative;
}
}
.cf:before, .cf:after {
content: "";
display: table;
}
.cf:after {
clear: both;
}
.cf {
zoom: 1;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Titillium+Web&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<title>JRConecte</title>
</style>
</head>
<body>
<!-- Menu -->
<div id="Menu">
<header>
<nav class='cf'>
<ul class='cf'>
<div class = "logo">
<img src="./img/logojrc.png">
</div>
<li>
INICIO
</li>
<li>
<a href='#atuacao'>ATUAÇÃO</a>
</li>
<li>
<a href='#equipe'>EQUPE</a>
</li>
<li>
<a href='#empresa'>A EMPRESA</a>
</li>
<li>
<a href='#projetos'>PROJETOS</a>
</li>
<li>
<a href='#contato'>CONTATO</a>
</li>
</ul>
<a href='#' id='openup'>JRConecte</a>
</ul>
</nav>
</header>
</div>
<!-- Texto inicial -->
<div id="home">
<div class='textoIn'>
<h1>
asdasdasddsadaasdasdsadadadsa
</h1>
</div>
</div>
<!-- Areas de Atuacao -->
<div>
</div>
<!-- Nossa Equipe -->
<div></div>
<!-- A empresa -->
<div>
</div>
<!-- Nossos Projetos-->
<div> </div>
<!-- Depoimentos -->
<div></div>
<!-- Fale Conosco -->
<div> </div>
<!-- Redes Socias -->
<div></div>
<script
src="http://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script src="js/main.js"></script>
</body>
</html>

nav bar dissapears(in full size window) after using the menu button in mobile size

I've been following a tutorial about nav bars and everything is good except when I make the window small and try the menu button and re-scale the window to normal size everything disappears.
I've tried adding an if statement in the JavaScript but that doesn't solve the problem.
https://codepen.io/diegopiscoya/pen/yZJWBy
<script type="text/javascript">
$(document).ready(function(){
$(".menu").click(function(){
$("nav").slideToggle(500);
})
})
</script>
I expected the script to work only when the window size is <900 but it works always, so when the menu button hides the nav bar it does it in full size as well.
So, let's understand what is happening on the code...
When $(".menu").click(...) is triggered, it fires $("nav").slideToggle(500);, the slide toggle method on its final action will add a inline css property on the nav element, it will be display: block; if nav was hidden, or display: none if nav was displayed.
Then when you open and close the mobile menu and you re-scale the window wider than 900px, the inline display: none still on the nav, so it is not displaying because the inline CSS is in effect.
The solution would be:
A workaround you can do is to "force" the CSS to apply display:block to your nav if the window is wider than 900px, by using the #media and setting the !important rule.
So:
#media(min-width: 901px) {
nav#navegacion {
display: block !important;
}
}
This is a CSS solution, of course there is many different ways to do it by the CSS and Javascript. But I believe that is a simple one.
$(document).ready(function(){
$(".menu").click(function(){
$("nav").slideToggle(500);
})
})
body{
margin: 0px;
padding: 0px;
font-family: "Bree serif", serif;
}
#navegacion{
width: 100%;
padding: 0 50px;
box-sizing: border-box;
}
.logo{
margin: 0;
padding: 15px 20px;
float: left;
}
#nav-list{
padding: 0;
margin: 0;
float: right;
}
#nav-list li{
list-style: none;
display: inline-block;
padding: 20px 30px;
transition: .5s;
}
#nav-list li a{
color: black;
text-decoration: none;
}
.nav_li:hover{
background: rgba(0, 0, 0, 0.089);
}
.resp-menu{
width: 100%;
background:#fff;
padding: 10px 30px;
box-sizing: border-box;
display: none;
}
.resp-menu a{
margin: 0;
padding: 3px 0;
float: left;
}
.resp-menu h4{
margin: 0;
padding: 5px 10px;
color: #fff;
float: right;
background: yellow;
text-transform: uppercase;
cursor: pointer;
}
#media(max-width: 900px)
{
#navegacion{
display: none;
padding: 0;
}
.resp-menu{
display: block;
}
.logo{
display: none;
float: none;
}
#nav-list{
float: none;
display: block;
}
#nav-list li{
display: block;
color: black;
text-align: center;
padding: 15px 20px;
border-bottom: 1px solid rgba(12, 8, 8, 0.1);
}
.resp-menu a{
display: block;
}
}
#media(min-width: 901px) {
nav#navegacion {
display: block !important;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,
user-scalable=no">
<meta http-equiv="X-UA-compatible" content="ie=edge">
<title>document</title>
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">
</head>
<body>
<nav id="navegacion">
<img src="wilphar_logo2.png" width="70">
<ul id="nav-list">
<li class="nav_li">Inicio</li>
<li class="nav_li">Nosotros</li>
<li class="nav_li">Productos</li>
<li class="nav_li">Contacto</li>
</ul>
<div style="clear: both"></div>
</nav>
<div class="resp-menu">
<img src="wilphar_logo2.png" width="70">
<h4 class="menu">menu</h4>
<div style="clear: both"></div>
</div>
</body>
</html>

Navbar items disappear after clicking the hamburger icon and then resizing the browser

I appreciate all the help I can get :)
I'm trying to create a responsive navbar, which is editable for later usage.
But it seems like I have an issue with the hamburger icon. If I resize the web browser the content gets switched for the mobile friendly hamburger icon and the menu appears, and vice versa.
But when I click the hamburger icon in the mobile view and then click it again to make the menu disappear and after this resizing it to desktop view the menu goes missing.
How can I make it work?
HTML:
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Framework</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
<script src="js/main.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$(".navbar-hamburger").click(function(){
$(".navbar-item").toggle();
});
});
</script>
</head>
<body class="bg-grey-light">
<nav class="navbar bg-white">
<div class="navbar-brand">Company Name</div>
<div class="navbar-item">
Home
</div>
<div class="navbar-item">
About
</div>
<div class="navbar-item">
Shop
</div>
<div class="navbar-item">
Forum
</div>
<div class="navbar-hamburger">
<i class="fa fa-chevron-down"></i>
</div>
</nav>
</body>
CSS:
.navbar{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
position: relative;
}
.navbar-brand{
flex-grow: 100;
padding: 0.75rem;
padding-left: 1.5rem;
}
.navbar-item{
flex-grow: 0;
padding: 0.75rem;
display: block;
}
.navbar-item:hover {
background-color: var(--color-grey-lighter);
}
.navbar-hamburger{
display: none;
position: absolute;
padding: 0.75rem 1.5rem 0.75rem 1.5rem;
right: 0;
}
.navbar-hamburger-active{
display: none;
position: absolute;
padding: 0.75rem 1.5rem 0.75rem 1.5rem;
right: 0;
}
#media only screen and (max-width: 720px) {
.navbar{
flex-direction: column;
align-items: flex-start;
}
.navbar-brand{
width: 100%;
}
.navbar-item{
width: 100%;
padding-left: 1.5rem;
display: none;
}
.navbar-hamburger{
display: block;
}
}
Brief DEMO:
https://codepen.io/zalandemeter12/pen/dQayMP
Regards
You can use toggleClass instead and hide navbar-item only on little screens
#import url("https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
.navbar{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
position: relative;
}
.navbar-brand{
flex-grow: 100;
padding: 0.75rem;
padding-left: 1.5rem;
}
.navbar-item{
flex-grow: 0;
padding: 0.75rem;
display: block;
}
.navbar-item:hover {
background-color: var(--color-grey-lighter);
}
.navbar-hamburger{
display: none;
position: absolute;
padding: 0.75rem 1.5rem 0.75rem 1.5rem;
right: 0;
}
.navbar-hamburger-active{
display: none;
position: absolute;
padding: 0.75rem 1.5rem 0.75rem 1.5rem;
right: 0;
}
#media only screen and (max-width: 720px) {
.navbar{
flex-direction: column;
align-items: flex-start;
}
.navbar-brand{
width: 100%;
}
.navbar-item{
width: 100%;
padding-left: 1.5rem;
display: none;
}
.navbar-hamburger{
display: block;
}
#media only screen and (max-width: 768px) {
.navbar-item{
display:none;
}
.navbar-item.opened{
display:block;
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$(".navbar-hamburger").click(function(){
$(".navbar-item").toggleClass('opened');
});
});
</script>
<nav class="navbar bg-wihite">
<div class="navbar-brand">Company Name</div>
<div class="navbar-item">
Home
</div>
<div class="navbar-item">
About
</div>
<div class="navbar-item">
Shop
</div>
<div class="navbar-item">
Forum
</div>
<div class="navbar-hamburger">
<i class="fa fa-chevron-down"></i>
</div>
</nav>

Creating transparent overlays for horizontal row of 3 <img>

I want to cause an overlay on mouseover for my three images. I believe it will be best to use jQuery after creating a div. However, when I add a new div to my layout (below each of the <img> in my code) My layout is screwed up; goes from horizontal list to vertical list if i try to add in any <div> below my <img>.
I mainly want the overlay just sitting there. Im sure I can figure out mouseover action, but main issue is I cannot generate initial overlay
stackoverflowers: please help me add in an overlay div that will ultimately be transparent.
home.html I have commented out my attempt at placing overlay divs
<!DOCTYPE html>
<html>
<head>
<link type = "text/css" rel="stylesheet" href="stylesheet.css"/>
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<title>Home Page</title>
</head>
<body>
<div class="header">
<ul id="headerMenu">
<li>
PROGRAM
<ul id="programDrop">
<li><a href='#'>INSPECTIONS</a></li>
<li><a href='#'>SOFTWARE</a></li>
<li><a href='#'>SAVINGS</a></li>
</ul>
</li>
<li>LOGIN
<ul id="loginDrop">
<li><a href='#'>TECHNICIAN LOGIN</a></li>
<li><a href='#'>CUSTOMER LOGIN</a></li>
</ul>
</li>
<li>ABOUT</li>
</ul>
</div>
<div id="midMain">
<div class="circularImg">
<img src="http://media.treehugger.com/assets/images/2011/10/ice-energy-store.jpg"/>
<!-- <div class="overlay"></div> -->
<img src="http://www.contemporist.com/photos/e4delmar.jpg"/>
<!-- <div class="overlay"></div> -->
<img src="http://www.rkmheatingandair.com/service-tech2.jpg"/>
<!-- <div class="overlay"></div> -->
</div>
</div>
</body>
</html>
stylesheet.css
body {
margin: 0;
}
.header {
background-color: white;
font-family: sans-serif;
height: 75px;
width: 100%;
display: table;
}
/* Main centered menu on top */
#headerMenu {
text-align: center;
padding: 0;
list-style: none;
display: table-cell;
vertical-align: bottom;
font-size: 1rem;
}
#headerMenu > li {
display: inline-block;
}
#headerMenu > li:nth-child(1) {
color:red;
}
#headerMenu li a {
text-decoration: none;
color: black;
margin: 2rem;
padding: 0;
}
#headerMenu li a:hover {
color: lightgray;
}
/* Sub Menu for Link One */
#programDrop {
text-decoration: none;
list-style: none;
display: block;
visibility: hidden;
padding-left: 0;
text-align: left;
position:absolute;
}
#programDrop li a{
color: black;
text-align: left;
list-style: none;
}
/* Sub Menu for Link Two */
#loginDrop {
text-decoration: none;
list-style: none;
display: block;
visibility: hidden;
padding-left: 0;
text-align: left;
position:absolute;
}
#loginDrop li a{
color: black;
text-align: left;
}
/* Photos on home page */
#midMain {
border: 1px solid red;
background-color: white;
text-align: center;
}
.circularImg {
overflow: hidden;
display: inline-block;
margin: auto;
padding: 0;
}
/* Removed code because nothing works as of yet */
.overLay {
}
/* Sets img imports as circular by default */
img {
border-radius: 50em;
min-height: 10em;
height: 18em;
width: 18em;
min-width: 10em;
margin: 3rem;
position:relative;
opacity: .5;
}
included jQuery script.js
jQuery(document).ready(function() {
$('#headerMenu > li:nth-child(1)').mouseenter(function() {
$('#programDrop').css('visibility','visible');
});
$('#headerMenu > li:nth-child(1)').mouseleave(function() {
$('#programDrop').css('visibility','hidden');
});
});
jQuery(document).ready(function() {
$('#headerMenu > li:nth-child(2)').mouseenter(function() {
$('#loginDrop').css('visibility','visible');
});
$('#headerMenu > li:nth-child(2)').mouseleave(function() {
$('#loginDrop').css('visibility','hidden');
});
});
As per comments
CSS
.overlay {
background:black;
border-radius: 50em;
min-height: 10em;
height: 18em;
width: 18em;
min-width: 10em;
margin: 3rem;
position:relative;
}
HTML
<div class="overlay"><img src="http://media.treehugger.com/assets/images/2011/10/ice-energy-store.jpg"/></div>
CODE
$(document).on("mouseover", "img", function() {
$(".overlay").css({"z-index": "999"});
$("img").css("opacity",".5");
});
Demo
http://jsfiddle.net/79zty3h7/

Categories