I need something like this in image. Also, it should have navigation buttons to scroll horizontally on click of navigation buttons so that the list is dynamic.
I am inserting code below with CSS and HTML. It has to be done only with CSS but for navigation icons we can use JavaScript. And also <li> element text should not overlap even if it's too long.
.timeline {
white-space: nowrap;
overflow-x: hidden;
}
.timeline ol {
font-size: 0;
width: 100vw;
padding: 250px 0;
transition: all 1s;
}
.timeline ol li {
position: relative;
display: inline-block;
list-style-type: none;
width: 160px;
height: 3px;
background: #e1e2e3;
}
.timeline ol li:last-child {
width: 280px;
}
.timeline ol li:not(:first-child) {
margin-left: 14px;
}
.timeline ol li:not(:last-child)::after {
content: '';
position: absolute;
top: 50%;
left: calc(100% + 1px);
bottom: 0;
width: 12px;
height: 12px;
transform: translateY(-50%);
border-radius: 50%;
background: #e1e2e3;
}
<div class="timeline">
<ol>
<li>abc</li>
<li>hello welcome</li>
<li>cool summer</li>
<li>hi there</li>
<li>whats up</li>
</ol>
</div>
try this:
.timeline {
overflow-x: hidden;
padding: 20px 0;
}
.timeline ol {
width: 100%;
transition: all 1s;
margin:0;
padding:0;
display:flex;
justify-content: space-between;
}
.timeline ol li {
list-style:none;
position: relative;
text-align:center;
flex-grow: 1;
flex-basis: 0;
padding: 0 5px;
}
.timeline ol li:before {
content:"";
width:10px;
height:10px;
display:block;
border-radius:50%;
background: #ccc;
margin:0 auto 5px auto;
}
.timeline ol li:not(:last-child)::after {
content: "";
width: calc(100% - 14px);
height: 2px;
display: block;
background: #ccc;
margin: 0;
position: absolute;
top: 4px;
left: calc(50% + 7px);
}
https://jsfiddle.net/uer3gxeo/1/
Related
For my app I want to create a menu bar wil tooltips. It seems to work for my list icons, but not for my settings icon. I guess it has something to do with specifying my elements within CSS, but on the other hand I think something is wrong with my javascript code as well maybe. Can someone point me in the right direction perhaps?
const menu = document.querySelector(".menu"); // get menu item for click event
menu.addEventListener("click", function () {
expandSidebar();
showHover();
});
/**
* expand sidebar if it is short, otherwise collapse it
*/
function expandSidebar() {
document.querySelector("body").classList.toggle("short");
let keepSidebar = document.querySelectorAll("body .short");
if (keepSidebar.length === 1) {
localStorage.setItem("keepSidebar", "true");
} else {
localStorage.removeItem("keepSidebar");
}
}
/**
* show hover effect on sidebar
*/
function showHover() {
const li = document.querySelectorAll(".short .sidebar li");
if (li.length > 0) {
li.forEach(function (item) {
item.addEventListener("mouseover", function () {
const text = item.querySelector(".text");
text.classList.add("hover");
});
item.addEventListener("mouseout", function () {
const text = item.querySelector(".text");
text.classList.remove("hover");
});
});
}
}
function showHover2() {
const a = document.querySelectorAll(".short .sidebar .menusettings .settings a");
if (a.length > 0) {
a.forEach(function (item2) {
item2.addEventListener("mouseover", function () {
const text2 = item2.querySelector(".text2");
text2.classList.add("hover");
});
item2.addEventListener("mouseout", function () {
const text2 = item2.querySelector(".text2");
text2.classList.remove("hover");
});
});
}
}
/**
* check local storage for keep sidebar
*/
function showStoredSidebar() {
if (localStorage.getItem("keepSidebar") === "true") {
document.querySelector("body").classList.add("short");
showHover();
}
}
showStoredSidebar(); // show sidebar if stored in local storage
#import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
body {
padding: 0;
margin: 0;
position: relative;
min-height: 100vh;
overflow: hidden;
font-family: "Open Sans", sans-serif;
font-size: 14px;
}
.container {
display: flex;
flex-flow: row wrap;
}
.container .sidebar {
background-color: #333;
color: #fff;
width: 20%;
height: 100%;
padding: 0 1rem;
position: fixed;
top: 0;
left: 0;
transition: width 0.1s ease-in-out;
}
.container .sidebar a {
color: #fff;
text-decoration: none;
}
.container .sidebar .sidebartop {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
padding-top: 1rem;
height: 55px;
width:100%;
}
.container .sidebar .sidebartop .logo {
width: 70%;
}
.container .sidebar .sidebartop .logo img {
height: auto;
width: 100%;
}
.container .sidebar .sidebartop .menu {
width:20%;
text-align: end;
}
.container .sidebar .sidebartop .menu i {
cursor: pointer;
font-size: 1.15rem;
}
.container .sidebar .sidebartop .logo-mobile {
display: none;
}
.container .sidebar nav ul {
padding: 0;
margin: 0;
list-style: none;
}
.container .sidebar nav ul li {
display: block;
align-items: center;
padding: 1.25rem 0;
position: relative;
background-color: transparent;
transition: background-color 0.25s ease-in-out;
}
.container .sidebar nav ul li a {
display: block;
}
.container .sidebar nav ul li a i {
font-size: 1.25rem;
}
.container .sidebar nav ul li a .text {
position: relative;
left: 1rem;
top: -0.2rem;
}
.container .sidebar .menusettings .settings a .text2 {
position: relative;
left: 1rem;
top: -0.2rem;
}
.container .sidebar .account {
display: flex;
justify-content: space-between;
align-content: center;
align-items: center;
width: calc(100% - 2rem);
position: relative;
}
.container .sidebar .account .avatar {
margin-right: 1rem;
width: 20%;
}
.container .sidebar .account .avatar img {
border-radius: 50%;
height: 50px;
width: 50px;
margin-top: 2rem;
}
.container .sidebar .account .name {
flex: 1 1 auto;
margin-top: 2rem;
}
.container .sidebar .account .name h4 {
padding: 0;
margin: 0;
}
.container .sidebar .account .logout {
flex: 1 1 auto;
text-align: end;
margin-left:0.1rem;
margin-top: 2rem;
}
.container .sidebar .account .logout i {
font-size: 1.5rem;
}
.container .main {
margin-left: calc(30% + 2rem);
padding: 1rem;
}
.short .sidebar {
width: 2.5%;
text-align: center;
}
.short .sidebar .logo, .short .sidebar .text, .short .sidebar .avatar, .short .sidebar .name {
display: none;
}
.short .sidebar .sidebartop {
display: block;
height: 55px;
}
.short .sidebar .sidebartop .logo-mobile {
display: none;
}
.short .sidebar .sidebartop .menu {
width: 100%;
text-align: center;
}
.short .sidebar .text.hover {
display: block !important;
background-color: rgba(255, 255, 255, 0.9);
color: #333;
padding: 0.5rem;
box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.25);
position: absolute;
left: 4rem;
top: 1rem;
border-radius: 0.25rem;
}
.short .sidebar .text2.hover {
display: block !important;
background-color: rgba(255, 255, 255, 0.9);
color: #333;
padding: 0.5rem;
box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.25);
position: absolute;
left: 4rem;
top: 1rem;
border-radius: 0.25rem;
}
.short .sidebar .account {
display: block;
}
.short .sidebar .account .logout {
width: 100%;
text-align: center;
}
.short .main {
margin-left: calc(5% + 2rem);
}
nav {
position: relative;
height:25rem;
}
.container .menusettings .settings a {
display: block;
}
.container .menusettings .settings i {
font-size:1.25rem;
}
.menusettings .settings span {
margin-left:1rem;
}
.menusettings {
display: block;
position: relative;
margin-top:9rem;
}
/* Tooltip dashboard */
[tooltip] {
position: relative;
}
[tooltip]::before,
[tooltip]::after {
text-transform: none;
font-size: .8em;
line-height: 1;
user-select: none;
pointer-events: none;
position: absolute;
display: none;
opacity: 0;
}
[tooltip]::before {
content: '';
border: 2px solid transparent;
z-index: 1001;
}
[tooltip]::after {
content: attr(tooltip);
font-family: Helvetica, sans-serif;
text-align: center;
display: block !important;
background-color: rgba(255, 255, 255, 0.9);
color: #333;
padding: 0.5rem;
box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.25);
position: absolute;
left: 4rem;
top: 1rem;
border-radius: 0.25rem;
}
[tooltip]:hover::before,
[tooltip]:hover::after {
display: block;
}
[tooltip='']::before,
[tooltip='']::after {
display: none ;
}
[tooltip][flow^="right"]::before {
top: 50%;
border-left-width: 0;
border-right-color: #333;
transform: translate(.5em, -50%);
}
[tooltip][flow^="right"]::after {
top: 50%;
left: calc(100% + 5px);
transform: translate(.5em, -50%);
}
#keyframes tooltips-horz {
to {
opacity: 3.9;
transform: translate(0, -50%);
}
}
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
animation: tooltips-horz 300ms ease forwards;
}
.texteditor {
position: relative;
left:200px;
top:100px;
}
#media (max-width: 844px) {
.container .sidebar {
width: 5%;
text-align: center;
}
.container .sidebar .logo, .container .sidebar .text, .container .sidebar .avatar, .container .sidebar .name {
display: none;
}
.container .sidebar .sidebartop {
display: block;
height: auto;
}
.container .sidebar .sidebartop .logo-mobile {
display: block;
}
.container .sidebar .sidebartop .logo-mobile img {
height: auto;
width: 80%;
}
.container .sidebar .sidebartop .menu {
display: none;
}
.container .sidebar nav ul li {
padding: 0;
}
.container .sidebar nav ul li a {
padding: 0.6rem 0;
}
.container .sidebar .account {
display: block;
}
.container .sidebar .account .logout {
width: 100%;
text-align: center;
}
.container .main {
margin-left: calc(5% + 2rem);
}
}
#media (max-width: 390px) {
.container .sidebar {
width: 8%;
}
.container .sidebar nav ul li {
padding: 0;
}
.container .sidebar nav ul li a {
padding: 2rem 0;
}
.container .main {
margin-left: calc(8% + 2rem);
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.3/font/bootstrap-icons.css">
<link rel="stylesheet" href="/Software/softwarenew.css">
</head>
<body>
<div class="container">
<div class="sidebar">
<div class="sidebartop">
<div class="logo">
</div>
<div class="logo-mobile">
<img src="/images/mobile.svg" alt="">
</div>
<div class="menu">
<i class="bi bi-arrow-bar-right"></i>
</div>
</div>
<nav>
<ul>
<li><i class="bi bi-house"></i><span class="text">Home</span></li>
<li><i class="bi bi-pencil-square"></i><span class="text">Draft</span></li>
<li><i class="bi bi-sliders"></i><span class="text">CPQ</span></li>
<li><i class="bi bi-calendar"></i><span class="text">Calendar</span></li>
<li><i class="bi bi-receipt"></i><span class="text">Invoice</span></li>
</ul>
</nav>
<div class="menusettings">
<div class="settings">
<span tooltip="Settings" flow="right">
<i class="bi bi-gear"></i><span class="text">Settings</span>
</span>
</div>
<div class="account">
<div class="avatar">
<img src="/images/avatar.jpg" alt="">
</div>
<div class="name">
<h4>The DevDrawer</h4>
Adminstrator
</div>
<div class="logout">
<i class="bi bi-box-arrow-left"></i>
</div>
</div>
</div>
</div>
<div class="main">
[page content here]
</div>
</div>
<script src="/Software/softwarenew.js"></script>
</body>
</html>
You need to modify all your three files. The changes are below,
Modify class="text2" for Settings in html
<div class="settings">
<i class="bi bi-gear"></i><span class="text2">Settings</span>
</div>
Add function call to showHover2() in addEventListener in JS
menu.addEventListener("click", function () {
expandSidebar();
showHover();
showHover2();
});
Add the below codes in your css
#import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
body {
color: #333;
padding: 0;
margin: 0;
position: relative;
min-height: 100vh;
overflow: hidden;
font-family: "Open Sans", sans-serif;
font-size: 14px;
}
.container {
display: flex;
flex-flow: row wrap;
}
.container .sidebar {
background-color: #333;
color: #fff;
width: 20%;
height: 100%;
padding: 0 1rem;
position: fixed;
top: 0;
left: 0;
transition: width 0.1s ease-in-out;
}
.container .sidebar a {
color: #fff;
text-decoration: none;
}
.container .sidebar .sidebartop {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
padding-top: 1rem;
height: 55px;
width:100%;
}
.container .sidebar .sidebartop .logo {
width: 70%;
}
.container .sidebar .sidebartop .logo img {
height: auto;
width: 100%;
}
.container .sidebar .sidebartop .menu {
width:20%;
text-align: end;
}
.container .sidebar .sidebartop .menu i {
cursor: pointer;
font-size: 1.15rem;
}
.container .sidebar .sidebartop .logo-mobile {
display: none;
}
.container .sidebar nav ul {
padding: 0;
margin: 0;
list-style: none;
}
.container .sidebar nav ul li {
display: block;
align-items: center;
padding: 1.25rem 0;
position: relative;
background-color: transparent;
transition: background-color 0.25s ease-in-out;
}
.container .sidebar nav ul li a {
display: block;
}
.container .sidebar nav ul li a i {
font-size: 1.25rem;
}
.container .sidebar nav ul li a .text {
position: relative;
left: 1rem;
top: -0.2rem;
}
.container .sidebar .menusettings .settings a .text2 {
position: relative;
left: 1rem;
top: -0.2rem;
}
.container .sidebar .account {
display: flex;
justify-content: space-between;
align-content: center;
align-items: center;
width: calc(100% - 2rem);
position: relative;
}
.container .sidebar .account .avatar {
margin-right: 1rem;
width: 20%;
}
.container .sidebar .account .avatar img {
border-radius: 50%;
height: 50px;
width: 50px;
margin-top: 2rem;
}
.container .sidebar .account .name {
flex: 1 1 auto;
margin-top: 2rem;
}
.container .sidebar .account .name h4 {
padding: 0;
margin: 0;
}
.container .sidebar .account .logout {
flex: 1 1 auto;
text-align: end;
margin-left:0.1rem;
margin-top: 2rem;
}
.container .sidebar .account .logout i {
font-size: 1.5rem;
}
.container .main {
margin-left: calc(30% + 2rem);
padding: 1rem;
}
.short .sidebar {
width: 2.5%;
text-align: center;
}
.short .sidebar .logo, .short .sidebar .text, .short .sidebar .avatar, .short .sidebar .name {
display: none;
}
.short .sidebar .menusettings .text2 {
display: none;
}
.short .sidebar .sidebartop {
display: block;
height: 55px;
}
.short .sidebar .sidebartop .logo-mobile {
display: none;
}
.short .sidebar .sidebartop .menu {
width: 100%;
text-align: center;
}
.short .sidebar .text.hover {
display: block !important;
background-color: rgba(255, 255, 255, 0.9);
color: #333;
padding: 0.5rem;
box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.25);
position: absolute;
left: 4rem;
top: 1rem;
border-radius: 0.25rem;
}
.short .sidebar .menusettings .settings .text2.hover {
display: block !important;
background-color: rgba(255, 255, 255, 0.9);
color: #333;
padding: 0.5rem;
box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.25);
position: absolute;
left: 4rem;
top: -0.5rem;
border-radius: 0.25rem;
}
.short .sidebar .account {
display: block;
}
.short .sidebar .account .logout {
width: 100%;
text-align: center;
}
.short .main {
margin-left: calc(5% + 2rem);
}
nav {
position: relative;
height:25rem;
}
/* .container .menusettings .settings a {
display: block;
} */
.container .menusettings .settings i {
font-size:1.25rem;
}
.menusettings .settings span {
margin-left:0rem;
}
.container .menusettings {
display: block;
position: relative;
margin-top:9rem;
}
Hope it helps.
hello I made a menu button and a menu but I don't know how to link them together when you click on the menu button the menu appears from the top to the center which starts with 0% opacity and gets to 100% opacity when you click on the menu button the menu closes and fades away I will appreciate if you can help me
Here is the code
var menu = document.getElementById("menu");
menu.onclick = function(){
menu.classList.toggle("openmenu");
}
body{
background-color: #333;
}
a{
text-decoration: none;
color: inherit
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
width: 100%;
height: 0vh;
background: none;
display: flex;
align-items: top;
justify-content: right;
}
.menu{
width: 50px;
height: 50px;
margin: 3px;
background-image: linear-gradient(to right, #072AC8, #1E91D6 );
border-radius: 10px;
cursor: pointer;
}
.menu div{
width: 30px;
height: 30px;
margin: 10px;
position: relative;
}
.menu span{
background: #fff;
width: 100%;
height: 2.5px;
border-radius: 1.25px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.5s, width 0.5s;
}
.menu .line-1{
transform: translate(-50%, -12.5px);
}
.menu .line-3{
transform: translate(-50%, 10px);
}
.openmenu .line-1{
transform: translate(-50%, -50%) rotate(-45deg);
}
.openmenu .line-3{
transform: translate(-50%, -50%) rotate(45deg);
}
.openmenu .line-2{
width: 0;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.container2{
background: #333;
width: 100%;
height: 100vh;
display: flex;
align-items: flex-start;
justify-content: center;
}
nav{
background: #fff;
border-radius: 50px;
padding: 10px;
box-shadow: 0 25px 20px -20px #000;
}
nav ul li{
list-style: none;
display: inline-block;
padding: 13px, 35px;
margin: 10px;
font-size: 18px;
font: 500;
color: #777;
cursor: pointer;
position: relative;
z-index: 2;
transition: color 0.5s;
}
nav ul li::after{
content: '';
background-image: linear-gradient(to right, #072AC8, #1E91D6 );
width: 100%;
height: 100%;
border-radius: 30px;
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
opacity: 0;
transition: top 0.5s, opacity 0.5s;
}
nav ul li:hover{
color: #fff;
}
nav ul li:hover::after{
top: 50%;
opacity: 1;
}
<div class="container">
<div class="menu" id="menu">
<div>
<span class="line-1"></span>
<span class="line-2"></span>
<span class="line-3"></span>
</div>
</div>
</div>
<div class="container2">
<nav>
<ul>
<li>Home</li>
<li>Projects</li>
<li>Merch</li>
<li>About</li>
</ul>
</nav>
</div>
basically what i did was gave container 2 an active class when click on menu.and defined container2.active in the css.
making it display block in the first place and flex when active
var menu = document.getElementById("menu");
const nav = document.getElementsByClassName("container2")[0];
menu.addEventListener("click", () => {
menu.classList.toggle("openmenu");
nav.classList.toggle("active");
})
body {
background-color: #333;
}
a {
text-decoration: none;
color: inherit
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
height: 0vh;
background: none;
display: flex;
align-items: top;
justify-content: right;
}
.menu {
width: 50px;
height: 50px;
margin: 3px;
background-image: linear-gradient(to right, #072AC8, #1E91D6);
border-radius: 10px;
cursor: pointer;
}
.menu div {
width: 30px;
height: 30px;
margin: 10px;
position: relative;
}
.menu span {
background: #fff;
width: 100%;
height: 2.5px;
border-radius: 1.25px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.5s, width 0.5s;
}
.menu .line-1 {
transform: translate(-50%, -12.5px);
}
.menu .line-3 {
transform: translate(-50%, 10px);
}
.openmenu .line-1 {
transform: translate(-50%, -50%) rotate(-45deg);
}
.openmenu .line-3 {
transform: translate(-50%, -50%) rotate(45deg);
}
.openmenu .line-2 {
width: 0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.container2 {
background: #333;
width: 100%;
height: 100vh;
display: none;
align-items: flex-start;
justify-content: center;
}
.container2.active {
display: flex;
}
nav {
background: #fff;
border-radius: 50px;
padding: 10px;
box-shadow: 0 25px 20px -20px #000;
}
nav ul li {
list-style: none;
display: inline-block;
padding: 13px, 35px;
margin: 10px;
font-size: 18px;
font: 500;
color: #777;
cursor: pointer;
position: relative;
z-index: 2;
transition: color 0.5s;
}
nav ul li::after {
content: '';
background-image: linear-gradient(to right, #072AC8, #1E91D6);
width: 100%;
height: 100%;
border-radius: 30px;
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
opacity: 0;
transition: top 0.5s, opacity 0.5s;
}
nav ul li:hover {
color: #fff;
}
nav ul li:hover::after {
top: 50%;
opacity: 1;
}
<div class="container">
<div class="menu" id="menu">
<div>
<span class="line-1"></span>
<span class="line-2"></span>
<span class="line-3"></span>
</div>
</div>
</div>
<div class="container2 ">
<nav>
<ul>
<li>Home</li>
<li>Projects</li>
<li>Merch</li>
<li>About</li>
</ul>
</nav>
</div>
I started programming the mobile version of my nav menu earlier. I had to rework my #serviceNav to get it to work in a mobile setting. When doing this I changed my javascript from this:
/*$('#serviceClick').click( function () {
$('#serviceNav').addClass('activeSol');
});*/
$('[data-pop-close]').on('click', function(e) {
//var targeted_pop = $(this).attr('data-pop-close');
$('#serviceNav').removeClass('active');
$('body').css('overflow', 'auto');
e.preventDefault();
});
To this:
$('#serviceClick').click(function() {
var relative = $(this);
if (!relative.hasClass('activeSol')) {
$('.activeSol').removeClass('activeSol').next('#serviceNav').slideUp(500);
relative.addClass('activeSol').next('#serviceNav').slideDown();
//$('.infoTitles:before').addClass('opened');
} else {
relative.removeClass('activeSol').next('#serviceNav').slideUp(500);
}
return false;
});
The issue that I am having now that I previously didn't with my javascript code is that now my desktop media query version of my #serviceNav is not displaying, however it does display and function in the mobile setting. The trigger for this menu is the menu item called "Solutions". You can see that in a media query over 640px that nothing happens, but 640px or less it applies the fadeDown function.
Does anyone see why this is not working for the larger version media query?
Here is a jsfiddle
Full code:
$('#mobile-button').on('click', function () {
$('#nav-pop').addClass('active');
$('html').addClass('is-navOpen');
});
/*$('#serviceClick').click( function () {
$('#serviceNav').addClass('activeSol');
});*/
$('#serviceClick').click(function() {
var relative = $(this);
if (!relative.hasClass('activeSol')) {
$('.activeSol').removeClass('activeSol').next('#serviceNav').slideUp(500);
relative.addClass('activeSol').next('#serviceNav').slideDown();
} else {
relative.removeClass('activeSol').next('#serviceNav').slideUp(500);
}
return false;
});
nav {
background: #FFF;
height: 70px;
width: 100%;
max-width: 100%;
box-shadow: 0px 6px 15px -4px rgba(0,0,0,0.12);
position: fixed;
top: 0;
z-index: 999;
box-sizing: border-box;
}
#nav-logo {
float: left;
height: 100%;
width: auto;
display: block;
position: relative;
margin-left: 5%;
}
#nav-logo img {
height: 80%;
width: auto;
position: absolute;
top: 50%;
transform: translateY(-50%);-webkit-transform: translateY(-50%);
}
#mobile-button {
background-image: url("https://s3.us-east-2.amazonaws.com/mbkitsystems/menu.svg");
background-size: 30px 30px;
float: right;
width: 30px;
height: 30px;
margin-right: 5%;
margin-top: 15px;
cursor: pointer;
display: none;
transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#mobile-button:hover {
transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#nav-pop {
float: right;
display: block;
margin-right: 5%;
margin-top: 25px;
transition: ease 0.5s;-webkit-transition: ease 0.5s;
}
#nav-pop.active {
opacity: 1;
background: rgba(0,0,0,0.8);
background: #2f2f2f;
right: 0;
margin-top: 0;
margin-right: 0;
z-index: 999999;
transition: ease 0.6s;-webkit-transition: ease 0.6s;
transform: translateX(0);-webkit-transform: translateX(0);
box-shadow: -9px 0px 9px 1px rgba(0,0,0,.2);
}
#nav-list li {
display: inline-block;
margin: 0 17px;
vertical-align: top;
}
#nav-list li:first-child {
margin-left: 0px;
}
#nav-list li:last-child {
margin-right: 0px;
}
#nav-list li a, #serviceClick {
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: .9rem;
color: #747678;
letter-spacing: 1px;
vertical-align: top;
transition: all .3s;-webkit-transition: all .3s;
cursor: pointer;
}
#nav-list li a:after, #serviceClick:after {
content: '';
display: block;
width: 0;
margin-top: 6px;
background: #b82222;
height: 2px;
transition: width .3s;
}
#nav-list li a:hover, #serviceClick:hover {
color: #4b4b4b;
transition: all .3s;-webkit-transition: all .3s;
}
#nav-list li a:hover:after, #serviceClick:hover:after {
width: 100%;
transition: width .3s;
}
#nav-list li a.navInverse {
padding: 10px 12px;
border-radius: 2px;
box-sizing: border-box;
font-family: 'Muli', sans-serif;
font-size: 1.2rem;
color: #FFF;
border: 1px solid #b82222;
background: linear-gradient(to right bottom, #b82222, #a51e1e);
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
}
#nav-list li a.navInverse:hover {
background: #b82222;
background: #FFF;
color: #b82222;
/*transition: all 0s;-webkit-transition: all 0s;*/
}
#nav-list li a.navInverse:after {
content: '';
display: none;
width: 0px;
height: 0px;
transition: none;
}
#nav-pop-close {
display: none;
}
#nav-pop-close, #close-panel {
position: relative;
top: 3%;
left: 90%;
background-image: url("https://s3.us-east-2.amazonaws.com/mbkitsystems/icon_close.png");
background-size: 30px 30px;
background-repeat: no-repeat;
height: 30px;
width: 30px;
cursor: pointer;
}
/*- Service NAV -*/
#serviceNav {
width: 100%;
top: -40vh;
left: 0;
z-index: -1;
position: fixed;
background-color: rgba(0,0,0,0);
height: 40vh;
transition: all .4s;
padding: 20px 0;
}
#serviceNav.activeSol {
top: 0;
width: 100%;
background-color: rgba(0,0,0,.9);
z-index: 99999;
height: 40vh;
}
.popup-close {
position: absolute;
right: 12px;
top: 12px;
width: 32px;
height: auto;
}
#serviceNavInner {
margin: 0 5%;
height: 100%;
position: relative;
}
/*--- Block 1 ---*/
#serviceNavBlock1 {
width: 33%;
height: 100%;
border-right: 1px solid rgba(255,255,255,.5);
position: relative;
}
#serviceNavBlock1Wrap {
width: 80%;
text-align: left;
}
/*--- Block 2 ---*/
#serviceNavBlock2 {
width: 66.6%;
height: 100%;
margin: 10px auto;
position: relative;
}
.servNavItemWrap {
display: inline-block;
vertical-align: top;
width: 25%;
margin-bottom: 50px;
text-align: center;
cursor: pointer;
-webkit-backface-visibility: hidden;
}
.servNavItemWrap img {
width: 75px;
height: 75px;
-webkit-transition: all 0.25s;transition: all 0.25s;
}
.servNavItemWrap:hover img {
-webkit-transition: all 0.25s;transition: all 0.25s;
-webkit-transform: scale(1.1);transform: scale(1.1);
-webkit-backface-visibility: hidden;
}
.servNavItemWrap a {
text-decoration: none;
outline: none;
box-sizing: border-box;
}
.servNavItemTitle {
margin-top: 5px;
-webkit-transition: all 0.25s;transition: all 0.25s;
}
.servNavItemWrap:hover .servNavItemTitle {
color: #FFF;
-webkit-transition: all 0.25s;transition: all 0.25s;
}
/*---------------------------------------------- MEDIA QUERY 640 --------------------------------------------*/
#media screen and (max-width:640px) {
#mobile-button {
display: block;
}
#nav-pop {
float: none;
opacity: 0;
position: fixed;
margin-top: 0;
width: 75%;
right: -100%;
height: 100vh;
transform: translateX(100%);-webkit-transform: translateX(100%);
}
#nav-pop-close {
display: block;
background-size: 20px 20px;
height: 20px;
width: 20px;
}
#nav-list {
margin-top: 20px;
}
#nav-list li {
display: block;
position: relative;
width: 100%;
margin: 0;
padding: 20px 10%;
background: linear-gradient(to bottom right, #151515, #2f2f2f);
background: #2f2f2f;
text-align: left;
cursor: pointer;
border-bottom: .3px solid #FFF;
}
#quoteButton {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
}
#nav-list li:hover #quoteButton {
background: #2f2f2f;
}
#nav-list li:hover, #nav-list li:active {
background: #000;
}
#nav-list li:first-child {
margin-left: 0;
}
#nav-list li:last-child {
margin: 20px auto;
text-align: center;
border-bottom: none;
background: #2f2f2f;
padding: 20px 0;
}
#nav-list li a, #serviceClick {
font-family: 'Nunito', sans-serif;
font-size: .8rem;
color: #FFF;
letter-spacing: .3rem;
}
#nav-list li a:after, #serviceClick:after {
display: none;
}
#nav-list li a:hover, #serviceClick:hover {
color: #FFF;
}
#nav-list li a:hover:after, #serviceClick:hover:after {
width: 0%;
}
/*- Service NAV -*/
#serviceNav {
width: 100%;
z-index: 1;
position: relative;
background-color: rgba(0,0,0,0);
height: 200px;
transition: all .4s;
padding: 10px 0;
display: none;
top: 0;
}
#serviceNav.activeSol {
background-color: #000;
z-index: 9999999;
height: auto;
min-height: 20%;
top: 0;
border-bottom: .01em solid #FFF;
}
.popup-close {
display: none;
}
#serviceNavInner {
margin: 0 2.5%;
}
/*--- Block 1 ---*/
#serviceNavBlock1 {
width: 100%;
height: 50px;
border-right: none;
display: block;
position: relative;
}
#serviceNavBlock1Wrap {
width: 100%;
text-align: center;
}
#navOverviewT, #navOverviewP {
display: none;
}
#solOverviewB {
font-size: .7rem;
}
/*--- Block 2 ---*/
#serviceNavBlock2 {
width: 100%;
height: 100%;
margin: 10px auto;
display: block;
}
.servNavItemWrap {
display: inline-block;
width: 25%;
margin-bottom: 15px;
}
.servNavItemWrap img {
width: 30px;
height: 30px;
}
.servNavItemTitle {
margin-top: 5px;
font-size: .5rem;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
<div id="nav-logo">
</div>
<div id="mobile-button"><img src="" class="hidden" alt=""></div>
<div id="nav-pop">
<div id="nav-pop-close"></div>
<ul id="nav-list">
<li>ABOUT</li>
<li id="serviceClick">SOLUTIONS</li>
<div id="serviceNav">
<div id="serviceNavInner">
<div id="serviceNavBlock1" class="iblock">
<button class="buttonInv2" id="solOverviewB">Solutions Overview</button>
</div><div id="serviceNavBlock2" class="iblock">
</div>
</div>
</div>
<li>LEARN</li>
<li>CONTACT</li>
<li>REQUEST QUOTE</li>
</ul>
</div>
</nav>
There is a lot going on here and frankly, it's hard to decipher but I think "Nothing happens" is relative. When inspecting the element in dev console you can see the Javascript styling is being added appropriately. So something is happening, it's simply happening off screen because you've told it to. I think the culprit here, is the >640px positioning of your #serviceNav element is maintained at top: -40vh; That's a lot. When removing this value the button displays as follows:
Note: you will have to change some other things around as this displays it on page load. But you get the idea
I have been stuck on a sliding down menu, but have made some headway with it. I had to modify a lot to make it work for both desktop and mobile viewports. The only thing I am stuck on now is getting the menu to close in a < 640px viewport.
In my snippet and jsfiddle below there is a lot of code, but the only code that really matters to this question is the javascript below:
$('#serviceClick').click( function () {
var relative = $(this);
if (!relative.hasClass('activeSol')) {
$('#serviceNav').removeClass('activeSol');
$('#serviceNav').addClass('activeSol').slideDown();
} else {
$('#serviceNav').removeClass('activeSol').slideUp(500);
}
return false;
});
Basically my else statement is now removing the class 'activeSol` and then sliding up the selection.
In the mobile viewport, after clicking on "Solutions" the menu expands, but when you click on "Solutions" again, nothing happens.
It seems as if the variable relative is never reading as the class appended to it, making the click function run else. I did a simple console.log and the else never runs. I tried changing the click function to a change, but then the menu never triggers.
Does anyone see what is causing my else statement to not removeClass from serviceNav and slideUp?
JSfiddle link to see in mobile viewport.
$('#serviceClick').click( function () {
var relative = $(this);
if (!relative.hasClass('activeSol')) {
$('#serviceNav').removeClass('activeSol');
$('#serviceNav').addClass('activeSol').slideDown();
} else {
$('#serviceNav').removeClass('activeSol').slideUp(500);
}
return false;
});
$('[data-pop-close]').on('click', function(e) {
//var targeted_pop = $(this).attr('data-pop-close');
$('#serviceNav').removeClass('activeSol');
$('body').css('overflow', 'auto');
e.preventDefault();
});
nav {
background: #FFF;
height: 70px;
width: 100%;
max-width: 100%;
box-shadow: 0px 6px 15px -4px rgba(0,0,0,0.12);
position: fixed;
top: 0;
z-index: 999;
box-sizing: border-box;
}
#nav-logo {
float: left;
height: 100%;
width: auto;
display: block;
position: relative;
margin-left: 5%;
}
#nav-logo img {
height: 80%;
width: auto;
position: absolute;
top: 50%;
transform: translateY(-50%);-webkit-transform: translateY(-50%);
}
#mobile-button {
background-image: url("https://s3.us-east-2.amazonaws.com/mbkitsystems/menu.svg");
background-size: 30px 30px;
float: right;
width: 30px;
height: 30px;
margin-right: 5%;
margin-top: 15px;
cursor: pointer;
display: none;
transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#mobile-button:hover {
transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#nav-pop {
float: right;
display: block;
margin-right: 5%;
margin-top: 25px;
transition: ease 0.5s;-webkit-transition: ease 0.5s;
}
#nav-pop.active {
opacity: 1;
background: rgba(0,0,0,0.8);
background: #2f2f2f;
right: 0;
margin-top: 0;
margin-right: 0;
z-index: 999999;
transition: ease 0.6s;-webkit-transition: ease 0.6s;
transform: translateX(0);-webkit-transform: translateX(0);
box-shadow: -9px 0px 9px 1px rgba(0,0,0,.2);
}
#nav-list li {
display: inline-block;
margin: 0 17px;
vertical-align: top;
}
#nav-list li:first-child {
margin-left: 0px;
}
#nav-list li:last-child {
margin-right: 0px;
}
#nav-list li a, #serviceClick {
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: .9rem;
color: #747678;
letter-spacing: 1px;
vertical-align: top;
transition: all .3s;-webkit-transition: all .3s;
cursor: pointer;
}
#nav-list li a:after, #serviceClick:after {
content: '';
display: block;
width: 0;
margin-top: 6px;
background: #b82222;
height: 2px;
transition: width .3s;
}
#nav-list li a:hover, #serviceClick:hover {
color: #4b4b4b;
transition: all .3s;-webkit-transition: all .3s;
}
#nav-list li a:hover:after, #serviceClick:hover:after {
width: 100%;
transition: width .3s;
}
#nav-list li a.navInverse {
padding: 10px 12px;
border-radius: 2px;
box-sizing: border-box;
font-family: 'Muli', sans-serif;
font-size: 1.2rem;
color: #FFF;
border: 1px solid #b82222;
background: linear-gradient(to right bottom, #b82222, #a51e1e);
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
}
#nav-list li a.navInverse:hover {
background: #b82222;
background: #FFF;
color: #b82222;
/*transition: all 0s;-webkit-transition: all 0s;*/
}
#nav-list li a.navInverse:after {
content: '';
display: none;
width: 0px;
height: 0px;
transition: none;
}
#nav-pop-close {
display: none;
}
#nav-pop-close, #close-panel {
position: relative;
top: 3%;
left: 90%;
background-image: url("https://s3.us-east-2.amazonaws.com/mbkitsystems/icon_close.png");
background-size: 30px 30px;
background-repeat: no-repeat;
height: 30px;
width: 30px;
cursor: pointer;
}
/*- Service NAV -*/
#serviceNav {
width: 100%;
top: -40vh;
left: 0;
z-index: -1;
position: fixed;
background-color: rgba(0,0,0,0);
height: 40vh;
transition: all .4s;
padding: 20px 0;
}
#serviceNav.activeSol {
top: 0;
width: 100%;
background-color: rgba(0,0,0,.9);
z-index: 99999;
height: 40vh;
}
.popup-close {
position: absolute;
right: 12px;
top: 12px;
width: 32px;
height: auto;
}
#serviceNavInner {
margin: 0 5%;
height: 100%;
position: relative;
}
/*--- Block 1 ---*/
#serviceNavBlock1 {
width: 33%;
height: 100%;
border-right: 1px solid rgba(255,255,255,.5);
position: relative;
}
#serviceNavBlock1Wrap {
width: 80%;
text-align: left;
}
/*--- Block 2 ---*/
#serviceNavBlock2 {
width: 66.6%;
height: 100%;
margin: 10px auto;
position: relative;
}
.servNavItemWrap {
display: inline-block;
vertical-align: top;
width: 25%;
margin-bottom: 50px;
text-align: center;
cursor: pointer;
-webkit-backface-visibility: hidden;
}
.servNavItemWrap img {
width: 75px;
height: 75px;
-webkit-transition: all 0.25s;transition: all 0.25s;
}
.servNavItemWrap:hover img {
-webkit-transition: all 0.25s;transition: all 0.25s;
-webkit-transform: scale(1.1);transform: scale(1.1);
-webkit-backface-visibility: hidden;
}
.servNavItemWrap a {
text-decoration: none;
outline: none;
box-sizing: border-box;
}
.servNavItemTitle {
margin-top: 5px;
-webkit-transition: all 0.25s;transition: all 0.25s;
}
.servNavItemWrap:hover .servNavItemTitle {
color: #FFF;
-webkit-transition: all 0.25s;transition: all 0.25s;
}
/*---------------------------------------------- MEDIA QUERY 640 --------------------------------------------*/
#media screen and (max-width:640px) {
#mobile-button {
display: block;
}
#nav-pop {
float: none;
opacity: 0;
position: fixed;
margin-top: 0;
width: 75%;
right: -100%;
height: 100vh;
transform: translateX(100%);-webkit-transform: translateX(100%);
}
#nav-pop-close {
display: block;
background-size: 20px 20px;
height: 20px;
width: 20px;
}
#nav-list {
margin-top: 20px;
}
#nav-list li {
display: block;
position: relative;
width: 100%;
margin: 0;
padding: 20px 10%;
background: linear-gradient(to bottom right, #151515, #2f2f2f);
background: #2f2f2f;
text-align: left;
cursor: pointer;
border-bottom: .3px solid #FFF;
}
#quoteButton {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
}
#nav-list li:hover #quoteButton {
background: #2f2f2f;
}
#nav-list li:hover, #nav-list li:active {
background: #000;
}
#nav-list li:first-child {
margin-left: 0;
}
#nav-list li:last-child {
margin: 20px auto;
text-align: center;
border-bottom: none;
background: #2f2f2f;
padding: 20px 0;
}
#nav-list li a, #serviceClick {
font-family: 'Nunito', sans-serif;
font-size: .8rem;
color: #FFF;
letter-spacing: .3rem;
}
#nav-list li a:after, #serviceClick:after {
display: none;
}
#nav-list li a:hover, #serviceClick:hover {
color: #FFF;
}
#nav-list li a:hover:after, #serviceClick:hover:after {
width: 0%;
}
/*- Service NAV -*/
#serviceNav {
width: 100%;
z-index: 1;
position: relative;
background-color: rgba(0,0,0,0);
height: 200px;
transition: all .4s;
padding: 10px 0;
display: none;
top: 0;
}
#serviceNav.activeSol {
background-color: #000;
z-index: 9999999;
height: auto;
min-height: 20%;
top: 0;
border-bottom: .01em solid #FFF;
}
.popup-close {
display: none;
}
#serviceNavInner {
margin: 0 2.5%;
}
/*--- Block 1 ---*/
#serviceNavBlock1 {
width: 100%;
height: 50px;
border-right: none;
display: block;
position: relative;
}
#serviceNavBlock1Wrap {
width: 100%;
text-align: center;
}
#navOverviewT, #navOverviewP {
display: none;
}
#solOverviewB {
font-size: .7rem;
}
/*--- Block 2 ---*/
#serviceNavBlock2 {
width: 100%;
height: 100%;
margin: 10px auto;
display: block;
}
.servNavItemWrap {
display: inline-block;
width: 25%;
margin-bottom: 15px;
}
.servNavItemWrap img {
width: 30px;
height: 30px;
}
.servNavItemTitle {
margin-top: 5px;
font-size: .5rem;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
<div id="nav-logo">
</div>
<div id="mobile-button"><img src="" class="hidden" alt=""></div>
<div id="nav-pop">
<div id="nav-pop-close"></div>
<ul id="nav-list">
<li>ABOUT</li>
<li id="serviceClick">SOLUTIONS</li>
<div id="serviceNav">
<div id="serviceNavInner">
<div id="serviceNavBlock1" class="iblock">
<button class="buttonInv2" id="solOverviewB">Solutions Overview</button>
</div><div id="serviceNavBlock2" class="iblock">
</div>
</div>
</div>
<li>LEARN</li>
<li>CONTACT</li>
<li>REQUEST QUOTE</li>
</ul>
</div>
</nav>
var relative = $(this);
Is picking the serviceClick list item (li) and then you are checking
if (!relative.hasClass('activeSol')) {
but you never added the class to the li, instead you added it to the div #serviceNav.
I think changing
if (!relative.hasClass('activeSol')) {
to
if (!$('#serviceNav').hasClass('activeSol')) {
should work.
Your shouldn't check for $("#serviceClick") for class activeSol, should check on $("#serviceNav") instead.
if (!$('#serviceNav').hasClass('activeSol')) {
$('#serviceNav').removeClass('activeSol');
$('#serviceNav').addClass('activeSol').slideDown();
} else {
$('#serviceNav').removeClass('activeSol').slideUp(500);
}
relative doesn't have the class 'activeSol' and will never have it, in order to have it toggle the visibility of your menu, you should add and remove classes to it, like this:
$('#serviceClick').click( function () {
var relative = $(this);
if (!relative.hasClass('opened')) { // if it's not opened
relative.addClass('opened'); // open it
$('#serviceNav').removeClass('activeSol');
$('#serviceNav').addClass('activeSol').slideDown();
} else { // if it's opened
relative.removeClass('opened'); // close it
$('#serviceNav').removeClass('activeSol').slideUp(500);
}
return false;
});
My code contains HTML, CSS and js file. Though I'm ok with CSS learning JS so I am getting stuck in it. The green color window in output seems to be slide but not happening so.
I am also using <script src="js/modernizr.custom.js"></script> to refer to the js page but it not happening so even if I have tried all these reloated stuff but i unable to refer from HTML even if it's not working on the same HTML page under TAG
$( "#toggle" ).click(function() {
$(".menu").toggleClass("closed");
$(this).toggleClass("closed");
$(".content").toggleClass("closed");
$("#wrapper").toggleClass("closed")
});
* { font-family:courier; box-sizing:border-box; }
html, body { margin:0; padding:0; height:100%; min-height:100%; background-color:floralwhite }
.menu { width:250px; height:100%; position:fixed; background-color:seagreen; transition:all 1s; left:0; z-index:50; overflow-y:auto; padding-bottom:100px; }
.menu.closed { left:-250px; }
#toggle { background-color:seagreen; height:100%; min-height:100%; width:50px; position:fixed; top:0; bottom:0; left:0px; z-index:25; &:hover { cursor:pointer; } &.closed { left:0px; top:0; bottom:0; right:0; width:100%; height:100%; opacity:.3; } transition:all .7s ease; }
.menu ul { list-style-type:none; padding:0; margin:85px 0 0 40px; padding-right:40px; }
.menu ul li { color:floralwhite; font-size:20px; margin:0 0 5px 0; display:block; height:40px; line-height:40px; &:hover { background-color:lighten(seagreen, 10%); cursor:pointer; } padding-left:10px; transition:all .3s; }
<div id="toggle">
</div>
<div class="menu closed">
<ul>
<li>Home</li>
<li>Logo</li>
<li>Stuff</li>
<li>Cooking</li>
<li>Games</li>
</ul>
</div>
Your CSS contains SCSS elements, like
#toggle {
...
#toggle:hover {
cursor: pointer;
}
...
}
There is no nesting in plain CSS. Convert these nested rules to normal CSS (and add jQuery to the snippet) to make it work.
In general, always make sure, that your markup, styles and javascript code doesn't have syntax errors. There are tons of tools for that.
$("#toggle").click(function() {
$(".menu").toggleClass("closed");
$(this).toggleClass("closed");
$(".content").toggleClass("closed");
$("#wrapper").toggleClass("closed")
});
* {
font-family: courier;
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
background-color: floralwhite
}
.menu {
width: 250px;
height: 100%;
position: fixed;
background-color: seagreen;
transition: all 1s;
left: 0;
z-index: 50;
overflow-y: auto;
padding-bottom: 100px;
}
.menu.closed {
left: -250px;
}
#toggle {
background-color: seagreen;
height: 100%;
min-height: 100%;
width: 50px;
position: fixed;
top: 0;
bottom: 0;
left: 0px;
z-index: 25;
transition: all .7s ease;
}
#toggle:hover {
cursor: pointer;
}
#toggle.closed {
left: 0px;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
opacity: .3;
}
.menu ul {
list-style-type: none;
padding: 0;
margin: 85px 0 0 40px;
padding-right: 40px;
}
.menu ul li {
color: floralwhite;
font-size: 20px;
margin: 0 0 5px 0;
display: block;
height: 40px;
line-height: 40px;
padding-left: 10px;
transition: all .3s;
}
.menu ul li:hover {
background-color: lighten(seagreen, 10%);
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toggle">
</div>
<div class="menu closed">
<ul>
<li>Home</li>
<li>Logo</li>
<li>Stuff</li>
<li>Cooking</li>
<li>Games</li>
</ul>
</div>
$("#toggle").click(function() {
$(".menu").toggleClass("closed");
$(this).toggleClass("closed");
$(".content").toggleClass("closed");
$("#wrapper").toggleClass("closed")
});
* {
font-family: courier;
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
background-color: floralwhite
}
.menu {
width: 250px;
height: 100%;
position: fixed;
background-color: seagreen;
transition: all 1s;
left: 0;
z-index: 50;
overflow-y: auto;
padding-bottom: 100px;
}
.menu.closed {
left: -250px;
}
#wrapper { margin-left: 50px;}
#wrapper.closed{ left: 250px; margin-left: 0px; transition: all .3s; position: relative;}
#toggle {
background-color: seagreen;
height: 100%;
min-height: 100%;
width: 50px;
position: fixed;
top: 0;
bottom: 0;
left: 0px;
z-index: 25;
transition: all .7s ease;
}
#toggle:hover {
cursor: pointer;
}
#toggle.closed {
left: 0px;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
opacity: .3;
}
.menu ul {
list-style-type: none;
padding: 0;
margin: 85px 0 0 40px;
padding-right: 40px;
}
.menu ul li {
color: floralwhite;
font-size: 20px;
margin: 0 0 5px 0;
display: block;
height: 40px;
line-height: 40px;
padding-left: 10px;
transition: all .3s;
}
.menu ul li:hover {
background-color: lighten(seagreen, 10%);
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toggle"> menu
</div>
<div class="menu closed">
<ul>
<li>Home</li>
<li>Logo</li>
<li>Stuff</li>
<li>Cooking</li>
<li>Games</li>
</ul>
</div>
<div id="wrapper"> dwdlkqnbwkjdbjqkbwkbqkh </div>