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"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="images/favicon.png"> <link rel="shortcut icon" href="images/favicon.png">
<link rel="stylesheet" href="styles/main.css" media="screen"> <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> <script src="scripts/menu.js"></script>
</head> </head>
<body> <body>
<header> <header>
<nav> <nav>
<div id="hamburger"> <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> </div>
<ul> <ul>
<li class="title">Ginou</li> <li class="title">Ginou</li>
<li><a href="index.html">Accueil</a></li> <div class="hidden">
<li class="selected"><a href="biographie.html">Biographie</a></li> <li><a href="index.html">Accueil</a></li>
<li><a href="exposition.html">Exposition</a></li> <li class="selected"><a href="biographie.html">Biographie</a></li>
<li><a href="explorer.html">Explorer</a></li> <li><a href="exposition.html">Exposition</a></li>
<li><a href="divers.html">Divers</a></li> <li><a href="explorer.html">Explorer</a></li>
<li><a href="informations.html">Informations</a></li> <li><a href="divers.html">Divers</a></li>
<li><a href="informations.html">Informations</a></li>
</div>
</ul> </ul>
</nav> </nav>
</header> </header>

18
divers.html
View File

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

17
explorer.html
View File

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

18
exposition.html
View File

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

17
index.html
View File

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

18
informations.html
View File

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

18
painting.html
View File

@ -8,24 +8,26 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="images/favicon.png"> <link rel="shortcut icon" href="images/favicon.png">
<link rel="stylesheet" href="styles/main.css" media="screen"> <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="plugins/jquery-3.5.1.min.js"></script>
<script src="scripts/menu.js"></script>
<script src="scripts/painting.js"></script> <script src="scripts/painting.js"></script>
</head> </head>
<body> <body>
<header> <header>
<nav> <nav>
<div id="hamburger"> <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> </div>
<ul> <ul>
<li class="title">Ginou</li> <li class="title">Ginou</li>
<li><a href="index.html">Accueil</a></li> <div class="hidden">
<li><a href="biographie.html">Biographie</a></li> <li><a href="index.html">Accueil</a></li>
<li><a href="exposition.html">Exposition</a></li> <li><a href="biographie.html">Biographie</a></li>
<li><a href="explorer.html">Explorer</a></li> <li><a href="exposition.html">Exposition</a></li>
<li><a href="divers.html">Divers</a></li> <li><a href="explorer.html">Explorer</a></li>
<li><a href="informations.html">Informations</a></li> <li><a href="divers.html">Divers</a></li>
<li><a href="informations.html">Informations</a></li>
</div>
</ul> </ul>
</nav> </nav>
</header> </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) document.addEventListener("DOMContentLoaded", function(event)
{ {
function isIE() function isIE()
{ {
user_agent = navigator.userAgent; 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()) if (isIE())
@ -25,3 +16,22 @@ document.addEventListener("DOMContentLoaded", function(event)
document.getElementsByTagName("header")[0].insertBefore(IEheader, document.getElementsByTagName("nav")[0]); 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) { @media only screen and (max-width:600px) {
header nav { header nav {
margin-top:0.5rem; margin-top:0.5rem;
@ -129,7 +124,7 @@ header nav .mobile-menu-close {
transform:rotate(45deg) translate(-6px, -9.5px); transform:rotate(45deg) translate(-6px, -9.5px);
} }
header nav ul li { .hidden {
display:none; display:none;
} }
@ -139,7 +134,7 @@ header nav .mobile-menu-close {
padding:0.2rem; padding:0.2rem;
} }
header nav.active ul li:nth-child(2) { header nav.active ul li:nth-child(1) {
padding-top:1rem; padding-top:1rem;
} }