i have a little problem in my hands, i've got one Megamenu, that works on mobile and desktop, i want to have the content of the menu center aligned, but i can only align left or right.
i can align center with
> ul {
display: flex; //it was none
justify-content: center;
align-self: center;
...
}
but then the hover is always enable and the mobile version have all the menus opened.. it i close each one of them , then the menu work as expected..
the menu i started with was this one fiddle:
Fiddle of actual code with
display: flex;
justify-content: space-between;
working as expected but the menus are all opened..
FIDDLE: https://codepen.io/anon/pen/JpBrRp
my code:
<div class="menu-container">
<div class="menu">
<nav class="navbar-toggleable-md">
<div id="toggle" class="navbar-toggler"><a></a>
</div>
</nav>
<ul id="my_styles" class="rowcenter" >
<li>
<ul>
<li>
menu
<ul>
<li><a href=...</a>x</li>
<li><a href=..</a>z</li>
</ul>
</li>
</ul>
</li>
The .css:
.menu-container {
width: 100%;
margin: 0 auto;
}
.menu {
> ul {
margin: 0 auto;
width: 100%;
list-style: none;
padding: 0;
position: relative;
//position: relative;
/* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
> li {
float: left;
padding: 0px;
margin: 0px;
a {
text-decoration: none;
padding: 1.5em 2.1em;
display: block;
}
&:hover {
}
> ul {
display: none;
justify-content: center;
align-self: center;
width: 100%;
background: #3a3f48;
padding: 20px;
position: absolute;
z-index: 1001;
left: 0;
margin: 0;
list-style: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
> li {
margin: 0;
padding-bottom: 0;
list-style: none;
width: 25%;
background: none;
float: left;
a {
color: #ffffff;
padding: .2em 0;
width: 95%;
display: block;
border-bottom: 1px solid #ccc;
}
> ul {
display: block;
padding: 0;
margin: 10px 0 0;
list-style: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
> li {
float: left;
width: 100%;
padding: 10px 0;
margin: 0;
font-size: .8em;
a {
border: 0;
}
}
}
}
&.normal-sub {
width: 300px;
left: auto;
padding: 10px 20px;
> li {
width: 100%;
a {
border: 0;
padding: 1em 0;
}
}
}
}
}
}
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Mobile style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#media only screen and (max-width: 959px) {
.menu-container {
width: 100%;
}
.menu-mobile {
display: block;
}
.menu-dropdown-icon {
&:before {
//display: block;
}
}
.menu {
> ul {
display: none;
> li {
width: 100%;
float: none;
display: block;
a {
padding: 1.5em;
display: block;
}
> ul {
position: relative;
&.normal-sub {
width: 100%;
}
> li {
float: none;
width: 100%;
margin-top: 20px;
&:first-child {
margin: 0;
}
> ul {
position: relative;
> li {
float: none;
}
}
}
}
}
}
.show-on-mobile {
display: block;
}
}
}
the JS:
/* global $ - Mega menu ***********/
$(document).ready(function() {
"use strict";
$('.menu > ul > li:has(ul)').addClass('menu-dropdown-icon');
//Checks if li has sub (ul) and adds class for toggle icon - just an UI
$('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub');
//Checks if drodown menu's li elements have anothere level (ul), if not the dropdown is shown as regular dropdown, not a mega menu (thanks Luka Kladaric)
$(".menu > nav > div > a").before("<img width='34px' height='34px' src=\"/assets/images/Menu_icons/hmb.png\">");
//Adds menu-mobile class (for mobile toggle menu) before the normal menu
//Mobile menu is hidden if width is more then 959px, but normal menu is displayed
//Normal menu is hidden if width is below 959px, and jquery adds mobile menu
//Done this way so it can be used with wordpress without any trouble
$(".menu > ul > li").hover(function(e) {
if ($(window).width() > 943) {
$(this).children("ul").stop(true, false).fadeToggle(150);
e.preventDefault();
}
});
//If width is more than 943px dropdowns are displayed on hover
$(".menu > ul > li").click(function() {
if ($(window).width() <= 943) {
$(this).children("ul").fadeToggle(150);
}
});
//If width is less or equal to 943px dropdowns are displayed on click (thanks Aman Jain from stackoverflow)
$(".menu-mobile").click(function(e) {
$(".menu > ul").toggleClass('show-on-mobile');
e.preventDefault();
});
//when clicked on mobile-menu, normal menu is shown as a list, classic rwd menu story (thanks mwl from stackoverflow)
});
Try display flex and justify for the main ul:
display: flex;
justify-content: space-between;
Fiddle of actual code with:
display: flex;
justify-content: space-between;
working as expected but the menus are all opened..
FIDDLE: https://codepen.io/anon/pen/JpBrRp
I got the answer, i think that's not the correct one, but it works..
on .css i've created a class called center:
.center{
display: flex !important;
}
then on .JS i created a function that open the submenu ('ul') and toogleclass to override with class center:
$(".menu > ul > li").click(function(e) {
if ($(window).width() > 943) {
$(this).children('ul').fadeToggle(15);
$(this).children('ul').toggleClass('center');
e.preventDefault();
}
});
However i have a little problem: when opened a submenu (clicking on one item of main menu) i want that submenu to vanish when i click anywhere on the document body, if i click on that submenu ('ul'), or one particular item on submenu it works like i want, but if i click on other menu item the previous submenu keeps opened, creating layers of submenus that i have to click on to make them vanish (or click on the main menus item that make them appear) im not sure i am clear..
here's a Fiddle https://codepen.io/anon/pen/JpBrRp
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 am working on a website where I am trying to achieve the following:
When the user clicks on a link, that link shall get an active status and the matching submenu shall become active also. When the user hovers over another link the active sub menu shall not be displayed. I have achieved that the current link is in an active status that matches the url but I can't get the matching submenu to show up. I don't know much about jQuery so I might I have stumbled upon the answer without knowing it. Here is some of the code as the website is currently on localhost.
HTML:
<div class="menu-container-portal">
<a class="toggle-menu" href="#" style="display: none;">
<img src="/images/18.612e0c6d167074c5746476/1542016024414/menu-icon.png" alt="Meny"></a>
<ul class="nav">
<li class="">
Upplev & Besök
<img class="arrow parent" src="/images/18.612e0c6d167074c57464a3/1542016024505/(2)%20(2)%2010897-200.png" alt="Underliggande">
<ul class="sub">
<div class="test1">
<li class="">
Bostäder
</li>
<li>
Evenemang
</li>
<li>
Kopia (1) av Upplev & Besök
</li>
<li>
Kopia (4) av Bostäder
</li>
<li>
Mat och dryck
</li>
<li>
Shopping
</li>
</div>
</ul>
</li>
<li>
Bo & Leva
<img class="arrow parent" src="/images/18.612e0c6d167074c57464a3/1542016024505/(2)%20(2)%2010897-200.png" alt="Underliggande">
<ul class="sub">
<div class="test1">
<li>
Bostäder
</li>
</div>
</ul>
</li>
<li>
Flytta hit & Jobba
</li>
<li>
Näringsliv
<img class="arrow parent" src="/images/18.612e0c6d167074c57464a3/1542016024505/(2)%20(2)%2010897-200.png" alt="Underliggande">
<ul class="sub">
<div class="test1">
<li>
Bostäder
</li>
</div>
</ul>
</li>
<li>
Kontakta oss
</li>
</ul>
</div>
CSS:
.menu-container-portal ul {
margin: 0;
padding: 0;
}
.active {
background: #2b90f5;
overflow: hidden;
}
.menu-container-portal li:hover>a {
color: #fff;
background: #304040;
opacity: .7;
}
.menu-container-portal li {
margin: 0;
padding: 0;
/*width: 100%;*/
height: 15%;
/*display: inline-block;*/
;
}
.menu-container-portal a {
text-decoration: none;
}
.menu-container-portal a:hover {
color: #dadcdf;
background: #304040;
padding-bottom: 10px;
}
/*.menu-container-portal {
max-width: 900px;
margin: 10px auto;
}*/
/*.menu-container-portal {
max-width: 900px;
margin-right: auto;
margin-bottom: 0px;
margin-top: 20px;
margin-left: 15px;
white-space: nowrap;
text-align:left;
} */
.menu-container-portal {
max-width: 1100px;
margin-right: auto;
margin-bottom: 0;
margin-top: 20px;
/* margin-left: 15px; */
white-space: nowrap;
text-align: left;
margin-left: 22.5%;
}
.toggle-menu {
display: none;
/*background: #404040;*/
padding: 10px 15px;
color: #fff;
}
.toggle-menu:hover {
opacity: 0.7;
}
.nav {
list-style: none;
*zoom: 1;
/*background:#404040;*/
display: flex;
justify-content: left;
}
.nav:before,
.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 100%;
text-align: center;
}
.nav a {
padding: 10px 15px;
color: #101210;
*zoom: 1;
}
.nav>li {
float: left;
z-index: 200;
}
.nav>li>a {
display: inline-block;
}
.nav li ul {
display: flex;
position: absolute;
left: -99999px;
z-index: 100;
width: 100%;
/*height: 100%;*/
padding-bottom: 0.5em;
justify-content: left;
}
.nav li li a {
display: block;
/* display:inline-block; */
/*background: #404040;*/
/*position: relative;*/
z-index: 99999;
/*height: 100%;*/
width: auto;
/* width:100%; */
color: #fff;
}
.nav li li li a {
background: #404040;
/* z-index:200; */
;
}
.nav li {
/*position: relative;*/
;
}
.nav>li.hover>ul,
.nav>li.hover>ul :active {
left: 0;
overflow: hidden;
}
.nav li li.hover ul {
left: 100%;
top: 0;
overflow: hidden;
}
.arrow {
display: none;
}
.sub {
background: #304040;
opacity: 0.9;
}
ul .sub {
padding-top: 10px;
}
.menu-container-portal a:hover .nav li li li a {
background: #ff0000;
}
/* Bestämma undermenyns storlek */
.sub2 {
column-width: auto;
text-align: left;
}
.test1 {
display: inline-flex;
margin-left: 22.5%;
}
.test1-show {
display: block;
margin-left: 22.5%;
color: green !important;
}
jQuery:
$(function () {
setNavigation();
});
function setNavigation() {
var path = window.location.pathname;
path = path.replace(/\/$/, "");
path = decodeURIComponent(path);
$(".nav a").each(function () {
var href = $(this).attr('href');
if (path.substring(0, href.length) === href) {
/*$(".test1").addClass("active");
$('.nav a').filter(function(){
return this.href==location.href;}).parent()
.addClass('active').siblings().removeClass('active');
/*$(".nav > li > a").addClass("active");*/
$(document).ready(function () {
$('a(.active) a').hide();
$('a(.active)').hover(
function () {
$('.test1').hide();
},
function () {
$('.test1').show();
});
});
}
});
}
Hopefully that is all the code that is needed for you all to understand what I want and need some help with or some tips:) I think I got some of the jQuery code right I feel I am halfway there just the some little help :) thanks in advance :)
I was thinking about using one of these that I have found here:
http://jsfiddle.net/4G7TJ/1/
http://jsfiddle.net/MGkQC/7/
2019 - 01 - 21:
An update to my own post: I have come closer to my goal after alot of frustrating moments. But there is still one problem left I need to hide the submenu when I am hovering over another link here is the code so far:
jQuery:
$(document).ready(function() {
$(".nav li [href]").each(function() {
if (this.href == window.location.href) {
$(this).css("background", "red");
$(this).addClass("hover");
$(this).parent().find('ul.sub').css("left","0");
}
}); });
I was thinking about using .toggle somehow but cant really seem to get it working.
Intended you expecting the following functionality:
$("ul.nav > li > a").hover(
function(e) {
$('ul.nav > li > a.on-hover').removeClass('on-hover');
$(this).addClass('on-hover');
},
function(e){
//If you expecting to hide on-hover-out as well, uncomment the below line
//$('ul.nav > li > a.on-hover').removeClass('on-hover');
});
See in action: http://jsfiddle.net/kn761qgL/ and confirm.
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>
When my page is resized for mobile via media queries, I show a menu bar (handle), that allows the user to click and slideToggle the navigation bar, so they can see it.
When I manually resize my page, I notice the following issue:
When I was in mobile view, and the navigation bar was visible, then when I resize it, the nav bar is visible. But, if I close the nav bar in mobile view, and then resize to full screen, my nav bar disappears, and I'm not sure why. I believe there is a problem with my jQuery. Can anyone point me in the right direction?
$(document).ready(function() {
var handle = $(".handle");
var navigation = $(".navigation");
handle.click(function() {
navigation.slideToggle();
});
});
nav ul {
background-color: #43a286;
overflow: hidden;
color: white;
padding: 0;
text-align: center;
margin: 0;
}
nav ul li:hover {
background-color: #399077;
transition: 0.5s;
}
nav ul li {
display: inline-block;
padding: 20px;
}
.handle {
width: 100%;
background: #005c48;
text-align: left;
box-sizing: border-box;
padding: 15px;
color: white;
display: none;
}
.handle i {
float: right;
cursor: pointer;
}
#media screen and (max-width: 400px) {
nav ul li {
box-sizing: border-box;
width: 100%;
display: block;
padding: 15px;
text-align: left;
box-shadow: 1px 1px #399077;
}
.handle {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<nav>
<div class="handle">Menu</div>
<ul class="navigation">
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Contact</li>
</ul>
</nav>
You need to reset the navigation from hidden to visible after switch back to desktop view, otherwise it will remain hidden if he navigation is hidden. You can do it via resize() function:
$(document).ready(mobileNav);
$(window).on('resize', mobileNav);
function mobileNav() {
var handle = $(".handle");
var navigation = $(".navigation");
if (window.innerWidth <= 400) {
navigation.hide();
} else {
navigation.show();
}
handle.unbind().click(function() {
navigation.slideToggle();
});
}
Also, <a> is not allowed directly under <ul>, so move them into <li>s.
jsFiddle
$(document).ready(mobileNav);
$(window).on('resize', mobileNav);
function mobileNav() {
var handle = $(".handle");
var navigation = $(".navigation");
if (window.innerWidth <= 400) {
navigation.hide();
} else {
navigation.show();
}
handle.unbind().click(function() {
navigation.slideToggle();
});
}
nav ul {
background-color: #43a286;
overflow: hidden;
color: white;
padding: 0;
text-align: center;
margin: 0;
}
nav ul li:hover {
background-color: #399077;
transition: 0.5s;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 20px;
color: #fff;
}
.handle {
width: 100%;
background: #005c48;
text-align: left;
box-sizing: border-box;
padding: 15px;
color: white;
display: none;
}
.handle i {
float: right;
cursor: pointer;
}
#media screen and (max-width: 400px) {
nav ul li {
box-sizing: border-box;
width: 100%;
display: block;
text-align: left;
box-shadow: 1px 1px #399077;
}
nav ul li a {
padding: 15px;
}
.handle {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<nav>
<div class="handle">Menu</div>
<ul class="navigation">
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Contact</li>
</ul>
</nav>
If you slideToggle the navigation menu once the .handle was clicked - it is now hidden. If you will resize the window (after the navigation is hidden) - it will still be hidden (because you did nothing to show it again).
You can use the resize event to run any other function once the window was resized (note that you will need to check if the resize was to shrink or enlarge the window, then you will need to check if the navigation is visible or not - and then to show it (if it's hidden).
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>