Added favicon, animation for menu selection, responsiveness for the footer element
This commit is contained in:
parent
e199885bbb
commit
280e9e1d36
7 changed files with 132 additions and 35 deletions
BIN
assets/favicon.ico
Normal file
BIN
assets/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
|
|
@ -1,12 +1,17 @@
|
|||
<nav id="navbar_component">
|
||||
<div id="navbar_menu">
|
||||
<a class="navbar_menu-click" href="javascript:openMenu()">
|
||||
<span class="iconify" data-icon="mdi-menu"></span>
|
||||
<svg width="1em" height="1em" viewBox="0 0 24 24"
|
||||
style="vertical-align: -0.125em; transform: rotate(360deg);">
|
||||
<polygon
|
||||
points="3,6 21,6 21,8 3,8 3,6 3,11 21,11 21,13 3,13 3,11 3,16 21,16 21,18 3,18 3,16"
|
||||
fill="currentColor" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div id="navbar_text-container">
|
||||
<div class="navbar_menu-close">
|
||||
<a href="javascript:closeMenu()">
|
||||
<a class="navbar_menu-close-btn" href="javascript:closeMenu()">
|
||||
<span class="iconify" data-icon="mdi-close"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.footer-container
|
||||
{
|
||||
@media screen and (min-width: 700px) {
|
||||
.footer-container {
|
||||
display: flex;
|
||||
height: 15rem;
|
||||
background-color: var(--color-dark);
|
||||
|
|
@ -7,15 +7,70 @@
|
|||
overflow: clip;
|
||||
}
|
||||
|
||||
.footer-container_grid
|
||||
{
|
||||
.footer-bottom_grid {
|
||||
flex: 1;
|
||||
padding: 1rem 4rem;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.legal{
|
||||
border-radius: .5rem;
|
||||
height: 80%;
|
||||
width: 50%;
|
||||
position: relative;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
background-color: var(--color-white);
|
||||
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
.footer-container {
|
||||
display: flex;
|
||||
height: 15rem;
|
||||
background-color: var(--color-dark);
|
||||
color: var(--color-white);
|
||||
overflow: clip;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.footer-bottom_grid {
|
||||
flex: 1;
|
||||
padding: 0.5rem;
|
||||
word-wrap: break-word;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.footer-bottom_grid.right-align{
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.footer-bottom_grid.left-align{
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.legal{
|
||||
border-radius: .5rem;
|
||||
height: 80%;
|
||||
width: 60%;
|
||||
position: relative;
|
||||
top: 10%;
|
||||
left: 20%;
|
||||
background-color: var(--color-white);
|
||||
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-container_grid {
|
||||
flex: 1;
|
||||
padding: 1rem 2rem;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.footer-bottom
|
||||
{
|
||||
.footer-bottom {
|
||||
background-color: var(--color-gray);
|
||||
color: var(--color-white);
|
||||
display: flex;
|
||||
|
|
@ -25,33 +80,22 @@
|
|||
overflow: clip;
|
||||
}
|
||||
|
||||
.footer-bottom_grid
|
||||
{
|
||||
flex: 1;
|
||||
padding: 1rem 4rem;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.footer-bottom_grid a:link
|
||||
{
|
||||
.footer-bottom_grid a:link {
|
||||
text-decoration: none;
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.footer-bottom_grid a:visited
|
||||
{
|
||||
.footer-bottom_grid a:visited {
|
||||
text-decoration: none;
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.footer-bottom_grid a:hover
|
||||
{
|
||||
.footer-bottom_grid a:hover {
|
||||
text-decoration: none;
|
||||
color: var(--color-light);
|
||||
}
|
||||
|
||||
.footer-bottom_grid.right-align:hover
|
||||
{
|
||||
.footer-bottom_grid.right-align:hover {
|
||||
transform: translateY(-2px);
|
||||
transition: all .3s ease 0s;
|
||||
}
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
}
|
||||
|
||||
#navbar_menu svg:hover{
|
||||
color: var(--color-white);
|
||||
color: var(--color-main);
|
||||
}
|
||||
|
||||
.navbar_menu-close svg{
|
||||
|
|
@ -118,6 +118,10 @@
|
|||
transition: all .3s ease 0s;
|
||||
}
|
||||
|
||||
.navbar_menu-close svg:hover{
|
||||
color: var(--color-main);
|
||||
}
|
||||
|
||||
.navbar_dropdown {
|
||||
align-items: center;
|
||||
background-color: rgba(255, 255, 255, 0.75);
|
||||
|
|
@ -165,3 +169,9 @@ button {
|
|||
background-color: var(--color-light) !important;
|
||||
color: var(--color-white) !important;
|
||||
}
|
||||
|
||||
.navbar_menu-close-btn:hover{
|
||||
transform: translateY(-1px) !important;
|
||||
background-color: rgba(255, 255, 255, 0)!important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
|
@ -5,10 +5,10 @@
|
|||
<title>Saoul Bonmonsieur | Site Web Officiel</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="assets/favicon.ico">
|
||||
|
||||
<script src="lib/anime.min.js"></script>
|
||||
<script src="js/base.js"></script>
|
||||
<script src="//code.iconify.design/1/1.0.6/iconify.min.js"></script>
|
||||
<link href="css/index.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
|
|
|
|||
|
|
@ -116,6 +116,7 @@ function popUpPlacement(className) {
|
|||
//During the loading process we need a loading status bar
|
||||
var headTag = document.getElementsByTagName("head")[0];
|
||||
window.addEventListener('load', function () {
|
||||
loadJS("//code.iconify.design/1/1.0.6/iconify.min.js", headTag)
|
||||
loadCSS(urlStr + "css/base.css", headTag);
|
||||
loadCSS(urlStr + "css/navbar.css", headTag);
|
||||
load(urlStr + "components/navbar.html", document.getElementsByTagName("Navbar")[0], urlStr + "js/navbar.js", headTag);
|
||||
|
|
|
|||
45
js/navbar.js
45
js/navbar.js
|
|
@ -6,18 +6,20 @@
|
|||
var mobileMode = false
|
||||
//enterAnimation is a status linked to mouseenter/leave of the icon
|
||||
var enterAnimation = false;
|
||||
//same but for menu
|
||||
var enterMenuAnimation = false;
|
||||
//each <li> tag of the navbar_text-container
|
||||
var dropdownList = document.getElementById("navbar_text-container").children[1].children;
|
||||
//each <a> tag in the navbar
|
||||
var aTagList = getNavbarTextContainer();
|
||||
//a list
|
||||
var dropdownStatus = Array(aTagList.length).fill(false);
|
||||
//list of dropdown links
|
||||
var dropdownLinks = ["droits/penal.html", "droits/affaire.html", "join/contact.html", "join/coordonees.html"];
|
||||
//list of container links
|
||||
var containerLinks = ["avocat"];
|
||||
//navbarDropdown Element
|
||||
var navbarDropdown = document.getElementsByClassName("navbar_dropdown");
|
||||
//menu close SVG Element
|
||||
var menuCloseElement = document.getElementsByClassName("navbar_menu-close-btn")[0].children[0];
|
||||
//menu hamburger SVG Element
|
||||
var menuOpenElement = document.getElementsByClassName("navbar_menu-click")[0].children[0];
|
||||
|
||||
/****************************************/
|
||||
/* animjs */
|
||||
|
|
@ -42,6 +44,17 @@ var logoRotate = anime({
|
|||
}
|
||||
});
|
||||
|
||||
var menuAnimation = anime({
|
||||
targets: '.navbar_menu-click polygon',
|
||||
points: [
|
||||
{ value: '3,6 21,6 21,8 3,8 3,6 3,11 21,11 21,13 3,13 3,11 3,16 21,16 21,18 3,18 3,16', duration: 10, delay: 0 },
|
||||
{ value: '15.410 16.580, 10.830 12.000, 15.410 7.410, 14.000 6.000, 8.000 12.000, 14.000 18.000, 15.410 16.580', duration: 200, delay: 10 }
|
||||
],
|
||||
scale: 1,
|
||||
easing: 'easeOutExpo',
|
||||
autoplay: false,
|
||||
});
|
||||
|
||||
/****************************************/
|
||||
/* functions */
|
||||
/****************************************/
|
||||
|
|
@ -193,3 +206,27 @@ window.addEventListener('resize', function (e) {
|
|||
mobileMode = true;
|
||||
}
|
||||
});
|
||||
|
||||
//Animation to be played when hovering the menu
|
||||
menuOpenElement.addEventListener("mouseenter", function () {
|
||||
//enterAnimation is now true (see update in logoRotate)
|
||||
enterMenuAnimation = true;
|
||||
//Will play the animation and when finished set enterAnimation to false
|
||||
menuAnimation.play();
|
||||
menuAnimation.finished.then(() => {
|
||||
enterMenuAnimation = false;
|
||||
})
|
||||
});
|
||||
|
||||
//Animation to be played when leaving the menu
|
||||
menuOpenElement.addEventListener("mouseleave", function () {
|
||||
//enterAnimation is now false (see update in logoRotate)
|
||||
enterMenuAnimation = false;
|
||||
menuAnimation.reverse();
|
||||
menuAnimation.play();
|
||||
//Will play the reversed animation and when finished set enterAnimation to true and and cancel the reverse
|
||||
menuAnimation.finished.then(() => {
|
||||
menuAnimation.reverse();
|
||||
enterMenuAnimation = true;
|
||||
})
|
||||
});
|
||||
Loading…
Add table
Reference in a new issue