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

Adjusted the menu

Browse Source
This commit is contained in:
Manos Katsomallos
2019-12-31 17:34:06 +02:00
parent 575996ddff
commit 0b45da801a
2 changed files with 9 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
css/styles.css
View File

@ -47,26 +47,20 @@ h1, h2, h3, h4, h5, p {
outline: 0; outline: 0;
text-decoration: none; text-decoration: none;
z-index: 1; z-index: 1;
background-color: black;
box-shadow: 0 0 0.5em black;
} }
#nav-mini .menu { #nav-mini .menu {
display: none; display: none;
box-shadow: 0 0 0.5em black;
background-color: black; background-color: black;
margin-left: 0.5em; margin: 48px 48px 48px 48px;
} }
#nav-mini .menu a { #nav-mini .menu a {
text-align: left; text-align: center;
padding: 1em 2em; padding: 1em 0 1em 0;
} border-bottom: 0.1em solid gray;
#nav-mini .menu .first {
padding-top: 1.5em;
}
#nav-mini .menu .last {
padding-bottom: 1.5em;
} }
#nav-mini .menu a:hover { #nav-mini .menu a:hover {
@ -81,7 +75,6 @@ h1, h2, h3, h4, h5, p {
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 50%; background-size: 50%;
box-shadow: 0 0 0.5em black;
cursor: pointer; cursor: pointer;
float: left; float: left;
} }
@ -93,7 +86,6 @@ h1, h2, h3, h4, h5, p {
#nav-ctrl:checked + label { #nav-ctrl:checked + label {
filter: invert(100%); filter: invert(100%);
box-shadow: 0 0 0.5em white;
background-image: url("../img/close.svg"); background-image: url("../img/close.svg");
background-size: 25%; background-size: 25%;
} }
@ -104,7 +96,7 @@ h1, h2, h3, h4, h5, p {
} */ } */
#nav-ctrl:checked + label + .menu { #nav-ctrl:checked + label + .menu {
display: inline-block; display: block;
} }
#nav a:hover { #nav a:hover {

4
index.html
View File

@ -25,11 +25,11 @@
<input type="checkbox" id="nav-ctrl"/> <input type="checkbox" id="nav-ctrl"/>
<label for="nav-ctrl"></label> <label for="nav-ctrl"></label>
<div class="menu"> <div class="menu">
<a href="#home" class="first">Home</a> <a href="#home">Home</a>
<a href="#about">About</a> <a href="#about">About</a>
<a href="#experience">Experience</a> <a href="#experience">Experience</a>
<a href="#education">Education</a> <a href="#education">Education</a>
<a href="#contact" class="last">Contact</a> <a href="#contact">Contact</a>
</div> </div>
</nav> </nav>
<div id="home"> <div id="home">