Front end web development - javascript

I want to make the button in top right and what it showed after click on it at the corrner of codepen.io site. Someone can fix my code and indicate the errors ?
$(document).ready(function(){
$(".nut").click(function(){
$(".choose").toggle(200);
});
});
#import url(fonts.googleapis.com/css?family=Lato:400,900,400italic,700italic);
html, body{
font-family: 'Open Sans', sans-serif;
}
#container{
background-color: #0d0d0d;
}
.nut{
position: absolute;
top: 10px;
right: 10px;
}
.nut a img{
border-radius: 3px;
cursor: pointer;
height: 44px;
}
.choose{
border: 1px solid black;
width: 200px;
height: 350px;
position: absolute;
top: 64px;
right: 0;
display: hidden;
}
.choose ul{
padding: 0px;
list-style-type: none;
}
.choose .one li{
cursor: pointer;
position: ralative;
padding: 8px 15px 10px;
}
.choose .one li a{
font-size: 15px;
}
.choose .one li:nth-child(7){
border-bottom: 1px solid black;
margin-bottom: 3px;
}
.choose .one li:hover{
background-color: #e6e6e6;
}
.choose .two li{
padding: 0 ;
display: inline;
opacity: .5;
}
.choose .two ul li{
font-size: 7px;
}
.choose .two li:hover{
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nut">
<a><img src="//gravatar.com/avatar/7630787fd05d0b926f921213710bb074?s=80">
</a>
</div>
<div class="choose">
<ul class="one">
<li><a>New Pen</a></li>
<li><a>New Post</a></li>
<li><a>Recent Activity</a></li>
<li><a>Embed Theme Builder</a></li>
<li><a>Settings</a></li>
<li><a>Help</a></li>
<li><a>Log Out</a></li>
<li><a>Your Profile</a></li>
<li>
<ul class="two">
<li><a>Pens</a></li>
<li><a>Posts</a></li>
<li><a>Collections</a></li>
</ul>
<li>
</ul>
</div>


Have a look at my example. all you need to do is have the proper CSS and toggle the open class: JSFiddle
$(document).ready(function(){
$(".user-stuff").click(function(){
$('.user-dropdown').toggleClass('open');
});
});
#import url(fonts.googleapis.com/css?family=Lato:400,900,400italic,700italic);
a {
font-family: 'Lato';
}
.user-dropdown {
background: white;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
position: absolute;
top: 100%;
padding: 5px 0;
width: 200px;
color: #222;
opacity: 0;
visibility: hidden;
-webkit-transition: -webkit-transform 0.15s, opacity 0.15s;
transition: transform 0.15s, opacity 0.15s;
-webkit-transform: scale(0.95);
-ms-transform: scale(0.95);
transform: scale(0.95);
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
transform-origin: top right
}
.open.user-dropdown {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1)
}
#mini-personal-avatar {
border-radius: 2px;
cursor: pointer
}
.link-list,
.link-list ul,
.link-list ol {
list-style: none
}
.link-list a {
color: black;
display: block;
padding: 8px 15px 10px;
line-height: 1.1;
text-shadow: none;
text-decoration: none
}
.link-list a:hover,
.link-list a:focus {
color: inherit;
background: #E7E7E7
}
.link-list a.active {
background: #ccc
}
.link-list a.active .view-meta {
color: #666
}
.user-dropdown {
top: 45px;
left: 0 !important;
right: 0;
}
.user-dropdown>li {
position: relative
}
.user-dropdown>li.sep-after {
border-bottom: 1px solid #666;
padding-bottom: 5px
}
.user-dropdown>li.sep-after+li {
padding-top: 5px
}
.user-dropdown .context-switcher {
position: relative;
padding: 0 !important
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="user-stuff header-chunk">
<img id="mini-personal-avatar" src="//gravatar.com/avatar/b10c8837fdebfca4078b6bad5217c2de?s=80" width="44" height="44" class="user-avatar" alt="User Gravatar" data-dropdown="#user-dropdown">
</div>
<ul class="user-dropdown link-list is-dropdown" id="user-dropdown">
<li class="dropdown-newpen">
<a href="/pen/">
New Pen
</a>
</li>
<li class="dropdown-newpost">
<a href="/write/">
New Post
</a>
</li>
<li class="dropdown-activity">
<a href="/ilanus/activity/">
Recent Activity
</a>
</li>
<li class="dropdown-embedbuilder">
<a href="/ilanus/embed/builder/public/">
Embed Theme Builder
</a>
</li>
<li class="dropdown-yoursettings">
<a href="/ilanus/settings/editor/">
Settings
</a>
</li>
<li class="dropdown-help">
<a href="http://blog.codepen.io/documentation/">
Help
</a>
</li>
<li class="dropdown-logout sep-after">
<a href="/login/logout" id="logout">
Log Out
</a> </li>
</ul>

Related

Collapsible navbar doesn't minimize after refresh

I have the following issue with the following code. I have tried to implement a collapsible sidebar menu in my development. I have researched many resources online and I tried to customize it for for myself after following along a Youtube tutorial. However, the collapsing functionally seems to work except at the the time of refreshing the page. I have researched other Stackoverflow solutions (i.e session storage) but I couldn't be able to implement it in my case. Can somebody please help?
Here is my HTML page
let arrow = document.querySelectorAll(".arrow");
for (var i = 0; i < arrow.length; i++) {
arrow[i].addEventListener("click", (e)=>{
let arrowParent = e.target.parentElement.parentElement;
arrowParent.classList.toggle("showMenu");
})
}
let sidebar = document.querySelector(".sidebar");
let sidebarBtn = document.querySelector(".bx-menu");
sidebarBtn.addEventListener("click" , ()=>{
sidebar.classList.toggle("close");
});
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* fonts */
#import url('https://fonts.googleapis.com/css2?family=Cabin&family=Roboto+Condensed:wght#400;700&display=swap');
html {
font-size: 100%;
} /*16px*/
:root {
/* colors */
--primary-50: #e0fcff;
--primary-100: #bef8fd;
--primary-200: #87eaf2;
--primary-300: #54d1db;
--primary-400: #38bec9;
--primary-500: #2cb1bc;
--primary-600: #14919b;
--primary-700: #0e7c86;
--primary-800: #0a6c74;
--primary-900: #044e54;
/* grey */
--grey-50: #f0f4f8;
--grey-100: #d9e2ec;
--grey-200: #bcccdc;
--grey-300: #9fb3c8;
--grey-400: #829ab1;
--grey-500: #627d98;
--grey-600: #486581;
--grey-700: #334e68;
--grey-800: #243b53;
--grey-900: #102a43;
/* rest of the colors */
--black: #222;
--white: #fff;
--blue: #2336e2;
--red-light: #f8d7da;
--red-dark: #842029;
--green-light: #d1e7dd;
--green-dark: #0f5132;
/* fonts */
--headingFont: 'Roboto Condensed', Sans-Serif;
--bodyFont: 'Cabin', Sans-Serif;
--small-text: 0.875rem;
--extra-small-text: 0.7em;
/* rest of the vars */
--backgroundColor: var(--grey-50);
--textColor: var(--grey-900);
--borderRadius: 0.25rem;
--letterSpacing: 1px;
--transition: 0.3s ease-in-out all;
--max-width: 1120px;
--fixed-width: 500px;
--fluid-width: 90vw;
--breakpoint-lg: 992px;
--nav-height: 6rem;
/* box shadow*/
--shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
body {
background: var(--backgroundColor);
font-family: var(--bodyFont);
font-weight: 400;
line-height: 1.75;
color: var(--textColor);
}
p {
margin-bottom: 1.5rem;
max-width: 40em;
}
h1,
h2,
h3,
h4,
h5 {
margin: 0;
margin-bottom: 1.38rem;
font-family: var(--headingFont);
font-weight: 400;
line-height: 1.3;
text-transform: capitalize;
letter-spacing: var(--letterSpacing);
}
h1 {
margin-top: 0;
font-size: 3.052rem;
}
h2 {
font-size: 2.441rem;
}
h3 {
font-size: 1.953rem;
}
h4 {
font-size: 1.563rem;
}
h5 {
font-size: 1.25rem;
}
small,
.text-small {
font-size: var(--small-text);
}
a {
text-decoration: none;
letter-spacing: var(--letterSpacing);
}
a,
button {
line-height: 1.15;
}
button:disabled {
cursor: not-allowed;
}
ul {
list-style-type: none;
padding: 0;
}
.sidebar {
position: fixed;
top: 0;
left: 0;
background: var(--white);
height: 100%;
width: 260px;
z-index: 100;
transition: var(--transition);
}
.sidebar.close {
width: 78px;
}
.logo-details {
width: 100px;
height: 60px;
display: flex;
align-items: center;
}
.logo-details span:first-child {
font-size: 30px;
/* color: #94EB58; */
color: var(--primary-600);
height: 50px;
min-width: 78px;
text-align: left;
line-height: 50px;
}
.logo_name img {
width: 140px;
height: 100px;
margin-top: 8px;
transition: 0.3s ease;
transition-delay: 0.1s;
}
.logo_name {
transition-delay: 0s;
opacity: 0;
pointer-events: none;
}
.nav-links {
height: 100%;
padding-top: 30px 0 150px 0;
overflow: auto;
}
.nav-links {
overflow: visible;
}
.nav-links::-webkit-scrollbar{
display: none;
}
.nav-links li {
position: relative;
transition: var(--transition);
}
.nav-links li:hover {
background: var(--green-light);
}
.nav-links li span {
height: 50px;
min-width: 78px;
text-align: center;
line-height: 50px;
color: var(--primary-500);
font-size: 23px;
cursor: pointer;
transition: var(--transition);
}
.nav-links li.showMenu span.arrow {
transform: rotate(-180deg);
}
.sidebar.close .nav-links span.arrow {
display: none;
}
.link_name {
font-size: 18px;
font-weight: 400;
color: var(--grey-700);
transition: var(--transition);
}
.sidebar.close .nav-links li a .link_name{
opacity: 0;
pointer-events: none;
}
.nav-links li a {
display: flex;
align-items: center;
}
.icon-link {
display: flex;
align-items: center;
justify-content: space-between;
}
.sidebar .nav-links li .sub-menu {
padding: 6px 6px 14px 80px;
margin-top: -10px;
background: var(--green-light);
display: none;
}
.sidebar .nav-links li.showMenu .sub-menu{
display: block;
}
.sidebar .nav-links li .sub-menu a {
color: var(--primary-900);
font-size: 15px;
padding: 5px 0;
white-space: nowrap;
opacity: 0.6;
transition: var(--transition);
}
.sidebar .nav-links li .sub-menu a:hover {
opacity: 1;
}
.sidebar.close .nav-links li .sub-menu {
position: absolute;
left: 100%;
top: -10px;
margin-top: 0;
padding: 10px 20px;
border-radius: 0 6px 6px 0;
opacity: 0;
display: block;
pointer-events: none;
transition: 0s;
}
.sidebar.close .nav-links li:hover .sub-menu {
top: 0;
opacity: 1;
pointer-events: auto;
transition: var(--transition);
}
.sidebar .nav-links li .sub-menu.link_name {
display: none;
}
.sidebar.close .nav-links li .sub-menu.link_name {
display: none;
}
.sidebar.close .nav-links li .sub-menu .link_name {
font-size: 18px;
opacity: 1;
display: block;
}
.sidebar .nav-links li .sub-menu.blank {
opacity: 1;
pointer-events: auto;
padding: 3px 20px 6px 16px;
opacity: 0;
pointer-events: none;
}
.sidebar .nav-links li:hover .sub-menu.blank {
top: 50%;
transform: translateY(-50%);
}
.sidebar .profile-details {
position: fixed;
bottom: 0;
width: 260px;
display: flex;
align-items: center;
justify-content: space-between;
background: var(--green-light);
padding: 12px 0;
transition: var(--transition);
}
.sidebar.close .profile-details{
background: none;
}
.sidebar.close .profile-details{
width: 78px;
}
.profile-content {
display: flex;
align-items: center;
}
.sidebar .profile-details img {
height: 52px;
width: 52px;
object-fit: cover;
border-radius: 16px;
margin: 0 14px 0 12px;
background: var(--white);
transition: var(--transition);
}
.sidebar.close .profile-details img{
padding: 10px;
}
.profile_name, .job {
color: var(--grey-700);
font-size: 18px;
font-weight: 500;
white-space: nowrap;
}
.sidebar.close .profile-details i,
.sidebar.close .profile-details .profile_name,
.sidebar.close .profile-details .job{
display: none;
}
.job {
font-size: 12px;
}
.home-section {
position: relative;
background: var(--backgroundColor);
height: 100vh;
left: 260px;
width: calc(100%-260px);
transition: var(--transition);
}
.sidebar.close ~ .home-section {
left: 78px;
width: calc(100% -78px);
}
.home-content {
height: 60px;
display: flex;
align-items: center;
}
.home-content span:first-child,
.text {
color: var(--grey-700);
font-size: 35px;
}
.home-content span:first-child {
margin: 0 15px;
cursor: pointer;
}
.home-section .home-content .text{
font-size: 26px;
font-weight: 600;
}
#media (max-width: 400px) {
.sidebar.close .nav-links li .sub-menu{
display: none;
}
.sidebar{
width: 78px;
}
.sidebar.close{
width: 0;
}
.home-section{
left: 78px;
width: calc(100% - 78px);
z-index: 100;
}
.sidebar.close ~ .home-section{
width: 100%;
left: 0;
}
}
<!DOCTYPE html>
<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="admindashcss.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp" rel="stylesheet">
<title>Admin Dashboard</title>
</head>
<body>
<div class="sidebar">
<div class="logo-details">
<span class="material-icons-sharp">radio_button_checked</span>
<span class="logo_name"><img src="images/logowhite.svg" alt=""></span>
</div>
<ul class="nav-links">
<li>
<a href="#">
<span class="material-icons-sharp">grid_view</span>
<span class="link_name">Dashboard</span>
</a>
<!-- <ul class="sub-menu blank">
<li><a class="link_name" href="#">Category</a></li>
</ul> -->
</li>
<li>
<div class="icon-link">
<a href="#">
<span class="material-icons-sharp">contact_page</span>
<span class="link_name">Contacts</span>
</a>
<span class="material-icons-sharp arrow">expand_more</span>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Category</a></li>
<li>Customer</li>
<li>Resources</li>
</ul>
</li>
<li>
<div class="icon-link">
<a href="#">
<span class="material-icons-sharp">task</span>
<span class="link_name">Projects</span>
</a>
<span class="material-icons-sharp arrow">expand_more</span>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Projects</a></li>
<li>Project details</li>
<li>Job</li>
</ul>
</li>
<li>
<div class="icon-link">
<a href="#">
<span class="material-icons-sharp">payments</span>
<span class="link_name">Invoices</span>
</a>
<span class="material-icons-sharp arrow">expand_more</span>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Invoices</a></li>
<li>Recivables</li>
<li>Paybles</li>
</ul>
</li>
<li>
<div class="icon-link">
<a href="#">
<span class="material-icons-sharp">query_stats</span>
<span class="link_name">Queries</span>
</a>
<span class="material-icons-sharp arrow">expand_more</span>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Categories</a></li>
<li>Recivables</li>
<li>Payables</li>
<li>Gross Profit</li>
<li>Gross Profit Summary</li>
</ul>
</li>
<li>
<div class="icon-link">
<a href="#">
<span class="material-icons-sharp">admin_panel_settings</span>
<span class="link_name">Admin</span>
</a>
<span class="material-icons-sharp arrow">expand_more</span>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Categories</a></li>
<li>Settings</li>
<li>Users</li>
<li>Documents</li>
</ul>
</li>
<li>
<div class="profile-details">
<div class="profile-content">
<img src="images/messi.jpg" alt="profile">
</div>
<div class="name-job">
<div class="profile_name">Brook Beyene</div>
<div class="job">Project Manager</div>
</div>
<span class="material-icons-sharp">logout</span>
</div>
</li>
</ul>
</div>
<section class="home-section">
<div class="home-content">
<span class="material-icons-sharp bx-menu">menu</span>
<span class="text">Drop Down Sidebar</span>
</div>
</section>
</body>
</html>
:

All you nedd is to add close to class list in following line:
<div class="sidebar close">
Also if you need to keep last state of navbar, you can stor it in local storage and append it by js on load.
let arrow = document.querySelectorAll(".arrow");
for (var i = 0; i < arrow.length; i++) {
arrow[i].addEventListener("click", (e)=>{
let arrowParent = e.target.parentElement.parentElement;
arrowParent.classList.toggle("showMenu");
})
}
let sidebar = document.querySelector(".sidebar");
let sidebarBtn = document.querySelector(".bx-menu");
sidebarBtn.addEventListener("click" , ()=>{
sidebar.classList.toggle("close");
});
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* fonts */
#import url('https://fonts.googleapis.com/css2?family=Cabin&family=Roboto+Condensed:wght#400;700&display=swap');
html {
font-size: 100%;
} /*16px*/
:root {
/* colors */
--primary-50: #e0fcff;
--primary-100: #bef8fd;
--primary-200: #87eaf2;
--primary-300: #54d1db;
--primary-400: #38bec9;
--primary-500: #2cb1bc;
--primary-600: #14919b;
--primary-700: #0e7c86;
--primary-800: #0a6c74;
--primary-900: #044e54;
/* grey */
--grey-50: #f0f4f8;
--grey-100: #d9e2ec;
--grey-200: #bcccdc;
--grey-300: #9fb3c8;
--grey-400: #829ab1;
--grey-500: #627d98;
--grey-600: #486581;
--grey-700: #334e68;
--grey-800: #243b53;
--grey-900: #102a43;
/* rest of the colors */
--black: #222;
--white: #fff;
--blue: #2336e2;
--red-light: #f8d7da;
--red-dark: #842029;
--green-light: #d1e7dd;
--green-dark: #0f5132;
/* fonts */
--headingFont: 'Roboto Condensed', Sans-Serif;
--bodyFont: 'Cabin', Sans-Serif;
--small-text: 0.875rem;
--extra-small-text: 0.7em;
/* rest of the vars */
--backgroundColor: var(--grey-50);
--textColor: var(--grey-900);
--borderRadius: 0.25rem;
--letterSpacing: 1px;
--transition: 0.3s ease-in-out all;
--max-width: 1120px;
--fixed-width: 500px;
--fluid-width: 90vw;
--breakpoint-lg: 992px;
--nav-height: 6rem;
/* box shadow*/
--shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
body {
background: var(--backgroundColor);
font-family: var(--bodyFont);
font-weight: 400;
line-height: 1.75;
color: var(--textColor);
}
p {
margin-bottom: 1.5rem;
max-width: 40em;
}
h1,
h2,
h3,
h4,
h5 {
margin: 0;
margin-bottom: 1.38rem;
font-family: var(--headingFont);
font-weight: 400;
line-height: 1.3;
text-transform: capitalize;
letter-spacing: var(--letterSpacing);
}
h1 {
margin-top: 0;
font-size: 3.052rem;
}
h2 {
font-size: 2.441rem;
}
h3 {
font-size: 1.953rem;
}
h4 {
font-size: 1.563rem;
}
h5 {
font-size: 1.25rem;
}
small,
.text-small {
font-size: var(--small-text);
}
a {
text-decoration: none;
letter-spacing: var(--letterSpacing);
}
a,
button {
line-height: 1.15;
}
button:disabled {
cursor: not-allowed;
}
ul {
list-style-type: none;
padding: 0;
}
.sidebar {
position: fixed;
top: 0;
left: 0;
background: var(--white);
height: 100%;
width: 260px;
z-index: 100;
transition: var(--transition);
}
.sidebar.close {
width: 78px;
}
.logo-details {
width: 100px;
height: 60px;
display: flex;
align-items: center;
}
.logo-details span:first-child {
font-size: 30px;
/* color: #94EB58; */
color: var(--primary-600);
height: 50px;
min-width: 78px;
text-align: left;
line-height: 50px;
}
.logo_name img {
width: 140px;
height: 100px;
margin-top: 8px;
transition: 0.3s ease;
transition-delay: 0.1s;
}
.logo_name {
transition-delay: 0s;
opacity: 0;
pointer-events: none;
}
.nav-links {
height: 100%;
padding-top: 30px 0 150px 0;
overflow: auto;
}
.nav-links {
overflow: visible;
}
.nav-links::-webkit-scrollbar{
display: none;
}
.nav-links li {
position: relative;
transition: var(--transition);
}
.nav-links li:hover {
background: var(--green-light);
}
.nav-links li span {
height: 50px;
min-width: 78px;
text-align: center;
line-height: 50px;
color: var(--primary-500);
font-size: 23px;
cursor: pointer;
transition: var(--transition);
}
.nav-links li.showMenu span.arrow {
transform: rotate(-180deg);
}
.sidebar.close .nav-links span.arrow {
display: none;
}
.link_name {
font-size: 18px;
font-weight: 400;
color: var(--grey-700);
transition: var(--transition);
}
.sidebar.close .nav-links li a .link_name{
opacity: 0;
pointer-events: none;
}
.nav-links li a {
display: flex;
align-items: center;
}
.icon-link {
display: flex;
align-items: center;
justify-content: space-between;
}
.sidebar .nav-links li .sub-menu {
padding: 6px 6px 14px 80px;
margin-top: -10px;
background: var(--green-light);
display: none;
}
.sidebar .nav-links li.showMenu .sub-menu{
display: block;
}
.sidebar .nav-links li .sub-menu a {
color: var(--primary-900);
font-size: 15px;
padding: 5px 0;
white-space: nowrap;
opacity: 0.6;
transition: var(--transition);
}
.sidebar .nav-links li .sub-menu a:hover {
opacity: 1;
}
.sidebar.close .nav-links li .sub-menu {
position: absolute;
left: 100%;
top: -10px;
margin-top: 0;
padding: 10px 20px;
border-radius: 0 6px 6px 0;
opacity: 0;
display: block;
pointer-events: none;
transition: 0s;
}
.sidebar.close .nav-links li:hover .sub-menu {
top: 0;
opacity: 1;
pointer-events: auto;
transition: var(--transition);
}
.sidebar .nav-links li .sub-menu.link_name {
display: none;
}
.sidebar.close .nav-links li .sub-menu.link_name {
display: none;
}
.sidebar.close .nav-links li .sub-menu .link_name {
font-size: 18px;
opacity: 1;
display: block;
}
.sidebar .nav-links li .sub-menu.blank {
opacity: 1;
pointer-events: auto;
padding: 3px 20px 6px 16px;
opacity: 0;
pointer-events: none;
}
.sidebar .nav-links li:hover .sub-menu.blank {
top: 50%;
transform: translateY(-50%);
}
.sidebar .profile-details {
position: fixed;
bottom: 0;
width: 260px;
display: flex;
align-items: center;
justify-content: space-between;
background: var(--green-light);
padding: 12px 0;
transition: var(--transition);
}
.sidebar.close .profile-details{
background: none;
}
.sidebar.close .profile-details{
width: 78px;
}
.profile-content {
display: flex;
align-items: center;
}
.sidebar .profile-details img {
height: 52px;
width: 52px;
object-fit: cover;
border-radius: 16px;
margin: 0 14px 0 12px;
background: var(--white);
transition: var(--transition);
}
.sidebar.close .profile-details img{
padding: 10px;
}
.profile_name, .job {
color: var(--grey-700);
font-size: 18px;
font-weight: 500;
white-space: nowrap;
}
.sidebar.close .profile-details i,
.sidebar.close .profile-details .profile_name,
.sidebar.close .profile-details .job{
display: none;
}
.job {
font-size: 12px;
}
.home-section {
position: relative;
background: var(--backgroundColor);
height: 100vh;
left: 260px;
width: calc(100%-260px);
transition: var(--transition);
}
.sidebar.close ~ .home-section {
left: 78px;
width: calc(100% -78px);
}
.home-content {
height: 60px;
display: flex;
align-items: center;
}
.home-content span:first-child,
.text {
color: var(--grey-700);
font-size: 35px;
}
.home-content span:first-child {
margin: 0 15px;
cursor: pointer;
}
.home-section .home-content .text{
font-size: 26px;
font-weight: 600;
}
#media (max-width: 400px) {
.sidebar.close .nav-links li .sub-menu{
display: none;
}
.sidebar{
width: 78px;
}
.sidebar.close{
width: 0;
}
.home-section{
left: 78px;
width: calc(100% - 78px);
z-index: 100;
}
.sidebar.close ~ .home-section{
width: 100%;
left: 0;
}
}
<!DOCTYPE html>
<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="admindashcss.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp" rel="stylesheet">
<title>Admin Dashboard</title>
</head>
<body>
<div class="sidebar close">
<div class="logo-details">
<span class="material-icons-sharp">radio_button_checked</span>
<span class="logo_name"><img src="images/logowhite.svg" alt=""></span>
</div>
<ul class="nav-links">
<li>
<a href="#">
<span class="material-icons-sharp">grid_view</span>
<span class="link_name">Dashboard</span>
</a>
<!-- <ul class="sub-menu blank">
<li><a class="link_name" href="#">Category</a></li>
</ul> -->
</li>
<li>
<div class="icon-link">
<a href="#">
<span class="material-icons-sharp">contact_page</span>
<span class="link_name">Contacts</span>
</a>
<span class="material-icons-sharp arrow">expand_more</span>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Category</a></li>
<li>Customer</li>
<li>Resources</li>
</ul>
</li>
<li>
<div class="icon-link">
<a href="#">
<span class="material-icons-sharp">task</span>
<span class="link_name">Projects</span>
</a>
<span class="material-icons-sharp arrow">expand_more</span>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Projects</a></li>
<li>Project details</li>
<li>Job</li>
</ul>
</li>
<li>
<div class="icon-link">
<a href="#">
<span class="material-icons-sharp">payments</span>
<span class="link_name">Invoices</span>
</a>
<span class="material-icons-sharp arrow">expand_more</span>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Invoices</a></li>
<li>Recivables</li>
<li>Paybles</li>
</ul>
</li>
<li>
<div class="icon-link">
<a href="#">
<span class="material-icons-sharp">query_stats</span>
<span class="link_name">Queries</span>
</a>
<span class="material-icons-sharp arrow">expand_more</span>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Categories</a></li>
<li>Recivables</li>
<li>Payables</li>
<li>Gross Profit</li>
<li>Gross Profit Summary</li>
</ul>
</li>
<li>
<div class="icon-link">
<a href="#">
<span class="material-icons-sharp">admin_panel_settings</span>
<span class="link_name">Admin</span>
</a>
<span class="material-icons-sharp arrow">expand_more</span>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Categories</a></li>
<li>Settings</li>
<li>Users</li>
<li>Documents</li>
</ul>
</li>
<li>
<div class="profile-details">
<div class="profile-content">
<img src="images/messi.jpg" alt="profile">
</div>
<div class="name-job">
<div class="profile_name">Brook Beyene</div>
<div class="job">Project Manager</div>
</div>
<span class="material-icons-sharp">logout</span>
</div>
</li>
</ul>
</div>
<section class="home-section">
<div class="home-content">
<span class="material-icons-sharp bx-menu">menu</span>
<span class="text">Drop Down Sidebar</span>
</div>
</section>
</body>
</html>

My suggestion is to use a cookie to store and read the value on change. It will keep the data persistant on reload that way.

What transition must be applied so that sidebar moves from left to right with ease 0.2s?

What transition must be applied so that sidebar appear to move in from left? Transition value: all 0.2s ease I could have done it by making width : 100% and zero on click, but looking for alternatives.
So, basically my query is when I click on hamburger menu sidebar should apparently move from left to right.
https://codepen.io/TA0011/pen/QWrvzYe
//for sidebar
const sidebar = document.querySelector('#mySidebar')
const toggle = document.querySelector('#sidebar-toggle')
toggle.addEventListener('click', toggleSidebar)
function toggleSidebar(e) {
toggle.classList.toggle('open')
sidebar.classList.toggle('open');
}
//for sidebar
*{
margin:0;
padding:0;
list-style:none;
box-sizing:border-box;
text-decoration:none;
}
#sidebar-toggle{
display: inline-block;
cursor: grab;
background: rgba(0, 136,169, 1);
border-radius: 50%;
padding: 5px 10px;
height: 40px;
width: 40px;
margin-top: 5px;
}
#sidebar-toggle div{
width: 20px;
height: 2px;
background-color: #fff;
margin: 6px 0;
transition: all 0.3s ease 0s;
cursor: grab;
}
#sidebar-toggle.open .bar4 {
transform: translate(0, 8px) rotate(-45deg);
}
#sidebar-toggle.open .bar5 {
opacity: 0;
}
#sidebar-toggle.open .bar6 {
transform: translate(0px, -8px) rotate(45deg);
}
.sidebar {
display:none;
position: fixed;
height: 100vh;
top: 50px;
left: 0;
background-color: #fff;
width: 15.625rem;
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
}
.open.sidebar {
display: flex;
}
.sidebar-nav{
position: absolute;
margin: 0 0 0;
width: 100%;
padding: 5px 10px;
}
.sidebar-nav ul{
display: flex;
flex-direction: column;
justify-content:center;
align-items: flex-start;
}
.sidebar-nav ul li {
padding: 10px;
color: #007bff;
display: flex;
flex-direction: column;
}
.sidebar-nav ul li:hover{
background: #007bff;
color: #fff;
}
.sidebar-nav ul li a .icon{
color:#007bff;
width:30px;
display: inline-block;
}
.sidebar-nav .down_key{
margin-left: 50px;
}
.sidebar-nav ul li ul li{
display: flex;
flex-direction: column;
padding: 10px 20px;
}
<div id="sidebar-toggle">
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar6"></div>
</div>
<div class="sidebar" id='mySidebar'>
<div class="sidebar-nav">
<ul>
<li>
<a href="">
<span class="icon"><i class="fas fa-home"></i></span>
<span>Home</span>
</a>
</li>
<li>
<a href="">
<span class="icon"><i class="fas fa-file-medical-alt"></i></span>
<span>Feed</span>
</a>
</li>
<li>
<a href="" class="feat-btn">
<span class="icon"><i class="fas fa-feather-alt"></i></span>
<span>Compose</span>
<span class="down_key"><i class="fas fa-chevron-down"></i></span>
<ul class="feat-show">
<li>Email</li>
</ul>
</a>
</li>
</ul>
</div>
</div>

