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

Align hamburger menu for mobile

Browse Source
This commit is contained in:
Théo Marchal 2021-01-09 19:55:32 +01:00
parent 14cffef301
commit d52293ff0f
8 changed files with 30 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
biographie.html
View File

@ -13,8 +13,8 @@
<body> <body>
<header> <header>
<nav> <nav>
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-open">&#9776;&#xFE0E;</span> <a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-open">&#9776;&#xFE0E;</a>
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-close">&#x2573;&#xFE0E;</span> <a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-close">&#x2573;&#xFE0E;</a>
<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>

4
divers.html
View File

@ -20,8 +20,8 @@
<body> <body>
<header> <header>
<nav> <nav>
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-open">&#9776;&#xFE0E;</span> <a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-open">&#9776;&#xFE0E;</a>
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-close">&#x2573;&#xFE0E;</span> <a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-close">&#x2573;&#xFE0E;</a>
<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>

4
explorer.html
View File

@ -13,8 +13,8 @@
<body> <body>
<header> <header>
<nav> <nav>
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-open">&#9776;&#xFE0E;</span> <a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-open">&#9776;&#xFE0E;</a>
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-close">&#x2573;&#xFE0E;</span> <a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-close">&#x2573;&#xFE0E;</a>
<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>

4
exposition.html
View File

@ -18,8 +18,8 @@
<body> <body>
<header> <header>
<nav> <nav>
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-open">&#9776;&#xFE0E;</span> <a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-open">&#9776;&#xFE0E;</a>
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-close">&#x2573;&#xFE0E;</span> <a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-close">&#x2573;&#xFE0E;</a>
<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>

6
index.html
View File

@ -13,8 +13,8 @@
<body> <body>
<header> <header>
<nav> <nav>
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-open">&#9776;&#xFE0E;</span> <a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-open">&#9776;&#xFE0E;</a>
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-close">&#x2573;&#xFE0E;</span> <a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-close">&#x2573;&#xFE0E;</a>
<ul> <ul>
<li class="title selected"><a href="index.html">Ginou</a></li> <li class="title selected"><a href="index.html">Ginou</a></li>
<li><a href="biographie.html">Biographie</a></li> <li><a href="biographie.html">Biographie</a></li>
@ -36,7 +36,7 @@
<p class="signature">Ses enfants et ses petits-enfants</p> <p class="signature">Ses enfants et ses petits-enfants</p>
<img src="images/ginoupainting.jpg"> <img src="images/ginoupainting.jpg" alt="Ginou peignant">
</article> </article>
</body> </body>
</html> </html>

4
informations.html
View File

@ -15,8 +15,8 @@
<body> <body>
<header> <header>
<nav> <nav>
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-open">&#9776;&#xFE0E;</span> <a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-open">&#9776;&#xFE0E;</a>
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-close">&#x2573;&#xFE0E;</span> <a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-close">&#x2573;&#xFE0E;</a>
<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>

4
painting.html
View File

@ -13,8 +13,8 @@
<body> <body>
<header> <header>
<nav> <nav>
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-open">&#9776;&#xFE0E;</span> <a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-open">&#9776;&#xFE0E;</a>
<a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-close">&#x2573;&#xFE0E;</span> <a href="javascript:void(0);" onclick="mobilemenu()" class="mobile-menu-close">&#x2573;&#xFE0E;</a>
<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>

33
styles/main.css
View File

@ -25,7 +25,7 @@ a {
text-decoration:none; text-decoration:none;
} }
header nav { header {
border-top:.2rem solid #187795; border-top:.2rem solid #187795;
box-shadow:0 .4rem .4rem 0 rgba(0,0,0,.04); box-shadow:0 .4rem .4rem 0 rgba(0,0,0,.04);
border-bottom:.1rem solid #eff0f3; border-bottom:.1rem solid #eff0f3;
@ -77,11 +77,16 @@ header nav .mobile-menu-close {
} }
@media only screen and (max-width: 500px) { @media only screen and (max-width: 500px) {
header nav {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
header nav .mobile-menu-open { header nav .mobile-menu-open {
font-family:monospace;
display:block; display:block;
position:absolute; position:absolute;
right:1rem; right:1rem;
top:0.65rem;
font-size:1.5rem; font-size:1.5rem;
cursor:pointer; cursor:pointer;
} }
@ -91,29 +96,17 @@ header nav .mobile-menu-close {
} }
header nav.active .mobile-menu-close { header nav.active .mobile-menu-close {
font-family:monospace;
display:block; display:block;
position:absolute; position:absolute;
right:1rem; right:1rem;
top:0.5rem;
font-size:1.5rem; font-size:1.5rem;
cursor:pointer; cursor:pointer;
} }
header nav.active .mobile-menu { header nav.active .mobile-menu-close span {
animation-duration:1s;
animation-name:rotate90;
animation-fill-mode:forwards;
} }
@keyframes rotate90 {
from {
transform:rotate(0deg);
}
to {
transform:rotate(90deg);
}
}
header nav ul li { header nav ul li {
display:none; display:none;
@ -122,6 +115,11 @@ header nav .mobile-menu-close {
header nav.active ul li { header nav.active ul li {
display:block; display:block;
font-size:1.2rem; font-size:1.2rem;
padding:0.2rem;
}
header nav.active ul li:nth-child(2) {
padding-top:1rem;
} }
header nav ul li.title { header nav ul li.title {
@ -129,8 +127,7 @@ header nav .mobile-menu-close {
} }
header nav ul li.title { header nav ul li.title {
display:block; display:inline;
margin-bottom:0.5rem;
} }
} }