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

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

@ -30,7 +30,7 @@
<div class="header-center">
<nav class="menu">
<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>
<ul class="sub-mega">
<li>