Menu disappears after toggle - javascript

I've got a drop down list menu for when the window width is 720px or less. When the resolution exceeds that, the li elements are displayed as table-cells. The drop down menu itself works fine, but when I close the menu and expand the resolution past 720px, the entire list is gone. How do I fix this so that the list is always visible past 720px?
Here's a picture of my problem in case I didn't explain that too well:
HTML
<div class='menu'>
<button type='button' class='showList'>Menu</button>
<div class='full_list'>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
CSS
.full_list {
display: none;
}
#media (min-width: 720px) {
.full_list {
display: block;
}
.menu button {
display: none;
}
.menu {
display: table;
background: #fff;
margin: 0 auto;
}
li {
display: table-cell;
vertical-align: middle;
}
ul {
white-space: nowrap;
}
}
Javascript
$(document).ready(function() {
$('.showList').click(function() {
$('.full_list').slideToggle("fast");
});
});
Click here for the fiddle
be sure to resize it before and after clicking the menu button.
Thanks for any help!

As you want the .full_list to keep its diplay:block not affect by the .slideToggle(), add !important to
.full_list {
display: block;
}
So it becomes
.full_list {
display: none;
}
#media (min-width: 720px) {
.full_list {
display: block !important;
}
.menu button {
display: none;
}
.menu {
display: table;
background: #fff;
margin: 0 auto;
}
li {
display: table-cell;
vertical-align: middle;
}
ul {
white-space: nowrap;
}
}
See jsfiddle, or altered version of your jsfiddle

A much better way to do this would be do toggle class.
Create a class as -
.full_list-expanded {
display: block;
}
and modify the jQuery as-
$(document).ready(function() {
$(".showList").click(function() {
$(".full_list").slideToggle(400, function() {
$(this).toggleClass("full_list-expanded").css('display', '');
});
});
});
Here is the fiddle.

Although fuyushimoya's solution is functional, the use of !important must be avoided as much as you can. It should be considered as a last resort.
Try modifying jQuery like this -
$(document).ready(function() {
$('.showList').click(function() {
$('.full_list').slideToggle("fast");
});
$(window).resize(function(){
if($(window).width()>=720)
$('.full_list').css('display','block');
else
$('.full_list').css('display','none');
});
});
This is the fiddle

<style>
.full_list {
display: none;
}
.showList{
border: none;
width: 100%;
padding: 5px 0px;
text-align: center;
background: #CCC;
cursor: pointer;
}
.full_list{
width: 100%;
float: left;
}
.full_list > ul{
float: left;
margin: 0;
padding: 0;
text-align: center;
width: 100%;
}
.full_list > ul > li{
list-style: none;
text-align: center;
padding: 5px 0px;
border-left: 1px solid #CCC;
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
width: 99%;
float: left;
}
#media (min-width: 720px) {
.full_list {
display: block;
}
.menu button {
display: none;
}
.menu {
display: table;
background: #fff;
margin: 0 auto;
}
li {
display: table-cell;
vertical-align: middle;
}
ul {
white-space: nowrap;
}
}
</style>
<div class='menu'>
<button type='button' class='showList'>Menu</button>
<div class='full_list'>
<ul>
<li>dsdsadsa</li>
<li>sadsadsadsad</li>
<li>fdsfds</li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('.showList').click(function () {
$('.full_list').slideToggle("fast");
});
});
</script>

Related

Responsive hamburger menu using ul/li tags

