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>
</div> </div>
<ul> <ul>
<li> <div class="container-nav-top">
<a href="#">DOMŮ</a>
</li>
<li>
<a href="#">KALENDÁŘ</a>
</li>
<li>
<a href="#">AKTUALITY</a>
</li>
<li>
<a href="#">ČLENSTVÍ</a>
</li>
<li> <li>
<a href="#">SEKCE</a> <a href="#">DOMŮ</a>
</li> </li>
<li> <li>
<a href="#">EN</a> <a href="#">KALENDÁŘ</a>
</li> </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> </ul>
</nav> </nav>

29
css/master.css
View File

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