forked from rebillar/site-accueil-insa
Improved hamburger menu
This commit is contained in:
keplyx
parent
d5187e0fc9
commit
8080f7a1bf
3 changed files with 60 additions and 173 deletions
|
|
@ -9,201 +9,87 @@
|
|||
pointer-events: auto;
|
||||
}
|
||||
|
||||
#bar1 {
|
||||
|
||||
#shaft, #star1, #star2, #star3, #star4 {
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 3px;
|
||||
background-color: #ffffff;
|
||||
margin: 4px 0;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
#bar2 {
|
||||
position: relative;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
background-color: #ffffff;
|
||||
margin: 4px 0;
|
||||
transition: 0.3s;
|
||||
|
||||
}
|
||||
|
||||
#bar3 {
|
||||
position: relative;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
background-color: #ffffff;
|
||||
margin: 4px 0;
|
||||
transition: 0.3s;
|
||||
|
||||
}
|
||||
|
||||
#bar4 {
|
||||
position: relative;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
background-color: #ffffff;
|
||||
margin: 4px 0;
|
||||
transition: 0.3s;
|
||||
|
||||
}
|
||||
#bar5 {
|
||||
position: relative;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
background-color: #ffffff;
|
||||
margin: 4px 0;
|
||||
transition: 0.3s;
|
||||
|
||||
}
|
||||
|
||||
#bar6 {
|
||||
position: relative;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
background-color: #ffffff;
|
||||
margin: 4px 0;
|
||||
transition: 0.3s;
|
||||
|
||||
}
|
||||
|
||||
#bar7 {
|
||||
position: relative;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
background-color: #ffffff;
|
||||
margin: 4px 0;
|
||||
transition: 0.3s;
|
||||
|
||||
}
|
||||
|
||||
|
||||
#bar8{
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 5px;
|
||||
background-color: #fff;
|
||||
margin: 5px 0;
|
||||
transition: 0.3s;
|
||||
}
|
||||
#bar9 {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
background-color: #fff;
|
||||
margin: 5px 0;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
#bar1 {
|
||||
#shaft {
|
||||
margin: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
#star1, #star2 {
|
||||
width: 20px;
|
||||
top: 0;
|
||||
-webkit-transform: rotate(-30deg) translate(-10px, 10px);
|
||||
transform: rotate(-45deg) translate(-10px, 12px);
|
||||
}
|
||||
|
||||
#bar2 {
|
||||
top: 0px;
|
||||
right:-20px;
|
||||
|
||||
#star3, #star4 {
|
||||
width: 20px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#bar3 {
|
||||
right: -28px;
|
||||
bottom:9px;
|
||||
#star1, #star3 {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#bar4 {
|
||||
bottom: 8PX;
|
||||
left:36px;
|
||||
}
|
||||
#bar5 {
|
||||
bottom: 21px;
|
||||
left:34px;
|
||||
}
|
||||
#bar6 {
|
||||
bottom: 2px;
|
||||
left:-100px; /*je ne sais pas encore si je la mets ou pas*/
|
||||
#star2, #star4 {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#bar7 {
|
||||
bottom: 23px;
|
||||
right:-32px;
|
||||
}
|
||||
|
||||
#bar8{
|
||||
top:0;
|
||||
opacity:0;
|
||||
-webkit-transform: rotate(-45deg) translate(-10px, 10px);
|
||||
transform: rotate(-45deg) translate(-8px, 8px);
|
||||
}
|
||||
|
||||
#bar9{
|
||||
bottom:0;
|
||||
opacity:0;
|
||||
-webkit-transform: rotate(45deg) translate(-10px, -10px);
|
||||
transform: rotate(45deg) translate(-10px, -10px);
|
||||
}
|
||||
/* Mouse hovers the baguette */
|
||||
|
||||
.change-hover #bar2 {
|
||||
.change-hover #shaft {
|
||||
background-color: #e9b82f;
|
||||
transform: translateY(-50%) rotate(-45deg);
|
||||
}
|
||||
|
||||
.change-hover #star1, .change-hover #star2, .change-hover #star3, .change-hover #star4 {
|
||||
width: 5px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.change-hover #star1 {
|
||||
background-color: #ff5f5f;
|
||||
transform: translateX(15px);
|
||||
|
||||
}
|
||||
.change-hover #bar3 {
|
||||
|
||||
.change-hover #star2 {
|
||||
background-color: #7ffd78;
|
||||
transform: translate(-10px, -5px);
|
||||
}
|
||||
.change-hover #bar4 {
|
||||
|
||||
.change-hover #star3 {
|
||||
background-color: #fafd78;
|
||||
}
|
||||
.change-hover #bar5 {
|
||||
background-color: #e9b82f;
|
||||
transform: translate(35px, -10px);
|
||||
}
|
||||
|
||||
.change-hover #bar7 {
|
||||
.change-hover #star4 {
|
||||
background-color: #60bdff;
|
||||
}
|
||||
|
||||
|
||||
.change-hover #bar1 {
|
||||
background-color: #e9b82f;
|
||||
}
|
||||
|
||||
.change-hover #bar8 {
|
||||
background-color: #e9b82f;
|
||||
}
|
||||
.change-hover #bar9 {
|
||||
background-color: #e9b82f;
|
||||
transform: translate(5px, -20px);
|
||||
}
|
||||
|
||||
/* Mouse clics the baguette */
|
||||
|
||||
.change-clic #bar1 {
|
||||
opacity:0;
|
||||
.change-clic #shaft {
|
||||
transform: translateY(-50%) rotate(-135deg);
|
||||
background-color: #b0120b;
|
||||
}
|
||||
|
||||
.change-clic #bar2 {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.change-clic #bar3 {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.change-clic #bar4 {
|
||||
opacity:0;
|
||||
}
|
||||
.change-clic #bar5 {
|
||||
opacity:0;
|
||||
}
|
||||
/*.change-clic #bar6 {
|
||||
opacity:0;
|
||||
}*/
|
||||
.change-clic #bar7 {
|
||||
opacity:0;
|
||||
}
|
||||
|
||||
.change-clic #bar8 {
|
||||
opacity : 100;
|
||||
}
|
||||
.change-clic #bar9 {
|
||||
opacity : 100;
|
||||
.change-clic #star1, .change-clic #star2, .change-clic #star3, .change-clic #star4 {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%) rotate(-45deg);
|
||||
background-color: #b0120b;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -592,6 +592,11 @@ Full-Width Styles
|
|||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.jconfirm.jconfirm-supervan .jconfirm-box .jconfirm-buttons button {
|
||||
font-family: Harry-P,fantasy;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
/*******************************************************************************
|
||||
Small Device Styles
|
||||
*******************************************************************************/
|
||||
|
|
|
|||
|
|
@ -1,14 +1,10 @@
|
|||
<div id="header-top">
|
||||
<div id="baguette" onclick="toggleNav()">
|
||||
<div id="bar1"></div>
|
||||
<div id="bar2"></div>
|
||||
<div id="bar3"></div>
|
||||
<div id="bar4"></div>
|
||||
<div id="bar5"></div>
|
||||
<div id="bar6"></div>
|
||||
<div id="bar7"></div>
|
||||
<div id="bar8"></div>
|
||||
<div id="bar9"></div>
|
||||
<div id="shaft"></div>
|
||||
<div id="star1"></div>
|
||||
<div id="star2"></div>
|
||||
<div id="star3"></div>
|
||||
<div id="star4"></div>
|
||||
</div>
|
||||
<a id="menu-link" href="<?= $relativePath ?>index.php">
|
||||
<img src="<?= $relativePath ?>assets/images/logo-site-accueil.svg" id="menu-icon">
|
||||
|
|
|
|||
Loading…
Reference in a new issue