rebillar/site-accueil-insa
1
1
Fork 1
forked from vergnet/site-accueil-insa
Code Issues Pull requests Releases Wiki Activity

Improved hamburger menu

Browse source
This commit is contained in:
keplyx 2019-06-13 17:11:25 +02:00
parent d5187e0fc9
commit 8080f7a1bf
3 changed files with 60 additions and 173 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

214
assets/css/baguette.css
View file

@ -9,201 +9,87 @@
pointer-events: auto; pointer-events: auto;
} }
#bar1 {
#shaft, #star1, #star2, #star3, #star4 {
position: absolute; position: absolute;
width: 30px; width: 100%;
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;
height: 5px; height: 5px;
background-color: #fff; background-color: #fff;
margin: 5px 0; margin: 5px 0;
transition: 0.3s; transition: 0.3s;
} }
#bar1 { #shaft {
margin: 0;
top: 50%;
transform: translateY(-50%);
}
#star1, #star2 {
width: 20px;
top: 0; top: 0;
-webkit-transform: rotate(-30deg) translate(-10px, 10px);
transform: rotate(-45deg) translate(-10px, 12px);
} }
#bar2 { #star3, #star4 {
top: 0px; width: 20px;
right:-20px; bottom: 0;
} }
#bar3 { #star1, #star3 {
right: -28px; left: 0;
bottom:9px;
} }
#bar4 { #star2, #star4 {
bottom: 8PX; right: 0;
left:36px;
}
#bar5 {
bottom: 21px;
left:34px;
}
#bar6 {
bottom: 2px;
left:-100px; /*je ne sais pas encore si je la mets ou pas*/
} }
#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 */ /* 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; background-color: #ff5f5f;
transform: translateX(15px);
} }
.change-hover #bar3 {
.change-hover #star2 {
background-color: #7ffd78; background-color: #7ffd78;
transform: translate(-10px, -5px);
} }
.change-hover #bar4 {
.change-hover #star3 {
background-color: #fafd78; background-color: #fafd78;
} transform: translate(35px, -10px);
.change-hover #bar5 {
background-color: #e9b82f;
} }
.change-hover #bar7 { .change-hover #star4 {
background-color: #60bdff; background-color: #60bdff;
} transform: translate(5px, -20px);
.change-hover #bar1 {
background-color: #e9b82f;
}
.change-hover #bar8 {
background-color: #e9b82f;
}
.change-hover #bar9 {
background-color: #e9b82f;
} }
/* Mouse clics the baguette */ /* Mouse clics the baguette */
.change-clic #bar1 { .change-clic #shaft {
opacity:0; transform: translateY(-50%) rotate(-135deg);
background-color: #b0120b;
} }
.change-clic #bar2 { .change-clic #star1, .change-clic #star2, .change-clic #star3, .change-clic #star4 {
opacity: 0; left: 0;
} width: 100%;
border-radius: 0;
.change-clic #bar3 { margin: 0;
opacity: 0; top: 50%;
} transform: translateY(-50%) rotate(-45deg);
background-color: #b0120b;
.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;
} }

5
assets/css/style.css
View file

@ -592,6 +592,11 @@ Full-Width Styles
padding-bottom: 50px; padding-bottom: 50px;
} }
.jconfirm.jconfirm-supervan .jconfirm-box .jconfirm-buttons button {
font-family: Harry-P,fantasy;
font-size: 2rem;
}
/******************************************************************************* /*******************************************************************************
Small Device Styles Small Device Styles
*******************************************************************************/ *******************************************************************************/

14
includes/top_bar.php
View file

@ -1,14 +1,10 @@
<div id="header-top"> <div id="header-top">
<div id="baguette" onclick="toggleNav()"> <div id="baguette" onclick="toggleNav()">
<div id="bar1"></div> <div id="shaft"></div>
<div id="bar2"></div> <div id="star1"></div>
<div id="bar3"></div> <div id="star2"></div>
<div id="bar4"></div> <div id="star3"></div>
<div id="bar5"></div> <div id="star4"></div>
<div id="bar6"></div>
<div id="bar7"></div>
<div id="bar8"></div>
<div id="bar9"></div>
</div> </div>
<a id="menu-link" href="<?= $relativePath ?>index.php"> <a id="menu-link" href="<?= $relativePath ?>index.php">
<img src="<?= $relativePath ?>assets/images/logo-site-accueil.svg" id="menu-icon"> <img src="<?= $relativePath ?>assets/images/logo-site-accueil.svg" id="menu-icon">