manos/WWW
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed the mobile menu

Browse Source
This commit is contained in:
Manos Katsomallos
2019-12-31 12:07:51 +02:00
parent 3fa32b4e87
commit 72fef674a2
2 changed files with 15 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
css/styles.css
View File

@ -12,7 +12,7 @@ h1, h2, h3, h4, h5, p {
margin: 0; margin: 0;
} }
#nav-mini { #nav-mini, #nav-ctrl {
display: none; display: none;
} }
@ -322,23 +322,26 @@ h1, h2, h3, h4, h5, p {
#nav-mini { #nav-mini {
background: black; background: black;
/* display: block; */ display: block;
position: fixed; position: fixed;
top: 0; top: 0;
left: 2em; left: 5%;
outline: 0; outline: 0;
text-decoration: none; text-decoration: none;
z-index: 1; z-index: 1;
} }
#nav-mini:active > img { #nav-ctrl + label > img {
filter: invert(100%);
box-shadow: 0 0 0.5em white;
color: gray;
cursor: pointer; cursor: pointer;
} }
#nav-mini:active .menu { #nav-ctrl:checked + label > img {
filter: invert(100%);
box-shadow: 0 0 0.5em white;
color: gray;
}
#nav-ctrl:checked + label + .menu {
display: block; display: block;
} }

3
index.html
View File

@ -26,7 +26,10 @@
</nav> </nav>
<nav id="nav-mini"> <nav id="nav-mini">
<input type="checkbox" id="nav-ctrl" checked="false"/>
<label for="nav-ctrl">
<img src="img/menu.svg"/> <img src="img/menu.svg"/>
</label>
<div class="menu"> <div class="menu">
<a href="#home">Home</a> <a href="#home">Home</a>
<a href="#about">About</a> <a href="#about">About</a>