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>
Related
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.
I have created this nice nav bar, each link is a polygon with a nice angled border behind that appears every time i hover.My first link though, the home link, i ve decided to make it a parallelogram. When i hover over the home link i want the left side to have no border,but even though i have set the width to 100% and i have created it exactly like i wanted,i get that weird pixel of color. any ideas?
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
header {
font-size: 12px;
background: #1A2434;
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
.logo:hover {
filter: opacity(1.2);
-webkit-filter: opacity(1.2);
cursor: pointer;
}
.header {
position: fixed;
width: 100vw;
background-color: #101620;
height: 140px;
}
.menu {
width: 80vw;
height: 60px;
background-color: #1A2434;
margin-left: 22vw;
margin-top: 60px;
transform: skew(-30deg);
}
.bottom {
width: 100vw;
height: 20px;
background-color: #1A2434;
}
.logo img {
width: 120px;
z-index: 2;
margin-left: 8vw;
margin-top: 1px;
filter: opacity(0.9);
-webkit-filter: opacity(0.9);
}
.nav {
width: 80vw;
margin-right: 5vw;
display: flex;
justify-content: space-around;
line-height: 5vh;
transform: skew(30deg);
}
#home{
clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%);
margin-left: -2vw;
background-color: #1A2434;
}
.nav li {
height: 60px;
width: 100%;
list-style: none;
text-align: center;
display: flex;
justify-content: center;
clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
}
#a-home{
clip-path: polygon(10% 0, 100% 0%, 89% 96%, -2px 100%);
height:100%;
}
.nav li a {
color: white;
text-decoration: none; /*removes underline*/
display: block; /*links clickable everywhere*/
background-color: #1A2434;
height:97%;
width:100%;
clip-path: polygon(0 0, 100% 0, 89% 100%, 11% 100%);
padding-top: 7px;
}
.nav li:hover {
cursor: pointer;
background-color: rgb(140, 30, 30);
transition: 0.3s ease;
}
.nav li a:hover{
transition: 0.4s ease;
background-color:#101620;
}
#home:hover{
background-color: rgb(140, 30, 30);
}
.social {
display: flex;
transition: 0.4s;
margin-left: 35vw;
}
.social span {
width: 250px;
text-align: center;
color: white;
margin-top: 22px;
font-size: 11px;
letter-spacing: 0.2px;
}
.social ul {
margin-top: 16px;
width: 150px;
display: flex;
list-style: none;
justify-content: space-around;
}
.social ul li a {
font-size: 22px;
color: rgb(255, 255, 255);
}
.social ul a:hover,
.social ul a:focus {
color: #931d37;
transform: scale(1.2);
transition: 0.4s;
cursor: pointer;
}
.search {
margin-left: 12vw;
margin-top: 18px;
width: 175px;
}
input {
background-color: transparent;
border: none;
height: 25px;
width: 150px;
padding-left: 5px;
}
::placeholder {
opacity: 0.7;
}
button {
background-color: transparent;
border: none;
color: white;
width: 25px;
height: 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
padding: 0;
margin: 0;
position: absolute;
}
input,
select,
textarea {
color: #ffffff;
font-size: 12px;
}
.logo-socials {
position: fixed;
display: flex;
}
<header>
<div class="header">
<div class="logo-socials">
<div class="logo">
<img class="logo" src="" alt="logo">
</div>
<form action="/search" method="POST">
<div class="search">
<input type="text" id="input" name="input" placeholder="Search..." autocomplete="off">
<button type="submit"><i class="fa fa-search"></i></button>
</div>
<div class="autocom-box" id="autocom-box"></div>
</form>
<div class="social">
<span>Follow us on social media :</span>
<ul>
<li><a href="https://www.facebook.com"
target="_blank"><i class="fab fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="https://www.instagram.com" target="_blank"><i
class="fab fa-instagram" aria-hidden="true"></i></a></li>
<li><a href=" https://www.youtube.com" target="_blank"><i
class="fab fa-youtube" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
<div class="menu">
<ul class="nav">
<li id="home">Home</li>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
<div class="bottom">
</div>
</div>
</header>
<script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
I have created a hamburger menu which slides out form the left. All the links which link to other pages work fine however one link, "contact", links to my <footer> on the same page. The correct action takes place behind the menu but the menu does not close so it can't be seen unless I go up to the toggle button and close it.
I have tried hide, and toggle but the toggle button does not return to its initial state (hamburger) nor does anything happen when clicked. Any help appreciated!
#menu__toggle {
opacity: 0;
}
#menu__toggle:checked+.menu__btn>span {
transform: rotate(45deg);
}
#menu__toggle:checked+.menu__btn>span::before {
top: 0;
transform: rotate(0deg);
}
#menu__toggle:checked+.menu__btn>span::after {
top: 0;
transform: rotate(90deg);
}
#menu__toggle:checked~.menu__box {
left: 0 !important;
}
.menu__btn {
display: block;
position: fixed;
top: 30px;
right: 20px;
width: 50px;
height: 100px;
cursor: pointer;
z-index: 1;
}
.menu__btn>span,
.menu__btn>span::before,
.menu__btn>span::after {
display: block;
position: absolute;
width: 100%;
height: 2px;
background-color: rgb(201, 199, 199);
transition-duration: .25s;
}
.menu__btn>span::before {
content: '';
top: -8px;
}
.menu__btn>span::after {
content: '';
top: 8px;
}
.menu__box {
display: block;
position: fixed;
top: 0;
left: -100%;
width: 100%;
height: 100%;
margin: 0;
padding: 80px 0;
list-style: none;
background-color: #ECEFF1;
box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
transition-duration: .25s;
}
.menu__item {
display: block;
padding: 12px 24px;
color: #333;
font-family: sans-serif;
font-size: 40px;
font-weight: 600;
text-decoration: none;
transition-duration: .25s;
text-align: center;
}
.hList {
display: block;
float: none;
margin-top: 30px;
margin-bottom: 30px;
}
.menu__item:hover {
background-color: #CFD8DC;
}
<div class="hamburger-menu">
<input id="menu__toggle" type="checkbox" />
<label class="menu__btn" id="ham__btn" for="menu__toggle">
<span></span>
</label>
<ul class="menu__box">
<li class="hList"><a class="menu__item" href="index.html">Home</a></li>
<li class="hList"><a class="menu__item" href="narrative.index.html">Narrative</a></li>
<li class="hList"><a class="menu__item" href="commercial.index.html">Commercials</a></li>
<li class="hList"><a class="menu__item" href="promos.index.html">Promos</a></li>
<li class="hList"><a class="menu__item" id="indexContact" href="index.html#contact">Contact</a></li>
</ul>
</div>
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>
My html is:-
<!DOCTYPE html>
<html>
<head>
<meta charset="US-ASCII">
<link
rel="stylesheet"
type="text/css"
href="css/index.css"
>
<title>Best company in the USA</title>
</head>
<body>
<div class="menu">
<h2>MENU</h2>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<nav role="navigation">
<div class="navWrap">
<h2 class="navClose"></h2>
<ul>
<li>Home</li>
<li></li>
<li>About us</li>
<li></li>
<li><a href="somelink.com">
Services</a></li>
<li></li>
<li>Locations</li>
<li></li>
<li>Contact Us</li>
<li></li>
</ul>
</div>
</nav>
<div class="content">
<section class="first"></section>
</div>
</body>
</html>
My css is:-
#CHARSET "US-ASCII";
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
::-moz-selection {
background: none repeat scroll 0% 0% #D8262E;
}
::selection {
background: none repeat scroll 0% 0% #D8262E;
}
ul {
list-style: none outside;
clear: both;
}
.menu {
position: absolute;
float: right;
cursor: pointer;
float: right;
z-index: 1000;
top: 25px;
right: 20px;
}
.menu h2 {
display: none;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2)
}
#media only screen and (min-width:768px) {
.menu {
top: 32px;
right: 40px;
}
.menu h2 {
display: inline-block;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
font-family: "Karla", Arial, sans-serif;
font-size: 20px;
margin: 0px 5px 0px 0px;
text-transform: uppercase;
vertical-align: top;
}
}
.menu ul {
display: inline-block;
height: 30px;
margin: 0;
padding: 0;
vertical-align: top;
width: 25px;
margin: 0;
}
.menu ul li {
background: white;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;
box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;
height: 3px;
margin: 3px 0;
width: 100%;
}
html,nav,section,div {
display: block;
vertical-align: baseline;
margin: 0px;
padding: 0px;
border: 0px none;
}
nav[role="navigation"] {
background: #00e000;
overflow: hidden;
padding: 0 40px;
position: absolute;
top: 0;
right: 0;
text-align: left;
width: 13em;
z-index: 10;
}
.menu,.content,.first {
-webkit-transition: all 340ms cubic-bezier(0.905, 0.015, 0.65, 0.97);
-webkit-transition-delay: 0s;
-moz-transition: all 340ms cubic-bezier(0.905, 0.015, 0.65, 0.97) 0s;
-o-transition: all 340ms cubic-bezier(0.905, 0.015, 0.65, 0.97) 0s;
transition: all 340ms cubic-bezier(0.905, 0.015, 0.65, 0.97) 0s
}
.first {
background-color: #d8262e;
/* background: no-repeat scroll center transparent; */
width: 100%;
/* height: 600px; */
top: 0;
z-index: 30;
}
.first:before {
height: 100%;
content: "";
display: inline-block;
vertical-align: middle;
background-color: #38262e;
}
.first:after {
background-color: #38262e;
}
.content {
/* margin-top: -8px;
margin-left: -7px;
margin-right:-7px; */
/* padding-top:-10px; */
}
content:before,content:after {
content: "";
display: table;
line-height: 0;
}
content:after {
clear: both;
}
Jquery is:-
$(document) .ready(function () {
windowHeight = 0.9 * $(window) .innerHeight();
$('.first').height(windowHeight);
$(window) .resize(function () {
windowHeight = 0.9 * $(window) .innerHeight();
console.log("height: " + windowHeight);
});
});
So, there is a peculiar problem I'm facing now. Somehow, I'm getting 8-10px or margin from each side in the content class. I have a solution for this. If I comment out the css in .content, it works for me.
But, it would be great to know if my naive solution can get better. Or if somebody would help me point out the root cause for the extra margin, it would be great.
Here is a jsfiddle for this: http://jsfiddle.net/kSdHU/
Thanks.
You should reset your elements.
Just add:
* { margin: 0; padding: 0; }
Demo
To make sure you never run into weird styling issues like this I suggest using a css reset. It will basically reset your browsers default styles so you aren't getting unwanted styling of elements. I normally use Eric Meyers Reset but there are many out there.