I am trying to create a fullscreen navigation overlay with 2 levels of navigation.
Currently I have managed to build the fullscreen overlay along with the level 1 navigation.
https://codepen.io/anon/pen/rJJGKE
$(document).ready(function() {
$(".menu-btn a").click(function() {
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
});
$('.overlay').on('click', function() {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});
$('.menu a').on('click', function() {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});
});
/* OPEN / CLOSE BTNS */
.menu-btn {
z-index: 999;
display: inline;
font-size: 32px;
}
.menu-btn a {
display: inline-block;
text-decoration: none;
/* safari hack */
}
.btn-open:after {
color: #000;
content: "\f394";
font-family: "Ionicons";
-webkit-transition: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
transition-property: all .2s linear 0s;
}
.btn-open:hover:after {
color: #000;
}
.btn-close:after {
color: #000;
content: "\f2d7";
font-family: "Ionicons";
-webkit-transition: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
transition-property: all .2s linear 0s;
}
.btn-close:hover:after {
color: #000;
}
/* OVERLAY */
.overlay {
position: fixed;
top: 0;
z-index: 99;
display: none;
overflow: auto;
width: 100%;
height: 100%;
background: rgba(135, 119, 116, 0.95);
}
.overlay .menu {
margin: 100px auto;
width: 80%;
}
.overlay .menu ul {
margin: 0;
padding: 0;
width: 100%;
}
.overlay .menu ul li {
float: left;
padding: 6px 0 0 0;
width: 100%;
list-style: none;
text-align: left;
text-transform: uppercase;
margin-bottom: 40px;
}
.overlay .menu ul li#social {
width: 100%;
margin-top: 50px;
}
.overlay .menu ul li a {
color: #d1b400;
font-weight: 300;
font-size: 20px;
font-family: 'Old Standard TT', serif;
}
.overlay .menu ul li#social a {}
.overlay .menu ul ul {
margin-top: 10px;
}
.overlay .menu ul ul li {
position: relative;
float: none;
margin: 0;
width: 100%;
border: 0;
}
.overlay .menu ul ul li a {
color: #000;
text-transform: capitalize;
font-weight: 300;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
}
.overlay .menu ul ul li a:hover {
color: #34b484;
}
/* RESPONSIVE */
#media screen and (max-width: 768px) {
.overlay .menu ul li {
float: none;
margin-bottom: 25px;
width: 100%;
}
.overlay .menu ul li:last-child {
border: 0;
}
.overlay .menu ul ul {
margin-top: 20px;
}
.menu-btn {
right: 25px;
}
}
.allexamples {
position: absolute;
bottom: 0;
font-size: 18px;
font-weight: bold;
width: 100%;
text-align: center;
background: #e9e9e9;
padding: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #333;
position: fixed;
}
.menu-social {
display: inline-block;
margin: 0 .4em;
}
.menu-social a {
width: 44px;
height: 44px;
padding: 0;
background-image: url("../img/cd-socials.svg");
background-repeat: no-repeat;
/* image replacement */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
.menu-social .menu-facebook a {
background-position: 0 0;
}
.menu-social .menu-instagram a {
background-position: -44px 0;
}
.menu-social .menu-dribbble a {
background-position: -88px 0;
}
.menu-social .menu-twitter a {
background-position: -132px 0;
}
.overlay .menu ul ul li.description {
padding: 0px 0 10px 0px;
}
.overlay .menu ul ul li.description span {
color: #c3bab9;
font-size: 13px;
font-weight: 300;
text-transform: none;
}
p.tel,
p.email {
margin: 0 0 3px 0;
}
p.tel a {
font-family: 'Open Sans', sans-serif!important;
color: #000!important;
font-weight: 600!important;
font-size: 18px!important;
letter-spacing: 1px;
}
p.email a {
font-family: 'Open Sans', sans-serif!important;
color: #000!important;
font-weight: 300!important;
font-size: 16px!important;
text-transform: none;
}
.menu-btn a span {
font-size: 18px;
color: #000000;
line-height: 18px;
font-weight: 600;
position: relative;
top: -5px;
right: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav class="navbar fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Logo
<img src="" width="30" height="30" alt="">
</a>
<span class="navbar-text">
<div class="menu-btn">
<a class="btn-open" href="javascript:void(0)"><span>MENU</span></a>
</div>
</span>
</div>
</nav>
</header>
<div class="overlay">
<div class="menu">
<div class="container">
<ul>
<li>
Menu
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Work</li>
<li>Contact</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
What i am looking to do now is: When a user clicks on services, instead of going to services page, i would like a second level menu to appear (service 1, service 2 etc) in the same place as the existing menu.
Would this require a jQuery solution? Any help would be appreciate.
Yeah, I think a simple jQuery function in combination with some CSS would be the best solution:
$('.menu a').on('click', function () {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
// I added this line
$(this).next('.sub').toggleClass('visible');
});
.overlay .menu ul li .sub {
max-height: 0;
transition: max-height 0.4s ease;
overflow: hidden;
}
.overlay .menu ul li .sub.visible {
max-height: 500px;
transition: max-height 0.4s ease;
}
Have a look over here (Just click on the 'Service' button)
Related
I am new to coding and am struggling to get the template for my nav menu ready. First of all, I want the hamburger to hide whenever I click on it and then the menu opens. However, I'm still at the beginning, and can't even get the hamburger to hide. I want to toggle the class ".hamburger-hide" using jQuery, which includes the display:none property.
this is the html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#800&display=swap" rel="stylesheet">
<title>Navbar</title>
</head>
<body>
<header class="header">
<h1 class="logo">Logo</h1>
<nav class="navbar">
<ul class="nav-list">
<li class="nav-item">Home</li>
<li class="nav-item">About</li>
<li class="nav-item">Contact Us</li>
<li class="nav-item">Links</li>
</ul>
</nav>
<div class="btn">
<a class="cta" href="#"><button>Hello World</button></a>
</div>
<img class="hamburger" src="speisekarte.svg" alt="hamburger-menu">
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="index.js" charset="utf-8"></script>
</body>
</html>
this is my CSS:
*{ /*Setting all to 0*/
padding:0;
margin:0;
box-sizing: border-box; /*If you set box-sizing: border-box; on an element, padding and border are included in the width and height*/
}
header {
display: flex; /* Das ist der Flex container (header) in ihm müssen items positioniert werden*/
justify-content: space-between; /*justify-content + align-itmes = center ==> perfect center*/
align-items: center;
background-color: #707070;
padding: 30px 10%;
}
.logo {
font-family: "Montserrat", sans-serif;
font-weight: 800;
cursor: pointer;
}
button {
cursor: pointer;
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1); /* letzter ist alpha --> opacity, 1 = 100%*/
border: none;
border-radius: 50px;
transition: all 0.3s ease 0s;
}
button:hover {
background-color: rgba(0, 136, 169, 0.7); /* alpha ändert sich beim hovern --> opacity nimmt ab, 0,7 = 70%*/
text-decoration: none;
}
.btn a {
text-decoration: none;
}
.nav-item {
list-style: none;
}
.nav-item {
display: inline-block; /* ul ist in reihe nicht untereinander. kann auch direkt an li gemacht werden*/
padding: 0px 30px;
}
.navbar li a {
transition: all 0.3s ease 0s; /*letzter wert= delay, ease-in-out= vorwärts und rückwärts*/
}
.navbar li a:hover {
color: #0088a9;
}
.nav-item a, button{
text-decoration: none;
color: #edf0f1;
font-family: "Montserrat", sans-serif;
font-size: 16px;
font-weight: normal;
}
.hamburger {
height:40px;
cursor: pointer;
position:relative;
}
.hamburger:hover {
padding:2px;
border: 2px solid;
border-radius: 5px;
}
.hamburger-hide {
display:none;
}
#media (max-width: 768px){
.nav-list{
display: none;
}
.cta {
display: none;
}
}
#media (min-width:769px){
.hamburger{
display:none;
}
}
and this is the jQuery I tried, so that it hides on click.
$(".hamburger").click(function(){
$(".hamburger").toggleClass(".hamburger-hide");
})
Solution with jQuery for build up Hamburger navbar responsive
For my example:
(function($) { // Begin jQuery
$(function() { // DOM ready
// If a link has a dropdown, add sub menu toggle.
$('nav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
// Close one dropdown when selecting another
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
// Clicking away from dropdown will remove the dropdown class
$('html').click(function() {
$('.nav-dropdown').hide();
});
// Toggle open and close nav styles on click
$('#nav-toggle').click(function() {
$('nav ul').slideToggle();
});
// Hamburger to X toggle
$('#nav-toggle').on('click', function() {
this.classList.toggle('active');
});
}); // end DOM ready
})(jQuery);
#charset "UTF-8";
body{
margin:0;
}
.navigation {
height: 70px;
background: #6d7993;
font-family: montserrat, sans-serif;
font-weight: 400;
font-style: normal;
opacity: 0.88;
}
.brand {
position: absolute;
padding-left: 20px;
float: left;
line-height: 70px;
text-transform: uppercase;
font-size: 1.4em;
}
.brand a,
.brand a:visited {
color: #ffffff;
text-decoration: none;
}
.nav-container {
max-width: 1000px;
margin: 0 auto;
}
nav {
float: right;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a,
nav ul li a:visited {
display: block;
padding: 0 20px;
line-height: 70px;
background: #6d7993;
color: #ffffff;
text-decoration: none;
}
nav ul li a:hover,
nav ul li a:visited:hover {
background: #4b5569;
color: #ffffff;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: " ▾";
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
/* Mobile navigation */
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: #6d7993;
height: 70px;
width: 70px;
}
#media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 70px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
}
nav ul li ul li a {
padding-left: 30px;
}
.nav-dropdown {
position: static;
}
}
#media screen and (min-width: 799px) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #ffffff;
position: absolute;
display: block;
content: "";
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
article {
max-width: 1000px;
margin: 0 auto;
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<section class="navigation">
<div class="nav-container">
<div class="brand">
Logo
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
Home
</li>
<li>
Contact Us
</li>
<li>
Link
</li>
</ul>
</ul>
</nav>
</div>
</section>
Updated
Solution 2, Using Pure CSS
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #f4f4f4;
}
a {
color: #000;
}
/* header */
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
position: fixed;
width: 100%;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background-color: #f4f4f4;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 240px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
/* 48em = 768px */
#media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
<header class="header">
Your Logo
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Contact Me</li>
</ul>
</header>
Here you go:
https://jsfiddle.net/ap2rzb5x/1/
$("#hamburger").click(function(){
$("#hamburger").toggleClass("hamburger-hide");
$("#hamburger").toggleClass("hamburger");
})
Summary you toggled just that one class, didn't want you maybe switch them (toggle the original hamburger class away?). Just in case I matched on the ID instead of the class so I could toggle away the original hamburger and still be able to match it with the same code.
Another problem is that you toggled '.hamburger-hide' that's not the class name, it's called 'hamburger-hide' the dot is only used by jQuery as the dollar search. Same with #hamburger, it will find ID of hamburger not #hamburger-hide.
https://api.jquery.com/category/selectors/
Probably it's not exactly doing what you want, but I think it should unstuck you and you should be able to continue making what you intend to do.
I have ::after pseudo element for navigation hover animation. Now i need the hover thing to stay right there according to which page its active. Since I have the ::after pseudo element, I just can't make it work with the addClass on jQuery.
<ul class="main-nav">
<li>About<div></div></li>
<li>Services<div></div></li>
<li>Portfolio<div></div></li>
<li>Career<div></div></li>
<li>Contact<div></div></li>
</ul>
Here is the CSS
.main-nav{
float: right;
font-family: 'Open Sans';
font-size: 87.5%;
font-weight:700;
color: #fff;
position: absolute;
right: 140px;
user-select: none;
transition: all .3s ease;
z-index: 10;
}
.main-nav li{
list-style: none;
display: inline-block;
padding-left: 45px;
margin-top: 3.86%;
line-height: 44px;
text-align: justify;
}
.main-nav li a{
text-decoration: none;
color: #fff;
padding-left: 5px;
padding-right: 5px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.main-nav li a:after{
text-align: center;
text-decoration: none;
content:'';
display:block;
width:0; opacity: 0; height:3px;
margin-top: 12px;
background-color:#fff;
transform: translateX(-50%);
transition:all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.main-nav li a:hover:after{width:100%; opacity: 1; transform: translateX(0%);}
A new css class can be added. Such a class can be added dynamically to the div child of li of your interest at document load:
var currwinAddr = window.location.href.split('/').pop();
$('.main-nav a').filter(function(idx, ele) {
return ele.href.indexOf(currwinAddr) != -1;
}).find('div').addClass('myhighlight');
.main-nav {
background-color: blue;
float: right;
font-family: 'Open Sans';
font-size: 87.5%;
font-weight: 700;
color: #fff;
position: absolute;
right: 140px;
user-select: none;
transition: all .3s ease;
z-index: 10;
}
.main-nav li {
list-style: none;
display: inline-flex; /* changed */
padding-left: 45px;
margin-top: 3.86%;
line-height: 44px;
text-align: justify;
}
.main-nav li a {
text-decoration: none;
color: #fff;
padding-left: 5px;
padding-right: 5px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.main-nav li a:after {
text-align: center;
text-decoration: none;
content: '';
display: inline-flex; /* changed */
width: 0;
opacity: 0;
height: 3px;
margin-top: 12px;
background-color: #fff;
transform: translateX(-50%);
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.main-nav li a:hover:after {
width: 100%;
opacity: 1;
transform: translateX(0%);
}
/* added */
.myhighlight {
display: block;
height: 3px;
margin-top: -10px;
background-color: #fff;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main-nav">
<li><a href="aboutUs.html">About
<div></div>
</a></li>
<!-- changed href in the next element for test purposes -->
<li><a href="js">Services
<div class="myclass"></div>
</a></li>
<li><a href="portfolio.html">Portfolio
<div></div>
</a></li>
<li><a href="career.html">Career
<div></div>
</a></li>
<li><a href="contact.html">Contact
<div></div>
</a></li>
</ul>
I'm not sure if my function is wrong or there is something i miss-typed somewhere but every time I open my html page then the nav is open.
the function closes correctly and opens correctly once clicked anywhere on the overlay but the only issue im having is that when i load the page the nav is already opened.
//Toggle of burgermenu
$(document).ready(function() {
$(".burger a").click(function() {
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
});
});
$('.overlay').on('click', function() {
$(".overlay").fadeToggle(200);
$(".burger a").toggleClass('btn-open').toggleClass('btn-close');
open = false;
});
//toggle transparency on scroll
$(window).scroll(function() {
if($(this).scrollTop() > 50) /*height in pixels when the navbar becomes non opaque*/
{
$('.navbar-default').addClass('opaque');
} else {
$('.navbar-default').removeClass('opaque');
}
});
/* NAVBAR */
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 100%;
width: auto;
padding: 15px;
margin-top: 0px;
margin-left: 10px;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
z-index: 99;
border: none;
}
.navbar-default {
background-color: rgba(0, 0, 0, 0.0);
height: 50px;
transition: background-color .5s ease 0s;
}
.navbar-default .navbar-toggle {
border-color: rgba(221, 221, 221, 0);
}
.navbar-header {
float: none;
}
.navbar-default.opaque {
height: 50px;
background-color: rgba(51, 51, 61, 0.8);
transition: background-color .5s ease 0s;
border-radius: 0;
}
#nav-container {
padding: 0px;
}
#burgerimg {
margin: 0px;
margin-right: 10px;
margin-top: 10px;
}
/*Overlay*/
.overlay {
position: fixed;
top: 0;
height: 100%;
width: 100%;
background: #33333d;
z-index: 99;
}
a.headlink {
font-size: 26px;
opacity: 0.3;
}
a.headlink :hover {
opacity: 1;
}
.wrap {
color: #e9e9e9;
text-align: center;
max-width: 90%;
margin: 0 auto;
}
.wrap ul.wrap-nav {
text-transform: capitalize;
padding: 150px 0px 100px;
}
.wrap ul.wrap-nav li {
display: inline-block;
vertical-align: top;
width: 15%;
}
.wrap ul.wrap-nav li a {
color: #fff;
display: block;
text-decoration: none;
transition-property: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-webkit-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
}
.wrap ul.wrap-nav li a:hover {
opacity: 1;
}
.wrap ul.wrap-nav ul li {
display: block;
width: 100%;
color: #e9e9e9;
}
.wrap ul.wrap-nav ul li a {
font-size: 12px;
font-family: 'Roboto', sans-serif;
font-weight: 100;
}
.wrap ul.wrap-nav ul li a {
color: #fff;
opacity: 0.3;
}
.wrap ul.wrap-nav ul li a:hover {
color: #34B484;
opacity: 1;
}
.wrap img {
margin: 0px;
margin-bottom: 30px;
}
#media screen and (max-width:48em) {
.wrap ul.wrap-nav>li {
width: 100%;
padding: 20px 0;
border-bottom: 1px solid #575757;
}
.wrap ul.wrap-nav {
padding: 30px 0px 0px;
}
nav ul {
opacity: 0;
visibility: hidden;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container" id="nav-container">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="images/Logo.png" align="left" alt="logo"></a>
<div class="burger">
<a class="btn-open" href="#"><img id="burgerimg" align="right" src="images/burger.png"></a>
</div>
</div>
</div>
</nav>
<div class="overlay">
<div class="wrap">
<ul class="wrap-nav">
<li>
<a href="#" class="headlink"><img src="images/prod-icon.png">
<BR>Products</a>
<ul>
<li>Product Brief</li>
<li>Getting Started</li>
<li>Technology</li>
</ul>
</li>
</ul>
</div>
</div>
<!--END NAVBAR-->
<h1>WEBPAGE AND ETC</h1>
Add display: none to overlay - see demo below:
//Toggle of burgermenu
$(document).ready(function() {
$(".burger a").click(function() {
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
});
});
$('.overlay').on('click', function() {
$(".overlay").fadeToggle(200);
$(".burger a").toggleClass('btn-open').toggleClass('btn-close');
open = false;
});
//toggle transparency on scroll
$(window).scroll(function() {
if ($(this).scrollTop() > 50) /*height in pixels when the navbar becomes non opaque*/ {
$('.navbar-default').addClass('opaque');
} else {
$('.navbar-default').removeClass('opaque');
}
});
/* NAVBAR */
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 100%;
width: auto;
padding: 15px;
margin-top: 0px;
margin-left: 10px;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
z-index: 99;
border: none;
}
.navbar-default {
background-color: rgba(0, 0, 0, 0.0);
height: 50px;
transition: background-color .5s ease 0s;
}
.navbar-default .navbar-toggle {
border-color: rgba(221, 221, 221, 0);
}
.navbar-header {
float: none;
}
.navbar-default.opaque {
height: 50px;
background-color: rgba(51, 51, 61, 0.8);
transition: background-color .5s ease 0s;
border-radius: 0;
}
#nav-container {
padding: 0px;
}
#burgerimg {
margin: 0px;
margin-right: 10px;
margin-top: 10px;
}
/*Overlay*/
.overlay {
position: fixed;
top: 0;
height: 100%;
width: 100%;
background: #33333d;
z-index: 99;
display: none;
}
a.headlink {
font-size: 26px;
opacity: 0.3;
}
a.headlink :hover {
opacity: 1;
}
.wrap {
color: #e9e9e9;
text-align: center;
max-width: 90%;
margin: 0 auto;
}
.wrap ul.wrap-nav {
text-transform: capitalize;
padding: 150px 0px 100px;
}
.wrap ul.wrap-nav li {
display: inline-block;
vertical-align: top;
width: 15%;
}
.wrap ul.wrap-nav li a {
color: #fff;
display: block;
text-decoration: none;
transition-property: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-webkit-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
}
.wrap ul.wrap-nav li a:hover {
opacity: 1;
}
.wrap ul.wrap-nav ul li {
display: block;
width: 100%;
color: #e9e9e9;
}
.wrap ul.wrap-nav ul li a {
font-size: 12px;
font-family: 'Roboto', sans-serif;
font-weight: 100;
}
.wrap ul.wrap-nav ul li a {
color: #fff;
opacity: 0.3;
}
.wrap ul.wrap-nav ul li a:hover {
color: #34B484;
opacity: 1;
}
.wrap img {
margin: 0px;
margin-bottom: 30px;
}
#media screen and (max-width:48em) {
.wrap ul.wrap-nav>li {
width: 100%;
padding: 20px 0;
border-bottom: 1px solid #575757;
}
.wrap ul.wrap-nav {
padding: 30px 0px 0px;
}
nav ul {
opacity: 0;
visibility: hidden;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container" id="nav-container">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="images/Logo.png" align="left" alt="logo"></a>
<div class="burger">
<a class="btn-open" href="#"><img id="burgerimg" align="right" src="images/burger.png"></a>
</div>
</div>
</div>
</nav>
<div class="overlay">
<div class="wrap">
<ul class="wrap-nav">
<li>
<a href="#" class="headlink"><img src="images/prod-icon.png">
<BR>Products</a>
<ul>
<li>Product Brief</li>
<li>Getting Started</li>
<li>Technology</li>
</ul>
</li>
</ul>
</div>
</div>
<!--END NAVBAR-->
<h1>WEBPAGE AND ETC</h1>
How can a div (menu) be collapsed when a HTML page has loaded? I tried using the following code but it's not working as the menu remains visible.
When the page has loaded, I want the menu to be collapsed on #media screen and (max-width: 768px) only. When the menu is collpased, the button should say menu +. When the menu is visible, the button should say menu -
$('#togglelink').click(function() {
$('ul').toggle(300);
if ($(this).text() == "menu +")
$(this).text("menu -")
else
$(this).text("menu +");
})
.wrapper {
width: 90%;
height: auto;
margin: 10px auto 10px auto;
border: 2px solid #000000;
background-color: #0099cc;
}
#charset "utf-8";
/* CSS Document */
body {
font-family: 'Work Sans', sans-serif;
}
.wrapper h1 {
font-size: 2.75em;
line-height: 100%;
margin-left: 10px;
margin-right: 10px;
text-align: center;
color: #fff;
}
/*Header menu*/
#menu {
background: #ffffff;
width: auto;
margin-bottom: 5px;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
line-height: 1;
/* display: block;
*/
zoom: 1;
/* Added the following for flexbox */
display: flex;
flex-wrap: wrap;
}
#menu ul:after {
content: ' ';
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
#menu ul li {
/* float: left;
*/
display: block;
padding: 0;
/* Added the following for flexbox */
flex-grow: 1;
}
#menu ul li a {
color: #000;
text-decoration: none;
display: block;
padding: 15px 25px;
font-family: 'Work Sans', sans-serif;
font-size: 1.5em;
font-weight: 500;
position: relative;
-webkit-transition: color .25s;
-moz-transition: color .25s;
-ms-transition: color .25s;
-o-transition: color .25s;
transition: color .25s;
/* Added the following for flexbox */
/* So that text appear visually centered */
text-align: center;
}
#menu ul li a:hover {
color: #000;
}
#menu ul li a:hover:before {
width: 100%;
}
#menu ul li a:before {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
background: #000;
-webkit-transition: width .25s;
-moz-transition: width .25s;
-ms-transition: width .25s;
-o-transition: width .25s;
transition: width .25s;
}
#menu ul li.last > a:after,
#cssmenu ul li:last-child > a:after {
display: none;
}
#menu ul li.active a {
color: #000;
}
#menu ul li.active a:before {
width: 100%;
}
.menu_toggle {
display: none;
}
#media screen and (max-width: 768px) {
#menu ul li {
float: none;
width: 100%;
}
#menu ul li a {
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#menu ul li a:after {
display: none;
}
#menu ul li a:before {
height: 1px;
background: #000;
width: 100%;
opacity: .2;
}
#menu ul li.last > a:before,
#cssmenu ul li:last-child > a:before {
display: none;
}
.menu_toggle {
visibility: visible;
background-color: white;
border: 3px solid black;
color: black;
text-align: center;
text-decoration: none;
display: block;
font-size: 16px;
font-size: 1.5em;
padding: 0.5em 2em;
font-weight: 500;
margin: 0 auto;
margin-bottom: 10px;
cursor: pointer;
}
.menu_toggle:active {
background-color: black;
color: white;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div>
<h1>Hello World</h1>
</div>
<div>
<button class="menu_toggle" tabindex="0" id="togglelink">menu +</button>
</div>
<div id="menu">
<ul>
<li><a><span>January</span></a>
</li>
<li><a><span>February</span></a>
</li>
<li><a><span>March</span></a>
</li>
<li><a><span>April</span></a>
</li>
<li><a><span>May</span></a>
</li>
<li><a><span>June</span></a>
</li>
<li><a><span>July</span></a>
</li>
<li><a><span>August</span></a>
</li>
<li><a><span>September</span></a>
</li>
<li><a><span>October</span></a>
</li>
<li><a><span>November</span></a>
</li>
<li><a><span>December</span></a>
</li>
</ul>
</div>
<p>
Hello World
</p>
</div>
window.innerWidth < 769 screens
window.innerWidth > 769 screens
Due to you requiring display: flex, one of the easiest ways to do this is with JS, you just need to add a hide() function before the click.
This will still then display your menu as display: flex as adding a display: none will change the menu to display: block when open.
$(document).ready(function() {
if(window.innerWidth < 769) {
$('#menu ul').hide();
}
$('#togglelink').click(function() {
$('ul').toggle(300);
if ($(this).text() == "menu +")
$(this).text("menu -")
else
$(this).text("menu +");
})
});
.wrapper {
width: 90%;
height: auto;
margin: 10px auto 10px auto;
border: 2px solid #000000;
background-color: #0099cc;
}
#charset "utf-8";
/* CSS Document */
body {
font-family: 'Work Sans', sans-serif;
}
.wrapper h1 {
font-size: 2.75em;
line-height: 100%;
margin-left: 10px;
margin-right: 10px;
text-align: center;
color: #fff;
}
/*Header menu*/
#menu {
background: #ffffff;
width: auto;
margin-bottom: 5px;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
line-height: 1;
/* display: block;
*/
zoom: 1;
/* Added the following for flexbox */
display: flex;
flex-wrap: wrap;
}
#menu ul:after {
content: ' ';
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
#menu ul li {
/* float: left;
*/
display: block;
padding: 0;
/* Added the following for flexbox */
flex-grow: 1;
}
#menu ul li a {
color: #000;
text-decoration: none;
display: block;
padding: 15px 25px;
font-family: 'Work Sans', sans-serif;
font-size: 1.5em;
font-weight: 500;
position: relative;
-webkit-transition: color .25s;
-moz-transition: color .25s;
-ms-transition: color .25s;
-o-transition: color .25s;
transition: color .25s;
/* Added the following for flexbox */
/* So that text appear visually centered */
text-align: center;
}
#menu ul li a:hover {
color: #000;
}
#menu ul li a:hover:before {
width: 100%;
}
#menu ul li a:before {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
background: #000;
-webkit-transition: width .25s;
-moz-transition: width .25s;
-ms-transition: width .25s;
-o-transition: width .25s;
transition: width .25s;
}
#menu ul li.last > a:after,
#cssmenu ul li:last-child > a:after {
display: none;
}
#menu ul li.active a {
color: #000;
}
#menu ul li.active a:before {
width: 100%;
}
.menu_toggle {
display: none;
}
#media screen and (max-width: 768px) {
#menu ul li {
float: none;
width: 100%;
}
#menu ul li a {
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#menu ul li a:after {
display: none;
}
#menu ul li a:before {
height: 1px;
background: #000;
width: 100%;
opacity: .2;
}
#menu ul li.last > a:before,
#cssmenu ul li:last-child > a:before {
display: none;
}
.menu_toggle {
visibility: visible;
background-color: white;
border: 3px solid black;
color: black;
text-align: center;
text-decoration: none;
display: block;
font-size: 16px;
font-size: 1.5em;
padding: 0.5em 2em;
font-weight: 500;
margin: 0 auto;
margin-bottom: 10px;
cursor: pointer;
}
.menu_toggle:active {
background-color: black;
color: white;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div>
<h1>Hello World</h1>
</div>
<div>
<button class="menu_toggle" tabindex="0" id="togglelink">menu +</button>
</div>
<div id="menu">
<ul>
<li><a><span>January</span></a>
</li>
<li><a><span>February</span></a>
</li>
<li><a><span>March</span></a>
</li>
<li><a><span>April</span></a>
</li>
<li><a><span>May</span></a>
</li>
<li><a><span>June</span></a>
</li>
<li><a><span>July</span></a>
</li>
<li><a><span>August</span></a>
</li>
<li><a><span>September</span></a>
</li>
<li><a><span>October</span></a>
</li>
<li><a><span>November</span></a>
</li>
<li><a><span>December</span></a>
</li>
</ul>
</div>
<p>
Hello World
</p>
</div>
Try This answer
https://jsfiddle.net/alfinpaul/umbtL1wq/2/
var windowSize = $(window).width(); // Could've done $(this).width()
if(windowSize < 768){
$('#menu ul').each(function(){
$(this).slideUp();
});
}
$('#togglelink').click(function() {
$('ul').toggle(300);
if ($(this).text() == "menu +")
$(this).text("menu -")
else
$(this).text("menu +");
})
.wrapper {
width: 90%;
height: auto;
margin: 10px auto 10px auto;
border: 2px solid #000000;
background-color: #0099cc;
}
#charset "utf-8";
/* CSS Document */
body {
font-family: 'Work Sans', sans-serif;
}
/*'FACH Technical Support' title*/
.wrapper h1 {
font-size: 2.75em;
line-height: 100%;
margin-left: 10px;
margin-right: 10px;
text-align: center;
color: #fff;
}
/*Header menu*/
#menu {
background: #ffffff;
width: auto;
margin-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div>
<h1>Hello World</h1>
</div>
<div>
<button class="menu_toggle" tabindex="0" id="togglelink">menu +</button>
</div>
<div id="menu">
<ul>
<li><a><span>January</span></a>
</li>
<li><a><span>February</span></a>
</li>
<li><a><span>March</span></a>
</li>
<li><a><span>April</span></a>
</li>
<li><a><span>May</span></a>
</li>
<li><a><span>June</span></a>
</li>
<li><a><span>July</span></a>
</li>
<li><a><span>August</span></a>
</li>
<li><a><span>September</span></a>
</li>
<li><a><span>October</span></a>
</li>
<li><a><span>November</span></a>
</li>
<li><a><span>December</span></a>
</li>
</ul>
</div>
<p>
Hello World
</p>
</div>
Helloo,
In your #media screen and (max-width: 768px) try adding:
#menu ul {
display:none;
}
Fiddle: https://jsfiddle.net/rq2a3b4b/1/
I'm using this NavBar that contains a dropdown menu:
http://jsfiddle.net/rvetgyen/
/**
* Created by Kupletsky Sergey on 17.10.14.
*
* Material Sidebar (Profile menu)
* Tested on Win8.1 with browsers: Chrome 37, Firefox 32, Opera 25, IE 11, Safari 5.1.7
* You can use this sidebar in Bootstrap (v3) projects. HTML-markup like Navbar bootstrap component will make your work easier.
* Dropdown menu and sidebar toggle button works with JQuery and Bootstrap.min.js
*/
// Sidebar toggle
//
// -------------------
$(document).ready(function() {
var overlay = $('.sidebar-overlay');
$('.sidebar-toggle').on('click', function() {
var sidebar = $('#sidebar');
sidebar.toggleClass('open');
if ((sidebar.hasClass('sidebar-fixed-left') || sidebar.hasClass('sidebar-fixed-right')) && sidebar.hasClass('open')) {
overlay.addClass('active');
} else {
overlay.removeClass('active');
}
});
overlay.on('click', function() {
$(this).removeClass('active');
$('#sidebar').removeClass('open');
});
});
// Sidebar constructor
//
// -------------------
$(document).ready(function() {
var sidebar = $('#sidebar');
var sidebarHeader = $('#sidebar .sidebar-header');
var sidebarImg = sidebarHeader.css('background-image');
var toggleButtons = $('.sidebar-toggle');
// Hide toggle buttons on default position
toggleButtons.css('display', 'none');
$('body').css('display', 'table');
// Sidebar position
$('#sidebar-position').change(function() {
var value = $(this).val();
sidebar.removeClass('sidebar-fixed-left sidebar-fixed-right sidebar-stacked').addClass(value).addClass('open');
if (value == 'sidebar-fixed-left' || value == 'sidebar-fixed-right') {
$('.sidebar-overlay').addClass('active');
}
// Show toggle buttons
if (value != '') {
toggleButtons.css('display', 'initial');
$('body').css('display', 'initial');
} else {
// Hide toggle buttons
toggleButtons.css('display', 'none');
$('body').css('display', 'table');
}
});
// Sidebar theme
$('#sidebar-theme').change(function() {
var value = $(this).val();
sidebar.removeClass('sidebar-default sidebar-inverse sidebar-colored sidebar-colored-inverse').addClass(value)
});
// Header cover
$('#sidebar-header').change(function() {
var value = $(this).val();
$('.sidebar-header').removeClass('header-cover').addClass(value);
if (value == 'header-cover') {
sidebarHeader.css('background-image', sidebarImg)
} else {
sidebarHeader.css('background-image', '')
}
});
});
/**
* Created by Kupletsky Sergey on 08.09.14.
*
* Add JQuery animation to bootstrap dropdown elements.
*/
(function($) {
var dropdown = $('.dropdown');
// Add slidedown animation to dropdown
dropdown.on('show.bs.dropdown', function(e) {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
// Add slideup animation to dropdown
dropdown.on('hide.bs.dropdown', function(e) {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});
})(jQuery);
(function(removeClass) {
jQuery.fn.removeClass = function(value) {
if (value && typeof value.test === "function") {
for (var i = 0, l = this.length; i < l; i++) {
var elem = this[i];
if (elem.nodeType === 1 && elem.className) {
var classNames = elem.className.split(/\s+/);
for (var n = classNames.length; n--;) {
if (value.test(classNames[n])) {
classNames.splice(n, 1);
}
}
elem.className = jQuery.trim(classNames.join(" "));
}
}
} else {
removeClass.call(this, value);
}
return this;
}
})(jQuery.fn.removeClass);
#import"https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,cyrillic";
/* -- import Roboto Font ---------------------------- */
/* -- import Material Icons Font -------------------- */
#font-face {
font-family: 'Material Design Iconic Font';
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/53474/Material-Design-Iconic-Font.eot?v=1.0');
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/53474/Material-Design-Iconic-Font.eot?#iefix&v=1.0') format('embedded-opentype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/53474/Material-Design-Iconic-Font.woff?v=1.0') format('woff'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/53474/Material-Design-Iconic-Font.ttf?v=1.0') format('truetype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/53474/Material-Design-Iconic-Font.svg?v=1.0#Material-Design-Iconic-Font') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="mds-"],
[class*=" mds-"] {
display: inline-block;
font: normal normal normal 14px/1'Material Design Iconic Font';
font-size: inherit;
speak: none;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.mds {
line-height: inherit;
vertical-align: bottom;
}
.mds-inbox:before {
content: "\f10c";
}
.mds-star:before {
content: "\f2e5";
}
.mds-send:before {
content: "\f119";
}
.mds-drafts:before {
content: "\f107";
}
.mds-arrow-back:before {
content: "\f297";
}
.mds-arrow-forward:before {
content: "\f298";
}
/* -- You can use this sidebar in Bootstrap (v3) projects. HTML-markup like Navbar bootstrap component will make your work easier. -- */
/* -- Box model ------------------------------- */
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* -- Demo style ------------------------------- */
html,
body {
position: relative;
min-height: 100%;
height: 100%;
}
body {
font-family: 'RobotoDraft', 'Roboto', 'Helvetica Neue, Helvetica, Arial', sans-serif;
font-style: normal;
font-weight: 300;
font-size: 14px;
line-height: 1.4;
color: #212121;
background-color: #f5f5f5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
.sidebar-overlay {
visibility: hidden;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
background: #000;
z-index: 1034;
-webkit-transition: visibility 0 linear 0.4s, opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-moz-transition: visibility 0 linear 0.4s, opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transition: visibility 0 linear 0.4s, opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
.sidebar-overlay.active {
opacity: 0.5;
visibility: visible;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
transition-delay: 0;
}
.top-bar {
height: 25px;
background: rgba(0, 0, 0, 0.1);
}
/* -- Google typography ------------------------------- */
.headline {
font-size: 24px;
font-weight: 300;
line-height: 1.1;
color: #212121;
text-transform: inherit;
letter-spacing: inherit;
}
.subhead {
font-size: 16px;
font-weight: 300;
line-height: 1.1;
color: #212121;
text-transform: inherit;
letter-spacing: inherit;
}
/* -- Bootstrap-like style ------------------------------- */
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px solid;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
.dropdown-menu {
display: none;
}
/* -- Constructor style ------------------------------- */
.constructor {
position: relative;
margin: 0;
padding: 0 0px;
-webkit-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
-o-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}
.sidebar,
.wrapper {
display: table-cell;
vertical-align: top;
}
.sidebar-stacked.open + .wrapper .constructor {
margin-left: 280px;
}
#media (max-width: 768px) {
.sidebar-stacked.open + .wrapper .constructor {
margin-left: 240px;
}
}
/* -- Sidebar style ------------------------------- */
.sidebar {
position: relative;
display: block;
min-height: 100%;
overflow-y: auto;
overflow-x: hidden;
border: none;
-webkit-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
-o-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}
.sidebar:before,
.sidebar:after {
content: " ";
display: table;
}
.sidebar:after {
clear: both;
}
.sidebar::-webkit-scrollbar-track {
border-radius: 2px;
}
.sidebar::-webkit-scrollbar {
width: 5px;
background-color: #F7F7F7;
}
.sidebar::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #BFBFBF;
}
.sidebar .sidebar-header {
position: relative;
height: 157.5px;
margin-bottom: 8px;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.sidebar .sidebar-header.header-cover {
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.sidebar .sidebar-header:hover .sidebar-toggle {
opacity: 1;
}
.sidebar .sidebar-toggle {
position: relative;
float: right;
margin: 16px;
padding: 0;
background-image: none;
border: none;
height: 40px;
width: 40px;
font-size: 20px;
opacity: 0.7;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.sidebar .sidebar-toggle:before,
.sidebar .sidebar-toggle:after {
content: " ";
display: table;
}
.sidebar .sidebar-toggle:after {
clear: both;
}
.sidebar .icon-material-sidebar-arrow:before {
content: "\e610";
}
.sidebar .sidebar-image img {
width: 54px;
height: 54px;
margin: 16px;
border-radius: 50%;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.sidebar .sidebar-brand {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: block;
height: 48px;
line-height: 48px;
padding: 0;
padding-left: 16px;
padding-right: 56px;
text-decoration: none;
clear: both;
font-weight: 500;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.sidebar .sidebar-brand:hover,
.sidebar .sidebar-brand:focus {
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
}
.sidebar .sidebar-brand .caret {
position: absolute;
right: 24px;
top: 24px;
}
.sidebar .sidebar-brand .sidebar-badge {
position: absolute;
right: 16px;
top: 12px;
}
.sidebar .sidebar-brand:hover,
.sidebar .sidebar-brand:focus {
text-decoration: none;
}
.sidebar .sidebar-badge {
display: inline-block;
min-width: 24px;
height: 24px;
line-height: 24px;
padding: 0 3px;
font-size: 10px;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
}
.sidebar .sidebar-badge.badge-circle {
border-radius: 50%;
}
.sidebar .sidebar-divider,
.sidebar .sidebar-nav .divider {
position: relative;
display: block;
height: 1px;
margin: 8px 0;
padding: 0;
overflow: hidden;
}
.sidebar .sidebar-text {
display: block;
height: 48px;
line-height: 48px;
padding: 0;
padding-left: 16px;
padding-right: 56px;
text-decoration: none;
clear: both;
font-weight: 500;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.sidebar .sidebar-text:hover,
.sidebar .sidebar-text:focus {
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
}
.sidebar .sidebar-text .caret {
position: absolute;
right: 24px;
top: 24px;
}
.sidebar .sidebar-text .sidebar-badge {
position: absolute;
right: 16px;
top: 12px;
}
.sidebar .sidebar-icon {
display: inline-block;
margin-right: 16px;
min-width: 40px;
width: 40px;
text-align: left;
font-size: 20px;
}
.sidebar .sidebar-icon:before,
.sidebar .sidebar-icon:after {
vertical-align: middle;
}
.sidebar .sidebar-nav {
margin: 0;
padding: 0;
}
.sidebar .sidebar-nav li {
position: relative;
list-style-type: none;
}
.sidebar .sidebar-nav li a {
position: relative;
cursor: pointer;
user-select: none;
display: block;
height: 48px;
line-height: 48px;
padding: 0;
padding-left: 16px;
padding-right: 56px;
text-decoration: none;
clear: both;
font-weight: 500;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.sidebar .sidebar-nav li a:hover,
.sidebar .sidebar-nav li a:focus {
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
}
.sidebar .sidebar-nav li a .caret {
position: absolute;
right: 24px;
top: 24px;
}
.sidebar .sidebar-nav li a .sidebar-badge {
position: absolute;
right: 16px;
top: 12px;
}
.sidebar .sidebar-nav li a:hover {
background: transparent;
}
.sidebar .sidebar-nav .dropdown-menu {
position: relative;
width: 100%;
margin: 0;
padding: 0;
border: none;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.sidebar-default {
background-color: #ffffff;
}
.sidebar-default .sidebar-header {
background-color: #eceff1;
}
.sidebar-default .sidebar-toggle {
color: #212121;
background-color: transparent;
}
.sidebar-default .sidebar-brand {
color: #DEDEDE;
background-color: transparent;
}
.sidebar-default .sidebar-brand:hover,
.sidebar-default .sidebar-brand:focus {
color: #212121;
background-color: rgba(0, 0, 0, 0.1);
}
.sidebar-default .sidebar-badge {
color: #ffffff;
background-color: #bdbdbd;
}
.sidebar-default .sidebar-divider,
.sidebar-default .sidebar-nav .divider {
background-color: #bdbdbd;
}
.sidebar-default .sidebar-text {
color: #212121;
}
.sidebar-default .sidebar-nav li > a {
color: #212121;
background-color: transparent;
}
.sidebar-default .sidebar-nav li > a i {
color: #757575;
}
.sidebar-default .sidebar-nav li:hover > a,
.sidebar-default .sidebar-nav li > a:hover {
color: #212121;
background-color: #e0e0e0;
}
.sidebar-default .sidebar-nav li:hover > a i,
.sidebar-default .sidebar-nav li > a:hover i {
color: #757575;
}
.sidebar-default .sidebar-nav li:focus > a,
.sidebar-default .sidebar-nav li > a:focus {
color: #212121;
background-color: transparent;
}
.sidebar-default .sidebar-nav li:focus > a i,
.sidebar-default .sidebar-nav li > a:focus i {
color: #757575;
}
.sidebar-default .sidebar-nav > .open > a,
.sidebar-default .sidebar-nav > .open > a:hover,
.sidebar-default .sidebar-nav > .open > a:focus {
color: #212121;
background-color: #e0e0e0;
}
.sidebar-default .sidebar-nav > .active > a,
.sidebar-default .sidebar-nav > .active > a:hover,
.sidebar-default .sidebar-nav > .active > a:focus {
color: #212121;
background-color: #e0e0e0;
}
.sidebar-default .sidebar-nav > .disabled > a,
.sidebar-default .sidebar-nav > .disabled > a:hover,
.sidebar-default .sidebar-nav > .disabled > a:focus {
color: #e0e0e0;
background-color: transparent;
}
.sidebar-default .sidebar-nav > .dropdown > .dropdown-menu {
background-color: #e0e0e0;
}
.sidebar-default .sidebar-nav > .dropdown > .dropdown-menu > li > a:focus {
background-color: #e0e0e0;
color: #212121;
}
.sidebar-default .sidebar-nav > .dropdown > .dropdown-menu > li > a:hover {
background-color: #cecece;
color: #212121;
}
.sidebar-default .sidebar-nav > .dropdown > .dropdown-menu > .active > a,
.sidebar-default .sidebar-nav > .dropdown > .dropdown-menu > .active > a:hover,
.sidebar-default .sidebar-nav > .dropdown > .dropdown-menu > .active > a:focus {
color: #212121;
background-color: #e0e0e0;
}
.sidebar {
width: 0;
-webkit-transform: translate3d(-280px, 0, 0);
transform: translate3d(-280px, 0, 0);
}
.sidebar.open {
min-width: 280px;
width: 280px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.sidebar-fixed-left,
.sidebar-fixed-right,
.sidebar-stacked {
position: fixed;
top: 0;
bottom: 0;
z-index: 1035;
}
.sidebar-stacked {
left: 0;
}
.sidebar-fixed-left {
left: 0;
box-shadow: 2px 0px 15px rgba(0, 0, 0, 0.35);
-webkit-box-shadow: 2px 0px 15px rgba(0, 0, 0, 0.35);
}
.sidebar-fixed-right {
right: 0;
box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.35);
-webkit-box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.35);
-webkit-transform: translate3d(280px, 0, 0);
transform: translate3d(280px, 0, 0);
}
.sidebar-fixed-right.open {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.sidebar-fixed-right .icon-material-sidebar-arrow:before {
content: "\e614";
}
#media (max-width: 768px) {
.sidebar.open {
min-width: 240px;
width: 240px;
}
.sidebar .sidebar-header {
height: 135px;
}
.sidebar .sidebar-image img {
width: 44px;
height: 44px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Overlay for fixed sidebar -->
<div class="sidebar-overlay"></div>
<!-- Material sidebar -->
<aside id="sidebar" class="sidebar sidebar-default open" role="navigation">
<!-- Sidebar header -->
<div class="sidebar-header header-cover" style="background-image: url(http://2.bp.blogspot.com/-2RewSLZUzRg/U-9o6SD4M6I/AAAAAAAADIE/voax99AbRx0/s1600/14%2B-%2B1%2B%281%29.jpg);">
<!-- Top bar -->
<div class="top-bar"></div>
<!-- Sidebar toggle button -->
<button type="button" class="sidebar-toggle"> <i class="icon-material-sidebar-arrow"></i>
</button>
<!-- Sidebar brand image -->
<div class="sidebar-image">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53474/atom_profile_01.jpg">
</div>
<!-- Sidebar brand name --> <a data-toggle="dropdown" class="sidebar-brand" href="#settings-dropdown">
john.doe#gmail.com
<b class="caret"></b>
</a>
</div>
<!-- Sidebar navigation -->
<ul class="nav sidebar-nav">
<li class="dropdown">
<ul id="settings-dropdown" class="dropdown-menu">
<li> <a href="#" tabindex="-1">
Profile
</a>
</li>
<li> <a href="#" tabindex="-1">
Settings
</a>
</li>
<li> <a href="#" tabindex="-1">
Help
</a>
</li>
<li> <a href="#" tabindex="-1">
Exit
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<i class="sidebar-icon md-inbox"></i>
Inbox
</a>
</li>
<li>
<a href="#">
<i class="sidebar-icon md-star"></i>
Starred
</a>
</li>
<li>
<a href="#">
<i class="sidebar-icon md-send"></i>
Sent Mail
</a>
</li>
<li>
<a href="#">
<i class="sidebar-icon md-drafts"></i>
Drafts
</a>
</li>
<li class="divider"></li>
<li class="dropdown"> <a class="ripple-effect dropdown-toggle" href="#" data-toggle="dropdown">
All Mail
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li> <a href="#" tabindex="-1">
Social
<span class="sidebar-badge">12</span>
</a>
</li>
<li> <a href="#" tabindex="-1">
Promo
<span class="sidebar-badge">0</span>
</a>
</li>
</ul>
</li>
<li> <a href="#">
Trash
<span class="sidebar-badge">3</span>
</a>
</li>
<li> <a href="#">
Spam
<span class="sidebar-badge">456</span>
</a>
</li>
<li> <a href="#">
Follow Up
<span class="sidebar-badge badge-circle">i</span>
</a>
</li>
</ul>
<!-- Sidebar divider -->
<!-- <div class="sidebar-divider"></div> -->
<!-- Sidebar text -->
<!-- <div class="sidebar-text">Text</div> -->
</aside>
I want to make it in a way that if you click in "All Mail" and then "Social" for example, the "All Mail" dropdown will still be open and the only way to close it is clicking again in "All Mail".
To ilustrate better what I trying to achieve as result is something similar to this sidebar:
https://material.angularjs.org/#/
After you select a category you can navigate through the elements and the dropdown (if I can call it like that) don't hide.
This will solve your problem:
$("ul.dropdown-menu li a").click(function(){
$(this).parent().parent().siblings(".dropdown-toggle").show();
});