Use transform:translateX(-250px) to do the animation
#mySidebar{
transition:0.2s;
transform:translateX(-250px)
}
#mySidebar.open{
transform:translateX(0)
}
https://codepen.io/Guichi/pen/dyewaPP

//for sidebar
const sidebar = document.querySelector('#mySidebar')
const toggle = document.querySelector('#sidebar-toggle')
toggle.addEventListener('click', toggleSidebar)
function toggleSidebar(e) {
toggle.classList.toggle('open')
sidebar.classList.toggle('open');
}
//for sidebar
*{
margin:0;
padding:0;
list-style:none;
box-sizing:border-box;
text-decoration:none;
}
#sidebar-toggle{
display: inline-block;
cursor: grab;
background: rgba(0, 136,169, 1);
border-radius: 50%;
padding: 5px 10px;
height: 40px;
width: 40px;
margin-top: 5px;
}
#sidebar-toggle div{
width: 20px;
height: 2px;
background-color: #fff;
margin: 6px 0;
transition: all 0.3s ease 0s;
cursor: grab;
}
#sidebar-toggle.open .bar4 {
transform: translate(0, 8px) rotate(-45deg);
}
#sidebar-toggle.open .bar5 {
opacity: 0;
}
#sidebar-toggle.open .bar6 {
transform: translate(0px, -8px) rotate(45deg);
}
.sidebar {
transition: 4s, opacity 0.5s linear;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
position: fixed;
height: 100vh;
top: 50px;
left: 0;
background-color: #fff;
width: 15.625rem;
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
}
.open.sidebar {
visibility: visible;
opacity: 1;
display:flex;
}
.sidebar-nav{
position: absolute;
margin: 0 0 0;
width: 100%;
padding: 5px 10px;
}
.sidebar-nav ul{
display: flex;
flex-direction: column;
justify-content:center;
align-items: flex-start;
}
.sidebar-nav ul li {
padding: 10px;
color: #007bff;
display: flex;
flex-direction: column;
}
.sidebar-nav ul li:hover{
background: #007bff;
color: #fff;
}
.sidebar-nav ul li a .icon{
color:#007bff;
width:30px;
display: inline-block;
}
.sidebar-nav .down_key{
margin-left: 50px;
}
.sidebar-nav ul li ul li{
display: flex;
flex-direction: column;
padding: 10px 20px;
}
<div id="sidebar-toggle">
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar6"></div>
</div>
<div class="sidebar" id='mySidebar'>
<div class="sidebar-nav">
<ul>
<li>
<a href="">
<span class="icon"><i class="fas fa-home"></i></span>
<span>Home</span>
</a>
</li>
<li>
<a href="">
<span class="icon"><i class="fas fa-file-medical-alt"></i></span>
<span>Feed</span>
</a>
</li>
<li>
<a href="" class="feat-btn">
<span class="icon"><i class="fas fa-feather-alt"></i></span>
<span>Compose</span>
<span class="down_key"><i class="fas fa-chevron-down"></i></span>
<ul class="feat-show">
<li>Email</li>
</ul>
</a>
</li>
</ul>
</div>
</div>
You can figure out the styling, but here is a working solution, you cannot add a transition to a display:none, you need to use visibility and opacity instead

