muayjtp/web_design
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added active sidebar

Browse source
This commit is contained in:
JSriwongsa 2023-07-07 09:30:20 -05:00
parent 1a1d9d2c26
commit 04c4c42af4
2 changed files with 16 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
ecommerce/fashion_website/pages/page.css
View file

@ -345,7 +345,7 @@ form :where(input, textarea, select)::placeholder{
.search-float.active{ .search-float.active{
display: block; display: block;
} }
.overlay, .mobile-menu, .cart-menu{ .overlay, .mobile-menu, .cart-menu, .sidebar{
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
@ -366,17 +366,17 @@ form :where(input, textarea, select)::placeholder{
pointer-events: all; pointer-events: all;
} }
/*---------- mobile navbar ----------*/ /*---------- mobile navbar ----------*/
.mobile-menu, .cart-menu{ .mobile-menu, .cart-menu, .sidebar{
pointer-events: none; pointer-events: none;
z-index: 1001; z-index: 1001;
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
} }
.mobile-menu.active, .cart-menu.active{ .mobile-menu.active, .cart-menu.active, .sidebar.active{
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
} }
.mobile-menu .wrap, .cart-menu .wrap{ .mobile-menu .wrap, .cart-menu .wrap, .sidebar > .wrap{
position: relative; position: relative;
max-width: calc(100% - 40px); max-width: calc(100% - 40px);
width: 360px; width: 360px;
@ -384,11 +384,12 @@ form :where(input, textarea, select)::placeholder{
background-color: var(--white-color); background-color: var(--white-color);
pointer-events: auto; pointer-events: auto;
transition: var(--trabsition-transform); transition: var(--trabsition-transform);
transform: translateX(var(--transX, -100%));
} }
.mobile-menu.active .wrap, .cart-menu.active .wrap{ .mobile-menu.active .wrap, .cart-menu.active .wrap, .sidebar.active > .wrap{
transform: translateX(0); transform: translateX(0);
} }
.mobile-menu .close-trigger, .mobile-menu .child-trigger, .cart-menu .close-trigger{ .mobile-menu .close-trigger, .mobile-menu .child-trigger, .cart-menu .close-trigger, .sidebar .close-trigger{
display: flex; display: flex;
position: absolute; position: absolute;
top: 0; top: 0;
@ -400,7 +401,7 @@ form :where(input, textarea, select)::placeholder{
justify-content: center; justify-content: center;
font-size: 30px; font-size: 30px;
} }
.mobile-menu .main-menu, .cart-menu .cart-list{ .mobile-menu .main-menu, .cart-menu .cart-list, .sidebar-content{
display: flex; display: flex;
height: 100%; height: 100%;
padding: 0 20px; padding: 0 20px;
@ -1269,6 +1270,7 @@ input.checking:checked::after{
} }
.sidebar-title{ .sidebar-title{
font-size: 24px; font-size: 24px;
padding-top: 100px;
} }
.sidebar .widget{ .sidebar .widget{
margin: 20px 0; margin: 20px 0;
@ -1506,6 +1508,12 @@ input.checking:checked::after{
grid-template-columns: 1fr 4fr; grid-template-columns: 1fr 4fr;
gap: 60px; gap: 60px;
} }
.sidebar-title, .sidebar-content{
padding: 0;
}
.sidebar, .sidebar > .wrap{
all: unset;
}
} }
@media(min-width: 1200px){ @media(min-width: 1200px){

2
ecommerce/fashion_website/pages/page.html
View file

@ -30,7 +30,7 @@
<div class="header-center"> <div class="header-center">
<nav class="menu"> <nav class="menu">
<ul> <ul>
<li><a href=""><span>Home</span></a></li> <li><a href="../index.html"><span>Home</span></a></li>
<li><a href=""><span>Products</span><i class='bx bx-chevron-down'></i></a> <li><a href=""><span>Products</span><i class='bx bx-chevron-down'></i></a>
<ul class="sub-mega"> <ul class="sub-mega">
<li> <li>