Davron/spestexnika
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

navbar part is over

Browse Source
This commit is contained in:
Davron Chetin
2025-10-04 12:55:44 +05:00
parent 398269b49b
commit 23eea253d2
7 changed files with 226 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
components/nav_foot/navbar.css
View File

@@ -1,103 +1,104 @@
.nav_link_group_phone {
display: none;
}
.toggler {
display: none;
}
.Navbar_btn {
display: none;
}
.toggler div {
width: 1.5rem;
height: 0.15rem;
margin: 0.5rem;
background: #0c1239;
background-color: #0c1239;
transition: 0.4s ease-in-out;
}
.toggler .toggle_item2 {
width: 1rem;
}
.overflow {
position: absolute;
display: none;
top: 0;
height: 100%;
background-color: rgba(66, 64, 64, 0.199);
}
@media (max-width: 580px) {
.overflow.active {
display: block;
left: 0;
bottom: 0;
width: 100%;
}
.nav_link_group {
display: none;
}
.toggler {
display: none;
display: block;
width: 100%;
}
.Navbar_btn {
display: none;
.toggler.toggle {
display: flex;
flex-direction: column;
align-items: start;
}
.toggler div {
width: 1.5rem;
height: 0.15rem;
margin: 0.5rem;
background: rgb(10, 131, 26);
background-color: rgb(10, 131, 26);
/* animation toggle icon */
.toggler.toggle .toggle_item1 {
transform: rotate(-45deg) translate(-20px, 5px);
}
.toggler.toggle .toggle_item2 {
opacity: 0;
}
.toggler.toggle .toggle_item3 {
transform: rotate(45deg) translate(-20px, -5px);
}
.nav_link_group_phone {
position: absolute;
z-index: 1;
top: 0vh;
left: 0;
bottom: 0;
height: 100vh;
width: calc(40% + 100px);
max-width: 100%;
background-color: white;
background: white;
display: flex;
flex-direction: column;
justify-content: start;
align-items: start;
gap: 20px;
padding: 0 10px 10px 10px;
transform: translate(-100%);
transition: 0.4s ease-in-out;
}
.toggler .toggle_item2 {
width: 1rem;
}
.overflow{
.overflow {
position: absolute;
display: none;
width: 100%;
top: 0;
bottom: 0;
left: 0;
height: 100%;
background-color: rgba(66, 64, 64, 0.199);
}
.overflow.active{
display: block;
}
@media (max-width: 768px) {
.nav_link_group {
display: none;
}
.toggler {
display: block;
width: 100%;
}
.toggler.toggle {
display: flex;
flex-direction: column;
align-items: end;
}
/* animation toggle icon */
.toggler.toggle .toggle_item1 {
transform: rotate(-45deg) translate(-20px, 5px);
}
.toggler.toggle .toggle_item2 {
opacity: 0;
}
.toggler.toggle .toggle_item3 {
transform: rotate(45deg) translate(-20px, -5px);
}
.nav_link_group_phone {
position: absolute;
z-index: 1;
top: 0vh;
right: 0;
bottom: 0;
height: 100vh;
width: calc(50% + 100px);
max-width: 100%;
background-color: white;
background: white;
display: flex;
flex-direction: column;
justify-content: start;
align-items: start;
gap: 20px;
padding: 0 10px 10px 10px;
transform: translate(100%);
transition: 0.4s ease-in-out;
}
.overflow{
position: absolute;
display: none;
width: 100vh;
width: 100vw;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100vh;
background-color: rgba(66, 64, 64, 0.199);
}}
.active {
transform: translate(0);
}
}
}
.active {
transform: translate(0);
}