Submenu Closing Function Semi-working, Javascript

Im having an issue dealing with this function bug. What im trying to do is when a user clicks anywhere outside of the box, the box should close. Its working just for a few clicks, then it stops. At first the console has no errors, but when I do my first click, it reads cannot read property style of null. My confusion is that it works for a few clicks, then it stops. Any tips please!
window.addEventListener("mouseup", function (event) {
let box = document.querySelector(".sub-menu.open");
if (event.target != box && event.target.parentNode != box) {
box.style.display = "none";
}
});
<ul class="nav__links">
<div class="desktop__nav">
<li class="parent">
Product
<img
class="menu-arrow"
src="./images/icon-arrow-light.svg"
alt="arrow"
/>
<ul class="sub-menu">
<li>Overview</li>
<li>Pricing</li>
<li>Marketplace</li>
<li>Features</li>
<li>Integrations</li>
</ul>
</li>
<li class="parent">
Company
<img
class="menu-arrow"
src="./images/icon-arrow-light.svg"
alt="arrow"
/>
<ul class="sub-menu">
<li>About</li>
<li>Team</li>
<li>Blog</li>
<li>Careers</li>
</ul>
</li>
<li class="parent">
Connect
<img
class="menu-arrow"
src="./images/icon-arrow-light.svg"
alt="arrow"
/>
<ul class="sub-menu">
<li>Contact</li>
<li>Newsletter</li>
<li>LinkedIn</li>
</ul>
</li>
</div>
.sub-menu {
display: none;
}
.sub-menu.open {
#include mobile {
display: flex;
flex-direction: column;
background-color: $footer-text;
width: 60vw;
margin: 0 auto;
color: $darkblue-headingtext;
border-radius: 5px;
position: relative;
left: 5px;
text-align: center;
}
position: absolute;
width: 10vw;
background-color: white;
color: black;
text-align: left;
display: flex;
flex-direction: column;
margin: 6px auto;
padding-left: 0.3rem;
border-radius: 5px;
}
The code works but then it stops after a few clicks