I've been trying to follow a few tutorials to turn a horizontal menubar into a drop-down hamburger menu when displayed on smaller screens, but I'm struggling to make it come together properly. I noticed a lot of tutorials seem to do away with ul/li format, which I'd like to save for semantic and accessible reasons, but this has left me struggling to get the dropdown to appear correctly on the screen.
My goal is to allow the hamburger menu to open the four menu items, centered on the screen, below the top header bar. I've managed to make the hamburger menu "work," but it's opening the items not centered and not below the top menubar. Any suggestions that don't require revamping the entire menubar code, if possible?
const menu = document.querySelector(".nav");
let open;
function openMenu() {
if (open) {
menu.style.display = "none";
open = false;
} else if (!open) {
menu.style.display = "block";
open = true;
}
}
.menubar {
width: 100%;
height: 50px;
line-height: 50px;
vertical-align: middle;
background-color: #fff;
border-bottom: 1px solid #f5f5f5;
position: fixed;
top: 0;
-webkit-user-select: all;
user-select: none;
display: flex;
align-items: center;
}
.logo {
font-size: 24px;
display: flex;
align-items: center;
padding-left: 15px;
position: absolute;
}
.nav {
display: flex;
font-size: 18px;
flex-direction: row;
list-style: none;
margin: 0 auto;
padding: 0;
}
.nav li {
margin: 0 15px;
}
.hamburger {
margin: 0 13px 0 auto;
height: inherit;
}
#media screen and (min-width: 801px) {
.nav {
display: flex !important;
}
.hamburger {
display: none;
}
}
#media screen and (max-width: 800px) {
.hamburger {
display: flex;
}
.nav {
display: none;
text-align: center;
}
}
<body>
<div class="menubar">
WEBSITE NAME
<ul class="nav">
<li>HOME</li>
<li>MENU1</li>
<li>MENU2</li>
<li>ABOUT</li>
</ul>
<input type="image" class="hamburger" onclick={openMenu()} src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/800px-Hamburger_icon.svg.png" />
</div>
</body>
Accompanying JSFiddle.
You can add a window load and resizing listener. When the window gets smaller than 800px the script will add a class to your element.
I currently have it set to place a class .mobile. Made the necessary stylistic changes to this class for the mobile menu
Add this in your JS code:
window.addEventListener('resize', setMobileClass);
window.addEventListener('load', setMobileClass);
function setMobileClass() {
if (window.innerWidth <= 800) {
menu.classList.add('mobile');
} else {
menu.classList.remove('mobile');
}
};
Add this in your CSS:
.mobile {
position: absolute;
right: 0px;
top: 50px;
}
EXAMPLE:
const menu = document.querySelector(".nav");
let open;
function openMenu() {
if (open) {
menu.style.display = "none";
open = false;
} else if (!open) {
menu.style.display = "block";
open = true;
}
}
window.addEventListener('resize', setMobileClass);
window.addEventListener('load', setMobileClass);
function setMobileClass() {
if (window.innerWidth <= 800) {
menu.classList.add('mobile');
} else {
menu.classList.remove('mobile');
}
};
.menubar {
width: 100%;
height: 50px;
line-height: 50px;
vertical-align: middle;
background-color: #fff;
border-bottom: 1px solid #f5f5f5;
position: fixed;
top: 0;
-webkit-user-select: all;
user-select: none;
display: flex;
align-items: center;
}
.logo {
font-size: 24px;
display: flex;
align-items: center;
padding-left: 15px;
position: absolute;
}
.nav {
display: flex;
font-size: 18px;
flex-direction: row;
list-style: none;
margin: 0 auto;
padding: 0;
}
.nav li {
margin: 0 15px;
}
.hamburger {
margin: 0 13px 0 auto;
height: inherit;
}
#media screen and (min-width: 801px) {
.nav {
display: flex !important;
}
.hamburger {
display: none;
}
}
#media screen and (max-width: 800px) {
.hamburger {
display: flex;
}
.nav {
display: none;
text-align: center;
}
}
.mobile {
position: absolute;
right: 0px;
top: 50px;
}
<div class="menubar">
WEBSITE NAME
<ul class="nav">
<li>HOME</li>
<li>MENU1</li>
<li>MENU2</li>
<li>ABOUT</li>
</ul>
<input type="image" class="hamburger" onclick={openMenu()}
src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/800px-Hamburger_icon.svg.png" />
</div>
I found a fitting and elegant solution based on 54ka's answer. Instead of adding a mobile class with extra JS code, I modified screen-size restricted nav class to be the following:
#media screen and (max-width: 800px) {
.hamburger {
display: flex;
}
.nav {
display: none;
position: absolute;
text-align: center;
width: 100%;
right: 0px;
top: 50px;
}
}
This ensured that the menu would appear centered, underneath the menubar. Additional background-color and border commands can be added to clean up the dropdown menu.

