keb/ginou
1
0
Fork 0
Code Issues 6 Pull Requests Releases Activity

Animation for hamburger menu

Browse Source 
fixes #2
This commit is contained in:
Théo Marchal 2021-02-13 00:11:58 +01:00
parent a91ccf1c36
commit e9ee0f8ce5
9 changed files with 92 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
biographie.html
View File

@ -8,22 +8,25 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="stylesheet" href="styles/main.css" media="screen">
<script src="plugins/jquery-3.5.1.min.js"></script>
<script src="scripts/menu.js"></script>
</head>
<body>
<header>
<nav>
<div id="hamburger">
<div class="container" onclick="mobilemenu()"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
<div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
</div>
<ul>
<li class="title">Ginou</li>
<li><a href="index.html">Accueil</a></li>
<li class="selected"><a href="biographie.html">Biographie</a></li>
<li><a href="exposition.html">Exposition</a></li>
<li><a href="explorer.html">Explorer</a></li>
<li><a href="divers.html">Divers</a></li>
<li><a href="informations.html">Informations</a></li>
<div class="hidden">
<li><a href="index.html">Accueil</a></li>
<li class="selected"><a href="biographie.html">Biographie</a></li>
<li><a href="exposition.html">Exposition</a></li>
<li><a href="explorer.html">Explorer</a></li>
<li><a href="divers.html">Divers</a></li>
<li><a href="informations.html">Informations</a></li>
</div>
</ul>
</nav>
</header>

18
divers.html
View File

@ -8,8 +8,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="stylesheet" href="styles/main.css" media="screen">
<script src="scripts/menu.js"></script>
<script src="plugins/jquery-3.5.1.min.js"></script>
<script src="scripts/menu.js"></script>
<link href="plugins/jquery.fancybox.min.css" rel="stylesheet">
<script src="plugins/jquery.fancybox.min.js"></script>
<link href="plugins/chart.min.css" rel="stylesheet">
@ -21,16 +21,18 @@
<header>
<nav>
<div id="hamburger">
<div class="container" onclick="mobilemenu()"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
<div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
</div>
<ul>
<li class="title">Ginou</li>
<li><a href="index.html">Accueil</a></li>
<li><a href="biographie.html">Biographie</a></li>
<li><a href="exposition.html">Exposition</a></li>
<li><a href="explorer.html">Explorer</a></li>
<li class="selected"><a href="divers.html">Divers</a></li>
<li><a href="informations.html">Informations</a></li>
<div class="hidden">
<li><a href="index.html">Accueil</a></li>
<li><a href="biographie.html">Biographie</a></li>
<li><a href="exposition.html">Exposition</a></li>
<li><a href="explorer.html">Explorer</a></li>
<li class="selected"><a href="divers.html">Divers</a></li>
<li><a href="informations.html">Informations</a></li>
</div>
</ul>
</nav>
</header>

17
explorer.html
View File

@ -8,6 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="stylesheet" href="styles/main.css" media="screen">
<script src="plugins/jquery-3.5.1.min.js"></script>
<script src="scripts/menu.js"></script>
<link rel="stylesheet" href="styles/fancybox.css" media="screen">
<script src="plugins/jquery-3.5.1.min.js"></script>
@ -19,16 +20,18 @@
<header>
<nav>
<div id="hamburger">
<div class="container" onclick="mobilemenu()"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
<div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
</div>
<ul>
<li class="title">Ginou</li>
<li><a href="index.html">Accueil</a></li>
<li><a href="biographie.html">Biographie</a></li>
<li><a href="exposition.html">Exposition</a></li>
<li class="selected"><a href="explorer.html">Explorer</a></li>
<li><a href="divers.html">Divers</a></li>
<li><a href="informations.html">Informations</a></li>
<div class="hidden">
<li><a href="index.html">Accueil</a></li>
<li><a href="biographie.html">Biographie</a></li>
<li><a href="exposition.html">Exposition</a></li>
<li class="selected"><a href="explorer.html">Explorer</a></li>
<li><a href="divers.html">Divers</a></li>
<li><a href="informations.html">Informations</a></li>
</div>
</ul>
</nav>
</header>

18
exposition.html
View File

@ -8,9 +8,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="stylesheet" href="styles/main.css" media="screen">
<script src="scripts/menu.js"></script>
<link rel="stylesheet" href="styles/fancybox.css" media="screen">
<script src="plugins/jquery-3.5.1.min.js"></script>
<script src="scripts/menu.js"></script>
<link href="plugins/jquery.fancybox.min.css" rel="stylesheet">
<script src="plugins/jquery.fancybox.min.js"></script>
<script src="scripts/exposition.js"></script>
@ -19,16 +19,18 @@
<header>
<nav>
<div id="hamburger">
<div class="container" onclick="mobilemenu()"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
<div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
</div>
<ul>
<li class="title">Ginou</li>
<li><a href="index.html">Accueil</a></li>
<li><a href="biographie.html">Biographie</a></li>
<li class="selected"><a href="exposition.html">Exposition</a></li>
<li><a href="explorer.html">Explorer</a></li>
<li><a href="divers.html">Divers</a></li>
<li><a href="informations.html">Informations</a></li>
<div class="hidden">
<li><a href="index.html">Accueil</a></li>
<li><a href="biographie.html">Biographie</a></li>
<li class="selected"><a href="exposition.html">Exposition</a></li>
<li><a href="explorer.html">Explorer</a></li>
<li><a href="divers.html">Divers</a></li>
<li><a href="informations.html">Informations</a></li>
</div>
</ul>
</nav>
</header>