Answer
No JS required! Get that pesky language out of here and replace it with CSS, where we can use tabindex="0" on the dropdown parent element to allow us to use CSS :focus! With that, we can easily and reliably change styling based off the downtown parent focussed state, either
opacity: 0; pointer-events: none;
or
opacity: 1; pointer-events: all;
I hope this is what you were looking for and helped! Please comment if you'd like further explanation or need this in JS.
body {
font-family: sans-serif;
}
.dropdownbutton {
padding: 20px;
background: whitesmoke;
box-shadow: lightgray 0 12px 40px 0;
transition: all 0.3s;
}
.dropdownbutton:hover {
opacity: 1 !important;
background: lightgray;
}
.dropdownbutton span {
transition: 0.4s;
}
.dropdownparent:hover button span {
transform: rotate(180deg);
}
.dropdownparent {
position: relative;
width: fit-content;
transition: all 0.2s;
text-decoration: none;
user-select: none;
cursor: pointer;
border-radius: 4px;
z-index: 1000;
margin: 20px auto;
}
.dropdowncontentparent {
opacity: 0;
pointer-events: none;
position: absolute;
z-index: 1;
right: -13px;
top: 20px;
background: transparent;
padding: 12px;
transition: all 0.3s;
}
.dropdowncontentchild {
box-shadow: rgba(0, 0, 0, 0.15) 0 12px 22px 2px,
rgba(0, 0, 0, 0.055) 0 12px 12px;
border-radius: 4px;
overflow: hidden;
min-width: 200px;
width: max-content;
transition: all 0.3s;
background: var(--nav);
display: flex;
flex-direction: column;
}
.dropdowncontentchild:hover {
box-shadow: rgba(0, 0, 0, 0.3) 0 12px 22px 2px,
rgba(0, 0, 0, 0.075) 0 12px 12px;
}
.dropdowncontentchild a {
text-decoration: none;
padding: 8px;
transition: all 0.3s;
color: black;
}
.dropdowncontentchild a:hover {
background: whitesmoke;
}
.dropdownparent:focus .dropdowncontentparent {
opacity: 1;
pointer-events: all;
top: 30px;
}
.dropdownparent:focus .dropdownbutton {
opacity: 0.6;
background: darkgray;
}
<div class="dropdownparent" tabindex="0">
<a class="dropdownbutton">Dropdown Button</a>
<div class="dropdowncontentparent">
<div class="dropdowncontentchild">
Link 1
Link 2
Link 3
</div>
</div>
</div>

