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.
Related
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.
I made a nav bar using nav and li tags, including a notifications icon, I am trying to make notifications nested list to show notifications, and use JavaScript to toggle/hide the menu, so far no luck. I've been looking for snippets online to support my logic, but I am stuck in the styling part and the JavaScript functionality. code below:
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
html {
scroll-behavior: smooth;
}
* {
font-family: 'Roboto', sans-serif;
font-style: normal;
padding: 0;
margin: 0;
text-decoration: none;
}
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
::-webkit-scrollbar {
width: 1.32vmin;
}
/*
::-webkit-scrollbar-track{
border: 0.53vmin solid rgba(7, 67, 146, 0.17);
box-shadow: inset 0 0 0.33vmin 0.26vmin rgba(7, 67, 146, 0.17);
}
*/
::-webkit-scrollbar-thumb {
background: #074392;
border-radius: 0vmin;
}
::-webkit-scrollbar-button {
height: 7.45vmin;
background: #074392;
}
body {
font-weight: 400;
font-size: 2.12vmin;
background-color: #FFFFFF;
/*overflow: hidden;*/
height: 100%;
}
h1 {
margin-left: 3vmin;
}
h5 {
margin: 2vmin 3vmin;
position: absolute;
width: 14.72vmin;
font-weight: 500;
font-size: 2.65vmin;
letter-spacing: 0.79vmin;
color: #FFFFFF;
display: inline;
}
nav {
background-color: #074392;
height: 7.42vmin;
width: 100%;
/*position: relative;*/
/*overflow: hidden;*/
position: sticky;
top: 0;
}
img.logo {
margin: 1.855vmin 3vmin;
height: 3.5vmin;
width: 7vmin;
}
nav ul {
float: right;
margin: 1.855vmin 2vmin;
}
nav ul li {
display: inline-block;
}
nav ul li::before {
content: " ";
padding: 0vmin 0.5vmin;
}
nav ul li a {
color: white;
/*margin: 0vmin 1vmin;*/
/*border-top-left-radius: 1.326vmin;
border-top-right-radius: 1.326vmin;
border-bottom-left-radius: 1.326vmin;
border-bottom-right-radius: 1.326vmin;*/
}
a.active,
a:hover {
font-variation-settings: 'FILL' 1;
}
.checkbtn {
color: #ffffff;
float: left;
cursor: pointer;
display: none;
margin: 1.855vmin 3vmin;
}
#check {
display: none;
}
#check:checked~ul {
left: 0;
}
.dropdown {}
.dropdown .dropbtn {
cursor: pointer;
border: none;
outline: none;
background-color: #074392;
color: #FFFFFF;
}
.dropdown:hover .dropbtn,
.dropbtn:focus {
color: #FFFFFF;
font-variation-settings: 'FILL' 1;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #0743922B;
width: 37.5vmin;
overflow-wrap: break-word;
transform: translateX(-56%);
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: justify;
}
.dropdown-content a:hover {
background-color: #0743922B;
}
.show {
display: block;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD#20..48,100..700,0..1,-50..200" />
<div class="container">
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="material-symbols-rounded" style="font-size:3.5vmin;" title="Menu">menu</i>
</label>
<h5>LOGO</h5>
<ul>
<li>
<i class="material-symbols-rounded" style="font-size:3.5vmin;" title="Home">home</i>
</li>
<!-- <li> <i class="material-symbols-rounded" style="font-size:3.5vmin;" title="Notifications">notifications</i> -->
<li class="dropdown"><button class="dropbtn" onclick="myFunction()"><i class="material-symbols-rounded" style="font-size:3.5vmin;" title="Notifications">notifications</i></button>
<div class="dropdown-content" id="myDropdown">
<div>Link 1</div>
<div>Link 2</div>
<div>Link asasdasdasdasdasdsadsadasdasdasdasd asddasdas asd asd asd dasd asd</div>
</div>
</li>
<li>
<i class="material-symbols-rounded" style="font-size:3.5vmin;" title="Tasks">task</i>
</li>
<li>
<i class="material-symbols-rounded" style="font-size:3.5vmin;" title="Profile">person</i>
</li>
</ul>
<script type="text/javascript" src="JS/ActiveTab.js"></script>
<script type="text/javascript" src="JS/ToggleNotifications.js"></script>
</nav>
<main>
<h1>Example Page</h1>
</main>
</div>
By default set a display: none on the dropdown element and set a display: block on the hover pseudo-class of the dropdown element so when a hover event is triggered the dropdown appears.
Also, you can use classList.toggle method to remove if exists or to add if not exist the class.
Remove
Just add the following to the .css:
#myDropdown {
display: none;
}
#myDropdown.show {
display: block;
}
Remove onclick="myFunction()". And replace the .js with:
const myDropdown = document.getElementById('myDropdown')
addEventListener('click', event => {
let dropbtn = event.target.closest('button.dropbtn')
if (!dropbtn) return myDropdown.classList.remove('show')
console.log('hii')
myDropdown.classList.toggle('show')
})
I'm trying to create a responsive navbar.
When screen size is reduced I'm using media query to style visibility of #nav-items to hidden and display a menu icon.
I have written a javascript code to handle on click on menu icon style #nav-itmes to visible and hidden (trying to toggle by if condition to check style value)
Problem: on first click result is ok. #nav-items are visible but again when i click #nav-items style does not change to hidden (while i can console click event is there on every click)
Can anyone guide me ?
There are several approach to have this result to toggle an element but I want to only know what is issue in below code. (only javascript please).
let nav_icon = document.getElementById("nav-icon");
nav_icon.addEventListener("click", () => {
console.log('clicked');
let nav_items = document.getElementById("nav-items");
nav_items.style.visibility = nav_items.style.visibility = "hidden" ? "visible" : "hidden";
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
a,
ul,
h3 {
text-decoration: none;
color: white;
list-style-type: none;
font-weight: bold;
}
body {
background-image: url("/img/bg.jpg");
}
img {
display: none;
height: 30px;
width: 30px;
margin-right: 10px;
position: fixed;
top: .4em;
right: .2em;
}
.navbar {
display: flex;
height: 40px;
width: 100%;
align-items: center;
justify-content: space-between;
background-color: #ABA9A966;
gap: 10px;
}
nav a,
header h3 {
margin: 0px 10px 0px 10px;
}
nav a:hover {
background-color: grey;
}
#media screen and (max-width: 800px) {
nav a,
header h3 {
margin: 0px 5px 0px 5px;
font-size: 15px;
}
}
#media screen and (max-width: 600px) {
.navbar {
flex-flow: column;
}
header {
display: none;
}
nav {
width: auto;
text-align: center;
background-color: #ABA9A966;
position: fixed;
visibility: hidden;
top: 2.5em;
right: 0;
}
nav a {
margin: 0;
height: 22px;
padding-top: 3px;
display: block;
width: 8rem;
font-size: 14px;
}
img {
display: block;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="navbar">
<header>
<h3>Hello Guest</h3>
</header>
<nav id="nav-items">
Home
Dispatch
Account
Report
Control
</nav>
</div>
<img src="/img/menu.png" id="nav-icon">
Often you cannot see the style of an element in JS if the style was applied in a stylesheet
You can toggle a class instead
For example
nav { visibility: hidden; }
nav.show { visibility: visible; }
and js
const nav_icon = document.getElementById("nav-icon");
const nav_items = document.getElementById("nav-items");
nav_icon.addEventListener("click", () => {
console.log('clicked');
nav_items.classList.toggle("show")
});
const nav_icon = document.getElementById("nav-icon");
const nav_items = document.getElementById("nav-items");
nav_icon.addEventListener("click", () => {
console.log('clicked');
nav_items.classList.toggle("show")
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
a,
ul,
h3 {
text-decoration: none;
color: white;
list-style-type: none;
font-weight: bold;
}
body {
background-image: url("/img/bg.jpg");
}
img {
height: 30px;
width: 30px;
margin-right: 10px;
position: fixed;
top: .4em;
right: .2em;
}
.navbar {
display: flex;
height: 40px;
width: 100%;
align-items: center;
justify-content: space-between;
background-color: #ABA9A966;
gap: 10px;
}
nav { visibility: hidden; }
nav a,
header h3 {
margin: 0px 10px 0px 10px;
}
nav a:hover {
background-color: grey;
}
#media screen and (max-width: 800px) {
nav a,
header h3 {
margin: 0px 5px 0px 5px;
font-size: 15px;
}
}
#media screen and (max-width: 600px) {
.navbar {
flex-flow: column;
}
header {
display: none;
}
nav {
width: auto;
text-align: center;
background-color: #ABA9A966;
position: fixed;
visibility: hidden;
top: 2.5em;
right: 0;
}
nav a {
margin: 0;
height: 22px;
padding-top: 3px;
display: block;
width: 8rem;
font-size: 14px;
}
img {
display: block;
}
}
nav.show {
visibility: visible;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="navbar">
<header>
<h3>Hello Guest</h3>
</header>
<nav id="nav-items">
Home
Dispatch
Account
Report
Control
</nav>
</div>
<img src="/img/menu.png" id="nav-icon" title="ICON" alt="ICON">
Think this line is incorrect:
nav_items.style.visibility = nav_items.style.visibility = "hidden" ? "visible" : "hidden";
The equality check should be:
nav_items.style.visibility === "hidden"
so this may work:
nav_items.style.visibility = (nav_items.style.visibility === "hidden" ? "visible" : "hidden");
Try the css property for media-query: display:none !important;
Why is the menu bar not visible in tablet mode. I have to click on the colored part to see it. It works well in mobile mode but has problems in tablet mode. I checked everything but did not understand how the collapsible__content class does not work in tablet mode.
Now in tablet mode, the navigation is not visible and I have to click on the gray bar to make the menus appear, while in tablet mode, you do not need to click on the menu to be seen.
index.html
<header>
<nav class="nav collapsible">
<a class="nav__brand" href="#">Gustoso</a>
<svg class="icon icon--white nav__toggler">
<use href="images/sprite.svg#menu"></use>
</svg>
<ul class="list nav__list collapsible__content">
<li class="nav__item">
Welcome<span class="between__nav">~</span>
</li>
<li class="nav__item">
Menu<span class="between__nav">~</span>
</li>
<li class="nav__item">
reservations<span class="between__nav">~</span>
</li>
<li class="nav__item">
News<span class="between__nav">~</span>
</li>
<li class="nav__item">
Contact
</li>
</ul>
</nav>
</header>
<script src="js/main.js"></script>
style.css
.list {
list-style-type: none;
padding-left: 0;
}
/* Navigation Bar */
header {
background: rgba(86, 83, 76, 0.5294117647058824);
}
.nav {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
padding: 0.6rem 1rem;
}
.nav__list {
width: 100%;
margin: 0;
}
.nav__item {
padding: 0.9rem 0.2rem;
border-bottom: 1px solid #826c6c;
}
.nav__item > a:hover {
font-weight: bolder;
}
.nav__item > a {
color: var(--color-heading);
text-transform: uppercase;
font-size: 1.7rem;
}
.nav__item > a span {
display: none;
}
.between__nav {
margin: auto 0.9rem;
font-size: 1.4rem;
font-weight: 400;
}
.nav__brand {
font-family: scriptina, Arial, Helvetica, sans-serif;
font-size: 3rem;
letter-spacing: 9px;
line-height: 24px;
color: #ffffff;
transform: translateY(-11px);
}
.nav__toggler {
opacity: 0.5;
cursor: pointer;
transition: all 0.15s;
}
.nav.collapsible--expanded .nav__toggler {
opacity: 1;
box-shadow: 0 0 0 3px #666;
border-radius: 5px;
transform: rotate(-90deg);
}
#media screen and (min-width: 768px) {
.nav__toggler {
display: none;
}
.nav__list {
max-height: 100%;
opacity: 1;
width: auto;
display: flex;
font-size: 1.6rem;
}
.nav__item {
border: 0;
}
.nav__item > a span {
display: inline-flex;
}
}
/* Collapsibles */
.collapsible__content {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: all 0.3s;
}
.collapsible--expanded .collapsible__content {
max-height: 100vh;
opacity: 1;
}
main.js
const collapsibles = document.querySelectorAll(".collapsible");
collapsibles.forEach((item) =>
item.addEventListener("click", function () {
this.classList.toggle("collapsible--expanded");
})
);
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>