Added responsivness for navbar. added resize event listener, openMenu() and closeMenu() functions to navbar.js
This commit is contained in:
parent
5f245745f6
commit
e199885bbb
5 changed files with 169 additions and 60 deletions
|
|
@ -1,5 +1,15 @@
|
|||
<nav id="navbar_component">
|
||||
<div id="navbar_menu">
|
||||
<a class="navbar_menu-click" href="javascript:openMenu()">
|
||||
<span class="iconify" data-icon="mdi-menu"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div id="navbar_text-container">
|
||||
<div class="navbar_menu-close">
|
||||
<a href="javascript:closeMenu()">
|
||||
<span class="iconify" data-icon="mdi-close"></span>
|
||||
</a>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="avocat">Votre Avocat</a>
|
||||
|
|
|
|||
140
css/navbar.css
140
css/navbar.css
|
|
@ -2,19 +2,6 @@
|
|||
padding: 2.5rem;
|
||||
}
|
||||
|
||||
#navbar_component {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 5rem;
|
||||
padding: 0 5rem;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
background-color: var(--color-light);
|
||||
z-index: 3;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
#navbar_logo-container {
|
||||
height: 5rem;
|
||||
width: 5rem;
|
||||
|
|
@ -27,9 +14,24 @@
|
|||
height: 5rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 800px) {
|
||||
#navbar_component {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 5rem;
|
||||
padding: 0 5rem;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
background-color: var(--color-light);
|
||||
z-index: 3;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
#navbar_text-container {
|
||||
font-family: 'Josefin Sans', sans-serif;
|
||||
position: fixed;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#navbar_text-container li {
|
||||
|
|
@ -39,6 +41,101 @@
|
|||
transition: all .3s ease 0s;
|
||||
}
|
||||
|
||||
#navbar_menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar_dropdown {
|
||||
align-items: center;
|
||||
background-color: rgba(255, 255, 255, 0.75);
|
||||
top: 5rem;
|
||||
backdrop-filter: blur(16px);
|
||||
border-radius: .25rem;
|
||||
box-shadow: 0 8px 16px rgba(136, 93, 12, 0.15);
|
||||
flex-direction: column;
|
||||
float: none;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
width: 15rem;
|
||||
overflow: initial;
|
||||
display: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.navbar_menu-close{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
#navbar_component {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 5rem;
|
||||
padding: 0 2.5rem;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
background-color: var(--color-light);
|
||||
z-index: 11;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
#navbar_text-container {
|
||||
font-family: 'Josefin Sans', sans-serif;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
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;
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 0.25rem;
|
||||
height: 100%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#navbar_text-container li {
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all .3s ease 0s;
|
||||
}
|
||||
|
||||
#navbar_menu svg{
|
||||
font-size: 50px;
|
||||
color: var(--color-dark);
|
||||
transition: all .3s ease 0s;
|
||||
}
|
||||
|
||||
#navbar_menu svg:hover{
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.navbar_menu-close svg{
|
||||
font-size: 50px;
|
||||
color: var(--color-dark);
|
||||
transition: all .3s ease 0s;
|
||||
}
|
||||
|
||||
.navbar_dropdown {
|
||||
align-items: center;
|
||||
background-color: rgba(255, 255, 255, 0.75);
|
||||
left: 14rem;
|
||||
backdrop-filter: blur(16px);
|
||||
border-radius: .25rem;
|
||||
box-shadow: 0 8px 16px rgba(136, 93, 12, 0.15);
|
||||
flex-direction: column;
|
||||
float: none;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
width: 15rem;
|
||||
overflow: initial;
|
||||
display: none;
|
||||
z-index: 11;
|
||||
}
|
||||
}
|
||||
|
||||
#navbar_text-container a,
|
||||
button {
|
||||
border-radius: .25rem;
|
||||
|
|
@ -58,23 +155,6 @@ button {
|
|||
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
|
||||
}
|
||||
|
||||
.navbar_dropdown {
|
||||
align-items: center;
|
||||
background-color: rgba(255, 255, 255, 0.75);
|
||||
top: 5rem;
|
||||
backdrop-filter: blur(16px);
|
||||
border-radius: .25rem;
|
||||
box-shadow: 0 8px 16px rgba(136, 93, 12, 0.15);
|
||||
flex-direction: column;
|
||||
float: none;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
width: 15rem;
|
||||
overflow: initial;
|
||||
display: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.navbar_dropdown a {
|
||||
border-radius: 0 !important;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
|
||||
<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>
|
||||
|
||||
|
|
|
|||
1
js/import.js
Normal file
1
js/import.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
import { mdiAccount } from '@mdi/js';
|
||||
47
js/navbar.js
47
js/navbar.js
|
|
@ -2,10 +2,12 @@
|
|||
/* global variables */
|
||||
/****************************************/
|
||||
|
||||
//When window width >800 set to true
|
||||
var mobileMode = false
|
||||
//enterAnimation is a status linked to mouseenter/leave of the icon
|
||||
var enterAnimation = false;
|
||||
//each <li> tag of the navbar_text-container
|
||||
var dropdownList = document.getElementById("navbar_text-container").children[0].children;
|
||||
var dropdownList = document.getElementById("navbar_text-container").children[1].children;
|
||||
//each <a> tag in the navbar
|
||||
var aTagList = getNavbarTextContainer();
|
||||
//a list
|
||||
|
|
@ -62,9 +64,8 @@ function setDropdown(display, element) {
|
|||
*/
|
||||
function getNavbarTextContainer() {
|
||||
var returnAtag = [];
|
||||
var container = document.getElementById("navbar_text-container");
|
||||
//For each a tag we found in the text container, push the element to the return array
|
||||
for (var aTag of container.children[0].children) {
|
||||
for (var aTag of dropdownList) {
|
||||
returnAtag.push(aTag.children[0])
|
||||
}
|
||||
return returnAtag;
|
||||
|
|
@ -80,6 +81,14 @@ function resetNavbar() {
|
|||
}
|
||||
}
|
||||
|
||||
function openMenu() {
|
||||
document.getElementById("navbar_text-container").style.display = "block";
|
||||
}
|
||||
|
||||
function closeMenu() {
|
||||
document.getElementById("navbar_text-container").style.display = "none";
|
||||
}
|
||||
|
||||
/****************************************/
|
||||
/* main */
|
||||
/****************************************/
|
||||
|
|
@ -92,15 +101,12 @@ document.getElementById("navbar_logo-home").href = urlStr;
|
|||
//Setting the href links for in directory links
|
||||
var urlOffset = urlStr.length
|
||||
//if dir found, we apply the dir offset + '/' (1 char)
|
||||
if(dirStr.length > 1)
|
||||
{
|
||||
if (dirStr.length > 1) {
|
||||
urlOffset = urlOffset + dirStr.length + 1;
|
||||
}
|
||||
//dor evry dropdown of the navbar we check each <a>
|
||||
for(var dropdown of navbarDropdown)
|
||||
{
|
||||
for(var aTagDropdown of dropdown.children)
|
||||
{
|
||||
for (var dropdown of navbarDropdown) {
|
||||
for (var aTagDropdown of dropdown.children) {
|
||||
//We slice the href with the url and the directory offset
|
||||
var pathStr = aTagDropdown.href.slice(urlOffset, aTagDropdown.href.length);
|
||||
//We then put again the url and the path we want
|
||||
|
|
@ -108,11 +114,9 @@ for(var dropdown of navbarDropdown)
|
|||
}
|
||||
}
|
||||
//We do the same but with aTag replacing aTagDropdown, each <a> of the aTagList
|
||||
for(var aTag of aTagList)
|
||||
{
|
||||
for (var aTag of aTagList) {
|
||||
//only aTag that are not blank (=#0) are affected
|
||||
if(!(aTag.href.includes("#0")))
|
||||
{
|
||||
if (!(aTag.href.includes("#0"))) {
|
||||
var pathStr = aTag.href.slice(urlOffset, aTag.href.length);
|
||||
aTag.href = urlStr + pathStr;
|
||||
}
|
||||
|
|
@ -146,8 +150,7 @@ document.getElementById("navbar_logo-container").addEventListener("mouseleave",
|
|||
for (var dropdownElement of dropdownList) {
|
||||
var dropdownLink = dropdownElement.children[0];
|
||||
dropdownLink.addEventListener("click", function (e) {
|
||||
if (e.target.parentNode.children.length > 1)
|
||||
{
|
||||
if (e.target.parentNode.children.length > 1) {
|
||||
var styleDropdown = e.target.parentNode.children[1].style.display;
|
||||
//We reset all navbar
|
||||
resetNavbar();
|
||||
|
|
@ -176,3 +179,17 @@ window.addEventListener('click', function (e) {
|
|||
resetNavbar();
|
||||
}
|
||||
});
|
||||
|
||||
//When changing the window size
|
||||
window.addEventListener('resize', function (e) {
|
||||
if((window.innerWidth > 800) && mobileMode)
|
||||
{
|
||||
openMenu();
|
||||
mobileMode = false;
|
||||
}
|
||||
if((window.innerWidth < 800) && !mobileMode)
|
||||
{
|
||||
closeMenu();
|
||||
mobileMode = true;
|
||||
}
|
||||
});
|
||||
Loading…
Add table
Reference in a new issue