Link not opening when clicked on the href in li tag

I'm using https://codepen.io/ryanmorr/pen/LVzYmx/ Small trouble but major problem
When I click the link a href it won't open, These code seem correct?
So I'm inserting all the css, js - these might trigger this un-open-able link. But in my opinion use only a href should work just fine right?
I'm not sure it's only happen to me, or anyone else?
[].slice.call(document.querySelectorAll('.dropdown .nav-link')).forEach(function(el){
el.addEventListener('click', onClick, false);
});
function onClick(e){
e.preventDefault();
var el = this.parentNode;
el.classList.contains('show-submenu') ? hideSubMenu(el) : showSubMenu(el);
}
function showSubMenu(el){
el.classList.add('show-submenu');
document.addEventListener('click', function onDocClick(e){
e.preventDefault();
if(el.contains(e.target)){
return;
}
document.removeEventListener('click', onDocClick);
hideSubMenu(el);
});
}
function hideSubMenu(el){
el.classList.remove('show-submenu');
}
/* Page */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background-color: #3498db;
}
.nav {
width: 320px;
margin: 0 auto 0 auto;
text-align: center;
}
/* Navigation */
.nav {
font-family: Georgia, Arial, sans-serif;
font-size: 16px;
}
.nav-items {
padding: 0;
list-style: none;
}
.nav-item {
display: inline-block;
margin-right: 8px;
}
.nav-item:last-child {
margin-right: 0;
}
.nav-link,
.nav-link:link,
.nav-link:visited,
.nav-link:active,
.submenu-link,
.submenu-link:link,
.submenu-link:visited,
.submenu-link:active {
display: block;
position: relative;
font-size: 14px;
letter-spacing: 1px;
cursor: pointer;
text-decoration: none;
outline: none;
}
.nav-link,
.nav-link:link,
.nav-link:visited,
.nav-link:active {
color: #fff;
font-weight: bold;
}
.nav-link::before {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 3px;
background: rgba(0,0,0,0.2);
opacity: 0;
-webkit-transform: translate(0, 10px);
transform: translate(0, 10px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.nav-link:hover::before,
.nav-link:hover::before {
opacity: 1;
-webkit-transform: translate(0, 5px);
transform: translate(0, 5px);
}
.dropdown {
position: relative;
}
.dropdown .nav-link {
padding-right: 15px;
height: 17px;
line-height: 17px;
}
.dropdown .nav-link::after {
content: "";
position:absolute;
top: 6px;
right: 0;
border: 5px solid transparent;
border-top-color: #fff;
}
.submenu {
position: absolute;
top: 100%;
left: 50%;
z-index: 100;
width: 200px;
margin-left: -100px;
background: #fff;
border-radius: 3px;
line-height: 1.46667;
margin-top: -5px;
box-shadow: 0 0 8px rgba(0,0,0,.3);
opacity:0;
-webkit-transform: translate(0, 0) scale(.85);
transform: translate(0, 0)scale(.85);
transition: transform 0.1s ease-out, opacity 0.1s ease-out;
pointer-events: none;
}
.submenu::after,
.submenu::before {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -10px;
border: 10px solid transparent;
height: 0;
}
.submenu::after {
border-bottom-color: #fff;
}
.submenu::before {
margin-left: -13px;
border: 13px solid transparent;
border-bottom-color: rgba(0,0,0,.1);
-webkit-filter:blur(1px);
filter:blur(1px);
}
.submenu-items {
list-style: none;
padding: 10px 0;
}
.submenu-item {
display: block;
text-align: left;
}
.submenu-link,
.submenu-link:link,
.submenu-link:visited,
.submenu-link:active {
color: #3498db;
padding: 10px 20px;
}
.submenu-link:hover {
text-decoration: underline;
}
.submenu-seperator {
height: 0;
margin: 12px 10px;
border-top: 1px solid #eee;
}
.show-submenu .submenu {
opacity: 1;
-webkit-transform: translate(0, 25px) scale(1);
transform: translate(0, 25px) scale(1);
pointer-events: auto;
}
<nav class="nav" id="header">
<ul class="nav-items">
<li class="nav-item dropdown">
<a class="nav-link"><span>Link</span></a>
<nav class="submenu">
<ul class="submenu-items">
<li class="submenu-item">Facebook</li>
<li class="submenu-item">This HTML</li>
<li class="submenu-item"><hr class="submenu-seperator" /></li>
<li class="submenu-item">Google</li>
</ul>
</nav>
</li>
<li class="nav-item dropdown">
<a class="nav-link"><span>Info</span></a>
<nav class="submenu">
<ul class="submenu-items">
<li class="submenu-item"><a class="submenu-link">???</a></li>
</ul>
</nav>
</li>
</ul>
</nav>
Thank you in advance

It seems that e.preventDefault(); causes the issue. Please, remove it from:
function showSubMenu(el){
el.classList.add('show-submenu');
document.addEventListener('click', function onDocClick(e){
e.preventDefault(); //this line
if(el.contains(e.target)){
return;
}
document.removeEventListener('click', onDocClick);
hideSubMenu(el);
});
}
It should now open the link as you might expect.
Explanation:
Have a look here. You can see that adding e.preventDefault(); will continue propagating until it is stopped.
So if you prevent the default event on a parent element, then that will propagate to all of the children as well. It means that the default behaviour for href will be also prevented.

Simple Push Menu in CSS3 and jQuery

I'm trying to add a push menu in my website. This menu has to slide out from left and should overlap the current page. I'm using the following code but it's not working. Is there something I'm missing or doing wrong?
CSS:
#menu {
display: none;
position: absolute;
top: 0;
left: -240px ;
position: fixed;
width: 240px;
height: 100%;
padding: 15px 25px;
margin: 0;
list-style: none;
background: #333;
z-index: 9999;
transition: all 0.3s ease;
-webkit-transition all 0.3s ease;
}
#menu a {
display: block;
color: #fff;
padding: 15px 0;
border-bottom: 1px solid rgba( 255, 255, 255, 0.05 );
}
.animate {
transform: translateX(240px);
-webkit-transform: translateX(240px);
}
JavaScipt:
$(function() {
$('#toggle-menu').click(function() {
toggleMenu();
});
})(jQuery);
function toggleMenu() {
if ($('#menu').hasClass('animate')) {
$('#menu').removeClass('animate');
}
else {
$('#menu').addClass('animate');
}
//$('#menu').toggleClass('animate');
}
HTML:
<div id="menu">
<ul>
<li> Home </li>
<li> Home </li>
<li> Home </li>
</ul>
</div>