How to make the dropdown menu collapse when not in use

So I have a dropdown menu and when I click it it works but when I click out it stays open. I've tried using mouseout mousedown onclick ondblclick etc but none of them work. Please help :(
[What I've tried][1]
Attach click listener to your document, if clicked element is img then display dropwdown else hide.
const menu = document.querySelector('#dropdown');
document.addEventListener('click', function(e) {
menu.classList.toggle('show', e.target.tagName == "IMG");
});
.menu {
float: right;
margin: 24px;
position: relative;
display: inline-block;
}
.menu img {
cursor: pointer;
}
.dropdown {
position: absolute;
z-index: 1;
float: right;
width: 150px;
background-color: lightgray;
top: 73px;
right: -24px;
display: none;
}
.dropdown a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
color: #B00D93;
font-weight: bold;
}
.show {
display: block;
}
<div class="menu" id="menu">
<img src="https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2018/06/Screen-Shot-2018-06-13-at-8.07.34-PM.png" id="dropdownImg" alt="" width="45px" height="45px">
<div class="dropdown" id="dropdown">
Home
About Us
Services
Feedback
</div>
</div>
check this : https://jsfiddle.net/85yz7asd/
showHide = () => {
var dropdown = document.getElementById("dropdown")
dropdown.style.display == "block" ? dropdown.style.display = "none" : dropdown.style.display = "block"
}
This is a Pure HTML and CSS example:
HTML
<div class="dropdown">
<div class="dropdown-btn">Hover Me</div>
<ul class="dropdown-list">
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
</ul>
</div>
CSS
.dropdown {
display: block;
position: absolute;
}
.dropdown-btn {
text-align: center;
background-color: black;
color: white;
display: block;
position: absolute;
width: 200px;
height: auto;
padding: 10px;
font-size: 16px;
cursor: pointer;
}
.dropdown-list {
position: relative;
display: none;
width: 200px;
height: auto;
list-style: none;
margin-top: 40px;
padding: 0;
}
.dropdown-list li a {
text-align: center;
text-decoration: none;
display: block;
padding: 10px;
width: 200px;
background-color: black;
color: white;
margin-top: 5px;
}
.dropdown-list li a:hover {
background-color: grey;
color: white;
}
.dropdown:hover .dropdown-list {
display: block;
}
working js fiddle
If you want to use your current code, try this.
Clicking on the dropdownImg element will open the menu.
Clicking anywhere else will close the menu.
https://jsfiddle.net/t6wpgjrd/
document.onclick = function(e) {
if(e.target.id === "dropdownImg") {
show();
}
else{
hide();
}
}
And don't forget to remove the onclick and onblur attributes from your dropdownImg element.

Why is my dropdown accordion not working?

