ivabus/www
1
0
Fork 0
mirror of https://github.com/ivabus/www synced 2024-11-25 12:25:07 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Cool hamburger icon

Browse source
This commit is contained in:
Thomas Smith 2022-05-03 17:32:41 -04:00 committed by mxcl
parent e92ba3a39d
commit 7a1c4d98c9
Failed to extract signature
2 changed files with 81 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
public/index.html
View file

@ -40,7 +40,16 @@
<div class="container-fluid top-nav"> <div class="container-fluid top-nav">
<a class="navbar-brand" href="#"><img src="Images/tea-main-logo.svg" style="width:100px;"></a> <a class="navbar-brand" href="#"><img src="Images/tea-main-logo.svg" style="width:100px;"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span>
<input type="checkbox" id="checkbox1" class="checkbox1 visuallyHidden">
<label for="checkbox1">
<div class="hamburger hamburger1">
<span class="bar bar1"></span>
<span class="bar bar2"></span>
<span class="bar bar3"></span>
<span class="bar bar4"></span>
</div>
</label></span>
</button> </button>
<div class="collapse navbar-collapse pt-2 pb-2" id="navbarSupportedContent"> <div class="collapse navbar-collapse pt-2 pb-2" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto me-4 my-auto"> <ul class="navbar-nav ms-auto me-4 my-auto">

71
public/style.css
View file

@ -4,6 +4,77 @@ body{
background-color: #2B3033; background-color: #2B3033;
} }
.navbar-dark .navbar-toggler{
border:none;
}
.visuallyHidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; padding: 0; border: 0;
}
.hamburger {
margin: 0 auto;
margin-top: 0px;
width: 30px;
height: 30px;
position: relative;
}
.hamburger .bar {
padding: 0;
width: 30px;
height: 4px;
background-color: #8EC7BF;
display: block;
border-radius: 4px;
transition: all 0.4s ease-in-out;
position: absolute;
}
.bar1 {
top: 0;
}
.bar2,
.bar3 {
top: 13.5px;
}
.bar3 {
right: 0;
}
.bar4 {
bottom: 0;
}
/* HAMBURGER 1 */
.checkbox1:checked + label > .hamburger1 > .bar1{
transform: rotate(45deg);
transform-origin: 5%;
width: 41px
}
.checkbox1:checked + label > .hamburger1 > .bar2 {
transform: translateX(-40px);
background-color: transparent;
}
.checkbox1:checked + label > .hamburger1 > .bar3 {
transform: translateX(40px);
background-color: transparent;
}
.checkbox1:checked + label > .hamburger1 > .bar4 {
transform-origin: 5%;
transform: rotate(-45deg);
width: 41px;
}
.container, .container,
.top-nav{ .top-nav{
max-width: 1280px; max-width: 1280px;