sincoolka/Project-new-web
7
0
Fork 0
Code Issues Releases Activity

Overlay navigation optimalization for bigger screens

Browse Source
This commit is contained in:
Marcel Petráň 2019-04-26 15:52:50 +02:00
parent 18322e4076
commit 537c81e244
2 changed files with 37 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
cs/home.html
View File

@ -24,24 +24,28 @@
</div>
</div>
<ul>
<li>
<a href="#">DOMŮ</a>
</li>
<li>
<a href="#">KALENDÁŘ</a>
</li>
<li>
<a href="#">AKTUALITY</a>
</li>
<li>
<a href="#">ČLENSTVÍ</a>
</li>
<div class="container-nav-top">
<li>
<a href="#">SEKCE</a>
<a href="#">DOMŮ</a>
</li>
<li>
<a href="#">EN</a>
<a href="#">KALENDÁŘ</a>
</li>
<li>
<a href="#">AKTUALITY</a>
</li>
<li>
<a href="#">ČLENSTVÍ</a>
</li>
</div>
<div class="container-nav-bottom">
<li>
<a href="#">SEKCE</a>
</li>
<li>
<a href="#">EN</a>
</li>
</div>
</ul>
</nav>

29
css/master.css
View File

@ -265,13 +265,22 @@ nav {
nav ul {
list-style-type: none;
margin: 1em auto 0 auto;
display: grid;
grid-template-rows: repeat(6, 3.5em);
justify-content: space-evenly;
text-align: center;
display: block;
width: 80%;
padding: 0;
}
.container-nav-top{
display: grid;
grid-template-rows: repeat(4, 3.5em);
justify-content: space-evenly;
text-align: center;
}
.container-nav-bottom{
display: grid;
grid-template-rows: repeat(2, 3.5em);
justify-content: space-evenly;
text-align: center;
}
nav ul a{
color:#4A4A4A;
font-weight: bold;
@ -343,27 +352,27 @@ div.-right{
animation: show-x .3s .5s forwards;
-webkit-animation: show-x .3s .5s forwards;
}
.active li:nth-of-type(1){
.active div.container-nav-top li:nth-of-type(1){
animation: menu-item .25s forwards .35s ease-in-out;
-webkit-animation: menu-item .25s forwards .35s ease-in-out;
}
.active li:nth-of-type(2){
.active div.container-nav-top li:nth-of-type(2){
animation: menu-item .25s forwards .40s ease-in-out;
-webkit-animation: menu-item .25s forwards .40s ease-in-out;
}
.active li:nth-of-type(3){
.active div.container-nav-top li:nth-of-type(3){
animation: menu-item .25s forwards .45s ease-in-out;
-webkit-animation: menu-item .25s forwards .45s ease-in-out;
}
.active li:nth-of-type(4){
.active div.container-nav-top li:nth-of-type(4){
animation: menu-item .25s forwards .50s ease-in-out;
-webkit-animation: menu-item .25s forwards .50s ease-in-out;
}
.active li:nth-of-type(5){
.active div.container-nav-bottom li:nth-of-type(1){
animation: menu-item .25s forwards .55s ease-in-out;
-webkit-animation: menu-item .25s forwards .55s ease-in-out;
}
.active li:nth-of-type(6){
.active div.container-nav-bottom li:nth-of-type(2){
animation: menu-item .25s forwards .60s ease-in-out;
-webkit-animation: menu-item .25s forwards .60s ease-in-out;
}