Trying to get a simple dropdown accordion to work but not sure why it's not dropping down when clicked. Would like to get the 'Collapse all' button to switch to 'Open' when toggled (but not absolutely necessary). Open to the idea of a pure css accordion as well. Pretty new to javascript and JQuery so any info is helpful on this. TIA.
<div class="accordion">
<div class="chapters___2NT4M js-chapters">
<section id="table-of-contents" class="table_of_contents___2HR-W accordion">
<header class="table_of_contents__chapter_title___2W8SV">
<h2 class="table_of_contents__chapter_heading___19HQO" tabindex="0">Navigate to..</h2>
<button class="table_of_contents__toggle_all___fVHqW accordion-header" aria-expanded="true" aria-pressed="true" aria-haspopup="true">Collapse all</button>
</header>
<div class="accordion-content">
<ul class="table_of_contents__chapter_list___2gu-a" data-gtm-element="review_toc_list">
<li class="table_of_contents__chapter_list_heading___3_laf">Zener Diodes</li>
<li class="table_of_contents__chapter_list_heading___3_laf">Bridge Rectifiers</li>
<li class="table_of_contents__chapter_list_heading___3_laf">Schottky Barrier Rectifiers</li>
<li class="table_of_contents__chapter_list_heading___3_laf">Super Fast Recovery Rectifiers</li>
<li class="table_of_contents__chapter_list_heading___3_laf">Medium Power Bipolar Transistors</li>
<li class="table_of_contents__chapter_list_heading___3_laf">Transient Protection</li>
<li class="table_of_contents__chapter_list_heading___3_laf">thyristor Modules</li>
<li class="table_of_contents__chapter_list_heading___3_laf">Obsoleted/EOL Products</li>
<li class="table_of_contents__chapter_list_heading___3_laf">Cross Reference</li>
</ul>
</div>
</section>
</div>
</div>
css
.accordion-content {
display: none;
border-bottom: 1px solid #DDE0E7;
background: #F6F7F9;
padding: 1.5rem;
color: #4a5666;
}
.accordion-header::before {
content: '';
vertical-align: middle;
display: inline-block;
width: .75rem;
height: .75rem;
border-radius: 50%;
background-color: #B1B5BE;
margin-right: .75rem;
}
.accordion-content.active {
display: block;
height: 200px;
}
#media (min-width: 80em) {
.chapters___2NT4M {
max-width: 570px;
}
}
.chapters___2NT4M {
clear: both;
margin-left: auto;
margin-right: auto
}
#media (min-width: 30em) {
.table_of_contents___2HR-W {
margin: 2em 0 0;
}
}
.table_of_contents___2HR-W {
border-top: 3px solid #000;
margin: 5em 0 0;
padding-top: 0;
}
article, aside, footer, header, nav, section {
display: block;
}
#media (min-width: 48em) {
.table_of_contents__chapter_title___2W8SV {
padding: 0;
}
}
.table_of_contents__chapter_title___2W8SV {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin: 0;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
font-size: 1.5rem;
line-height: 1.5rem;
padding: .4em 0 1.2em;
}
#media (min-width: 80em) {
.table_of_contents__chapter_list___2gu-a {
margin-bottom: 57px;
}
}
#media (min-width: 48em) {
.table_of_contents__chapter_list___2gu-a {
display: block;
}
}
.table_of_contents__chapter_list___2gu-a {
display: ;
margin: 0 0 52px;
padding: 0;
list-style: none;
border-top: 0;
}
ol, ul {
margin: 0 0 1em 1.2em;
padding: 0;
}
#media (min-width: 48em) {
.table_of_contents__chapter_list___2gu-a .table_of_contents__chapter_list_heading___3_laf {
font-size: 1.125rem;
line-height: 1.25rem;
}
}
.table_of_contents__chapter_list___2gu-a .table_of_contents__chapter_list_heading___3_laf {
font-size: 1.1875rem;
line-height: 1.4375rem;
font-family: Arial, Helvetica, sans-serif;
font-weight: 700;
margin-bottom: .8em;
}
.table_of_contents__chapter_list___2gu-a .table_of_contents__chapter_list_heading___3_laf a, .d235 a {
color: #000;
}
.table_of_contents__chapter_list___2gu-a .table_of_contents__chapter_list_heading___3_laf a {
color: #222;
text-decoration: none;
}
.table_of_contents__chapter_list___2gu-a .table_of_contents__chapter_list_heading___3_laf a:hover {
color: #000;
border-bottom: 1px solid #000;
}
js
$(document).ready();
$(".accordion").on("click", ".accordion-header", function() {
$(this).toggleClass("active").next().slideToggle();
});
You can get something similar to an accordion without using javascript by using the html element details.
<details>
<summary>Title</summary>
Some text
</details>
Then, when you click on the title, it expands itself. No js required
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
There are a few issues here but I would start with the JS. Important thing here is that inside your click function this will be reference to the element that was clicked. So as I am reading it, you are toggling an active class on the button itself.
Also, I believe you intended to use document.ready() as the context of running the accordion code.
$(document).ready(function() {
$(".accordion").on("click", ".accordion-header", function() {
$(".accordion-content").toggleClass("active");
});
});
I have not got any sliding in this snippet but hopefully this gets your click connected to the CSS change that shows/hides the accordion content.