created a working example for you. Hope it helps!
$(".menu").click(function() {
$('#menu').toggleClass('animate');
});
body {
overflow: hidden;
}
#menu {
top: 50px;
transform: translateX(-300px);
-webkit-transform: translateX(-300px);
position: fixed;
width: 240px;
height: 100%;
padding: 15px 25px;
margin: 0;
list-style: none;
background: #333;
z-index: 9999;
transition: all 0.3s ease;
-webkit-transition all 0.3s ease;
}
#menu a {
display: block;
color: #fff;
padding: 15px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
#menu.animate {
transform: translateX(0);
-webkit-transform: translateX(0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
<ul>
<li> Home
</li>
<li> Home
</li>
<li> Home
</li>
</ul>
</div>
<div class="menu">click</div>

In your code:
There's missing the #toggle-menu element
You're setting display:none in the #menu style
jQuery sintax adding the .click() event
Your code fixed, and a working JSFiddle (http://jsfiddle.net/bL62bek2/)
$('#toogle-menu').click(function() {
toggleMenu();
});
$('#menu').click(function() {
toggleMenu();
});
function toggleMenu() {
if ($('#menu').hasClass('animate')) {
$('#menu').removeClass('animate');
} else {
$('#menu').addClass('animate');
}
//$('#menu').toggleClass('animate');
}
#toogle-menu{
position:absolute;
right:0px;
top:30px;
cursor:pointer;
padding: 3px;
background-color:#333;
color:#fff;
}
#menu {
/*display: none;*/
position: absolute;
top: 0;
left: -240px ;
position: fixed;
width: 240px;
height: 100%;
padding: 15px 25px;
margin: 0;
list-style: none;
background: #333;
z-index: 9999;
transition: all 0.3s ease;
-webkit-transition all 0.3s ease;
}
#menu a {
display: block;
color: #fff;
padding: 15px 0;
border-bottom: 1px solid rgba( 255, 255, 255, 0.05 );
}
.animate {
transform: translateX(240px);
-webkit-transform: translateX(240px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div id="toogle-menu">menu</div>
<div id="menu" class="animate">
<ul>
<li> Home </li>
<li> Home </li>
<li> Home </li>
</ul>
</div>

Categories

Resources