17
index.html
View File

@ -8,22 +8,25 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="stylesheet" href="styles/main.css" media="screen">
<script src="plugins/jquery-3.5.1.min.js"></script>
<script src="scripts/menu.js"></script>
</head>
<body>
<header>
<nav>
<div id="hamburger">
<div class="container" onclick="mobilemenu()"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
<div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
</div>
<ul>
<li class="title">Ginou</li>
<li class="selected"><a href="index.html">Accueil</a></li>
<li><a href="biographie.html">Biographie</a></li>
<li><a href="exposition.html">Exposition</a></li>
<li><a href="explorer.html">Explorer</a></li>
<li><a href="divers.html">Divers</a></li>
<li><a href="informations.html">Informations</a></li>
<div class="hidden">
<li class="selected"><a href="index.html">Accueil</a></li>
<li><a href="biographie.html">Biographie</a></li>
<li><a href="exposition.html">Exposition</a></li>
<li><a href="explorer.html">Explorer</a></li>
<li><a href="divers.html">Divers</a></li>
<li><a href="informations.html">Informations</a></li>
</div>
</ul>
</nav>
</header>

18
informations.html
View File

@ -8,24 +8,26 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="stylesheet" href="styles/main.css" media="screen">
<script src="scripts/menu.js"></script>
<script src="plugins/jquery-3.5.1.min.js"></script>
<script src="scripts/menu.js"></script>
<script src="scripts/mail.js"></script>
</head>
<body>
<header>
<nav>
<div id="hamburger">
<div class="container" onclick="mobilemenu()"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
<div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
</div>
<ul>
<li class="title">Ginou</li>
<li><a href="index.html">Accueil</a></li>
<li><a href="biographie.html">Biographie</a></li>
<li><a href="exposition.html">Exposition</a></li>
<li><a href="explorer.html">Explorer</a></li>
<li><a href="divers.html">Divers</a></li>
<li class="selected"><a href="informations.html">Informations</a></li>
<div class="hidden">
<li><a href="index.html">Accueil</a></li>
<li><a href="biographie.html">Biographie</a></li>
<li><a href="exposition.html">Exposition</a></li>
<li><a href="explorer.html">Explorer</a></li>
<li><a href="divers.html">Divers</a></li>
<li class="selected"><a href="informations.html">Informations</a></li>
</div>
</ul>
</nav>
</header>

18
painting.html
View File

@ -8,24 +8,26 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="stylesheet" href="styles/main.css" media="screen">
<script src="scripts/menu.js"></script>
<script src="plugins/jquery-3.5.1.min.js"></script>
<script src="scripts/menu.js"></script>
<script src="scripts/painting.js"></script>
</head>
<body>
<header>
<nav>
<div id="hamburger">
<div class="container" onclick="mobilemenu()"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
<div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
</div>
<ul>
<li class="title">Ginou</li>
<li><a href="index.html">Accueil</a></li>
<li><a href="biographie.html">Biographie</a></li>
<li><a href="exposition.html">Exposition</a></li>
<li><a href="explorer.html">Explorer</a></li>
<li><a href="divers.html">Divers</a></li>
<li><a href="informations.html">Informations</a></li>
<div class="hidden">
<li><a href="index.html">Accueil</a></li>
<li><a href="biographie.html">Biographie</a></li>
<li><a href="exposition.html">Exposition</a></li>
<li><a href="explorer.html">Explorer</a></li>
<li><a href="divers.html">Divers</a></li>
<li><a href="informations.html">Informations</a></li>
</div>
</ul>
</nav>
</header>

30
scripts/menu.js
View File

@ -1,18 +1,9 @@
function mobilemenu()
{
var navmenu = document.getElementsByTagName("nav");
if (navmenu[0].classList.contains("active"))
navmenu[0].classList.remove("active");
else
navmenu[0].classList.add("active");
}
document.addEventListener("DOMContentLoaded", function(event)
{
function isIE()
{
user_agent = navigator.userAgent;
return (user_agent.indexOf("MSIE ") > -1 || user_agent.indexOf("Trident/") > -1);
return (user_agent.indexOf("MSIE") > -1 || user_agent.indexOf("Trident/") > -1);
}
if (isIE())
@ -24,4 +15,23 @@ document.addEventListener("DOMContentLoaded", function(event)
document.getElementsByTagName("header")[0].insertBefore(IEheader, document.getElementsByTagName("nav")[0]);
};
});
jQuery(document).ready(function($)
{
$("#hamburger").click(function()
{
if ($("nav").hasClass("active"))
{
$(".hidden").slideUp(200, function()
{
$("nav").removeClass("active");
});
}
else
{
$("nav").addClass("active");
$(".hidden").slideDown(200);
}
});
});

9
styles/main.css
View File

@ -84,11 +84,6 @@ header nav ul li a {
}
}
header nav .mobile-menu-open,
header nav .mobile-menu-close {
display:none;
}
@media only screen and (max-width:600px) {
header nav {
margin-top:0.5rem;
@ -129,7 +124,7 @@ header nav .mobile-menu-close {
transform:rotate(45deg) translate(-6px, -9.5px);
}
header nav ul li {
.hidden {
display:none;
}
@ -139,7 +134,7 @@ header nav .mobile-menu-close {
padding:0.2rem;
}
header nav.active ul li:nth-child(2) {
header nav.active ul li:nth-child(1) {
padding-top:1rem;
}