Close navigation when navigation item is clicked

My goal is for my hamburger menu to close when an item is clicked inside of it. As of right now, the menu only uses html and css.
The difference between this nav bar and others is that mine is created from a input checkbox html element, what i need is for my checkbox to uncheck when a link is clicked inside of the hamburger. This should close the entire menu just like it would if i clicked on the hamburger. Also, could you explain what and why the javascript does what it does, i don't have much experience with javascript, thanks. :)
I also made the checkbox visible just so that we can have a better understanding of whats going on.
My CSS:
/* navigation menu */
.nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
line-height: 70px;
text-align: right;
z-index: 10000;
background-color: #ffffff;
border-bottom: 1px solid #eaeaeb;
}
.menu {
margin: 0 30px 0 0;
}
/* link items */
.menu a {
clear: right;
line-height: 70px;
text-decoration: none;
margin: 0 10px;
text-align: center;
color: #33334d;
background-color: #ffffff;
}
.menu a:hover {
background-color: #c2c2d6;
}
/* hamburger properties */
label {
float: right;
display: none;
width: 26px;
line-height: 70px;
margin: 0 40px 0 0;
font-size: 36px;
}
/* checkbox */
#toggle {
}
#media only screen and (max-width: 1075px) {
/* hamburger properties */
label {
display: block;
cursor: pointer;
}
/* nav menu properties */
.menu {
width: 100%;
display: none;
text-align: center;
}
/* link items */
.menu a {
display: block;
margin: 0px;
border-bottom: 1px solid #eaeaeb;
}
/* makes links show when checkbox is checked */
#toggle:checked + .menu {
display: block;
}
}
My HTML:
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<div class="menu">
example
example
example
example
example
example
example
</div>
</div>
Javscript may not actually be required, depending on your needs.
If you give the div containing your nav links an ID you can target this with an a tag setting the href to the ID. Then you can use the :target selector to change the visibility of our navigation div.
/* navigation menu */
.nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
line-height: 70px;
text-align: right;
z-index: 10000;
background-color: #ffffff;
border-bottom: 1px solid #eaeaeb;
}
.menu {
margin: 0 30px 0 0;
}
/* link items */
.menu a {
clear: right;
line-height: 70px;
text-decoration: none;
margin: 0 10px;
text-align: center;
color: #33334d;
background-color: #ffffff;
}
.toggle {
text-decoration: none;
color: #33334d;
}
.menu a:hover {
background-color: #c2c2d6;
}
/* hamburger properties */
.toggle,
label {
float: right;
display: none;
width: 26px;
line-height: 70px;
margin: 0 40px 0 0;
font-size: 36px;
}
/* checkbox */
#toggle {}
#media only screen and (max-width: 1075px) {
/* hamburger properties */
.toggle,
label {
display: block;
cursor: pointer;
}
/* nav menu properties */
.menu {
width: 100%;
display: none;
text-align: center;
}
/* link items */
.menu a {
display: block;
margin: 0px;
border-bottom: 1px solid #eaeaeb;
}
/* makes links show when checkbox is checked */
#menu:target,
#toggle:checked+.menu {
display: block;
}
}
<div class="nav">
<a class="toggle" href="#menu">☰</a>
<div class="menu" id="menu">
example
example
example
example
example
example
example
</div>
</div>
Wow, interesting. It's a pretty weird practise, what you have, but it could work. You can make menu show/hide by input checked. Very interesting. I have never think of like that.
But also you will need a piece of JS code.
By CSS you can handle some basic selector like :hover, :focus, :active etc. In our your case you also make some interesting click event. But checkbox is not for that purpose.
Click and other event are handled by JS (more https://www.w3schools.com/js/js_events.asp).
So in our case, we select all links:
var links = document.querySelectorAll('.menu a');
then we have to add click event to every link, which will set our input to checked="false" = close menu.
This JS code will only work, when selected links are rendered, so you need to put this piece of code to the end of your html file before </body> or use window.onload...
var links = document.querySelectorAll('.menu a');
var linksLength = links.length
for(var i = 0; i < linksLength; i++) {
links[i].addEventListener('click', function() {
document.getElementById('toggle').checked = false;
});
}
/* navigation menu */
.nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
line-height: 70px;
text-align: right;
z-index: 10000;
background-color: #ffffff;
border-bottom: 1px solid #eaeaeb;
}
.menu {
margin: 0 30px 0 0;
}
/* link items */
.menu a {
clear: right;
line-height: 70px;
text-decoration: none;
margin: 0 10px;
text-align: center;
color: #33334d;
background-color: #ffffff;
}
.menu a:hover {
background-color: #c2c2d6;
}
/* hamburger properties */
label {
float: right;
display: none;
width: 26px;
line-height: 70px;
margin: 0 40px 0 0;
font-size: 36px;
}
/* checkbox */
#toggle {
}
#media only screen and (max-width: 1075px) {
/* hamburger properties */
label {
display: block;
cursor: pointer;
}
/* nav menu properties */
.menu {
width: 100%;
display: none;
text-align: center;
}
/* link items */
.menu a {
display: block;
margin: 0px;
border-bottom: 1px solid #eaeaeb;
}
/* makes links show when checkbox is checked */
#toggle {
display: none;
}
#toggle:checked + .menu {
display: block;
}
}
<label class="nav" for="toggle">
<div class="icon">☰</div>
<input type="checkbox" id="toggle"/>
<div class="menu">
example
example
example
example
example
example
example
</div>
</label>

