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

Testing a new style of hamburger menu, CSS based

Browse Source
This commit is contained in:
Théo Marchal 2021-01-09 23:48:45 +01:00
parent 4635a88742
commit 8054ba680f
8 changed files with 44 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
biographie.html
View File

@ -13,8 +13,9 @@
<body> <body>
<header> <header>
<nav> <nav>
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-open">&#9776;&#xFE0E;</a> <div id="hamburger">
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-close">&#x2573;&#xFE0E;</a> <div class="container" onclick="mobilemenu()"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
</div>
<ul> <ul>
<li class="title"><a href="index.html">Ginou</a></li> <li class="title"><a href="index.html">Ginou</a></li>
<li class="selected"><a href="biographie.html">Biographie</a></li> <li class="selected"><a href="biographie.html">Biographie</a></li>

5
divers.html
View File

@ -20,8 +20,9 @@
<body> <body>
<header> <header>
<nav> <nav>
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-open">&#9776;&#xFE0E;</a> <div id="hamburger">
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-close">&#x2573;&#xFE0E;</a> <div class="container" onclick="mobilemenu()"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
</div>
<ul> <ul>
<li class="title"><a href="index.html">Ginou</a></li> <li class="title"><a href="index.html">Ginou</a></li>
<li><a href="biographie.html">Biographie</a></li> <li><a href="biographie.html">Biographie</a></li>

5
explorer.html
View File

@ -13,8 +13,9 @@
<body> <body>
<header> <header>
<nav> <nav>
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-open">&#9776;&#xFE0E;</a> <div id="hamburger">
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-close">&#x2573;&#xFE0E;</a> <div class="container" onclick="mobilemenu()"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
</div>
<ul> <ul>
<li class="title"><a href="index.html">Ginou</a></li> <li class="title"><a href="index.html">Ginou</a></li>
<li><a href="biographie.html">Biographie</a></li> <li><a href="biographie.html">Biographie</a></li>

5
exposition.html
View File

@ -18,8 +18,9 @@
<body> <body>
<header> <header>
<nav> <nav>
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-open">&#9776;&#xFE0E;</a> <div id="hamburger">
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-close">&#x2573;&#xFE0E;</a> <div class="container" onclick="mobilemenu()"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
</div>
<ul> <ul>
<li class="title"><a href="index.html">Ginou</a></li> <li class="title"><a href="index.html">Ginou</a></li>
<li><a href="biographie.html">Biographie</a></li> <li><a href="biographie.html">Biographie</a></li>

3
index.html
View File

@ -14,8 +14,7 @@
<header> <header>
<nav> <nav>
<div id="hamburger"> <div id="hamburger">
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-open">&#9776;&#xFE0E;</a> <div class="container" onclick="mobilemenu()"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-close">&#x2573;&#xFE0E;</a>
</div> </div>
<ul> <ul>
<li class="title selected"><a href="index.html">Ginou</a></li> <li class="title selected"><a href="index.html">Ginou</a></li>

5
informations.html
View File

@ -15,8 +15,9 @@
<body> <body>
<header> <header>
<nav> <nav>
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-open">&#9776;&#xFE0E;</a> <div id="hamburger">
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-close">&#x2573;&#xFE0E;</a> <div class="container" onclick="mobilemenu()"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
</div>
<ul> <ul>
<li class="title"><a href="index.html">Ginou</a></li> <li class="title"><a href="index.html">Ginou</a></li>
<li><a href="biographie.html">Biographie</a></li> <li><a href="biographie.html">Biographie</a></li>

5
painting.html
View File

@ -13,8 +13,9 @@
<body> <body>
<header> <header>
<nav> <nav>
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-open">&#9776;&#xFE0E;</a> <div id="hamburger">
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-close">&#x2573;&#xFE0E;</a> <div class="container" onclick="mobilemenu()"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
</div>
<ul> <ul>
<li class="title"><a href="index.html">Ginou</a></li> <li class="title"><a href="index.html">Ginou</a></li>
<li><a href="biographie.html">Biographie</a></li> <li><a href="biographie.html">Biographie</a></li>

53
styles/main.css
View File

@ -89,35 +89,32 @@ header nav .mobile-menu-close {
position:absolute; position:absolute;
} }
header nav #hamburger .mobile-menu-open { header nav #hamburger .container {
display:block; display:inline-block;
}
header nav.active #hamburger .mobile-menu-open {
display:none;
}
header nav.active #hamburger .mobile-menu-close {
display:block;
}
/*header nav .mobile-menu-open {
display:block;
position:absolute;
right:1rem;
font-size:1.5rem;
cursor:pointer; cursor:pointer;
line-height:2rem; }
}*/
header nav #hamburger .bar1,
/*header nav.active .mobile-menu-close { header nav #hamburger .bar2,
display:block; header nav #hamburger .bar3 {
position:absolute; width:35px;
right:1rem; height:3px;
font-size:1.5rem; background-color:#38686A;
cursor:pointer; margin:6px 0;
line-height:2.5rem; transition:0.4s;
}*/ }
header nav.active #hamburger .bar1 {
transform:rotate(-45deg) translate(-4.5px, 6px);
}
header nav.active #hamburger .bar2 {
opacity:0;
}
header nav.active #hamburger .bar3 {
transform:rotate(45deg) translate(-5px, -9.5px);
}
header nav ul li { header nav ul li {
display:none; display:none;