JQuery responsive menu won't work

I'm a novice web developer with no real jquery knowledge, so please bear with me. I'm trying to make a simple mobile responsive dropdown menu (ideally I'd like a slide down, but baby steps first). For the most part, I figured it out. However, I assigned my "Unordered List" an ID selector and it doesn't seem to function anymore. What am I overlooking? Thanks in advance!
This is my code: JSFiddle
$(document).ready(function(){
$('#toggle-button').click(function(){
$('#menu').toggleClass('show');
});
});
.show {
display: block;
}
nav {
background: black;
width: 100%;
}
.menu-bar {
width: 100%;
background: black;
height: 50px;
}
#toggle-button {
position: absolute;
top: 15px;
right: 60px;
height: 35px;
width: 35px;
background: red;
cursor: pointer;
display: block;
}
#menu {
list-style: none;
width: 100%;
display: none;
margin: 0px;
padding: 0px;
}
#menu li {
height: 50px;
background: #535252;
}
#menu li a {
display: block;
width: 100%;
height: 50px;
text-align: center;
line-height: 50px;
color: white;
text-decoration: none;
cursor: pointer;
}
#menu li:hover {
background: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu-bar"></div>
<nav>
<ul id="menu">
<li>Profile</li>
<li>Profile</li>
<li>Profile</li>
</ul>
</nav>
<a id="toggle-button" href="#"></a>
Use:
#menu.show {
display: block;
}
after! you defined your defaults for #menu {
https://jsfiddle.net/nw2wf3uh/6/
or use the not-so-nice !important:
https://jsfiddle.net/nw2wf3uh/7/
.show {
display: block !important; /* if .show is placed before #menu styles in CSS */
}
You can also go the other way around, setting to your #menu a .hide by default:
<ul id="menu" class="hide">
CSS:
.hide {
display: none; /* but remove display:none; from #menu now! */
}
and toggle that .hide class:
$('#toggle-button').click(function(){
$('#menu').toggleClass('hide');
// or simply: $('#menu').toggle();
});
Here you'll not run into overriding styles cause of priority and you'll not have to use the !important fix (but you might have issues with JS-disabled users if that's of any concern (you should not care much but it always depends.)).

Categories