pedf
/
fakulta-online
Archived
1
0
Fork 0
Code Pull Requests Releases Activity

Přidání navigace

Browse Source 
Grafický návrh vyžaduje menu, které začíná vždy v pravé části obrazovky,
ovšem ve kterém je obsah škálován s hlavním obsahem stránky, respektive
je zarovnán k prvé části hlavičky. Problém byl vyřešen tak, že přes celá
stránka je překryta objektem, který v sobě obsahuje elementy se stejnou
čárkou, jako hlavička a obsah navigace je pak škálován správně.
Nevýhodou je duplikace kódu a repasování existujících stylů.
master
Emil Miler 5 years ago
parent 0b8c21de19
commit 64692dddca
2 changed files with 56 additions and 5 deletions
Show Stats Download Patch File Download Diff File

35
sass/style.scss
Unescape Escape View File

@ -20,12 +20,43 @@ body {
nav {
display: none;
position: fixed;
left: 0;
right: 0;
width: 100vw;
height: 100vh;
text-align: right;
a { color: #fff; }
ul { list-style-type: none; }
li { margin: 2em 0; }
div.background {
position: fixed;
top: 0;
right: 0;
width: 30vw;
height: 100vh;
background-color: #b52637;
z-index: -1;
}
div.list {
max-width: $header-width;
padding: 2em;
text-align: right;
margin: 0 auto;
}
header { justify-content: flex-end; }
}
header {
display: flex;
justify-content: space-between;
align-items: center;
height: 3.5em;
max-width: $header-width;
margin: 0 auto;
padding: 2em;
@ -37,7 +68,7 @@ header {
color: #fff;
}
#menu {
.menu {
display: flex;
align-items: center;
justify-content: flex-end;
@ -45,7 +76,7 @@ header {
width: 250px;
font-size: 1.2em;
#menuicon {
.menuicon {
margin-left: 1em;
width: 1.5em;

26
templates/index.html
Unescape Escape View File

@ -8,13 +8,33 @@
<link rel="icon" href="/favicon.ico" type="image/x-icon">
</head>
<body{% if section.permalink and section.permalink == config.base_url %} class="index"{% endif %}>
<nav id="nav">navigace</nav>
<nav id="nav">
<header>
<div class="menu" onclick="togglevisible('#nav')">
Menu
<div class="menuicon">
<div></div><div></div><div></div>
</div>
</div>
</header>
<div class="list">
{% set section = get_section(path="_index.md") %}
{% if section.pages %}
<ul>
{% for page in section.pages %}
<li><a href="{{ page.permalink }}">{{ page.title }}</a></li>
{% endfor %}
</ul>
{% endif %}
</div>
<div class="background"></div>
</nav>
<header>
<img src="/logo.png" alt="Logo">
<a href="{{ config.base_url }}"><h1>{{ config.title }}</h1></a>
<div id="menu" onclick="togglevisible('#nav')">
<div class="menu" onclick="togglevisible('#nav')">
Menu
<div id="menuicon">
<div class="menuicon">
<div></div><div></div><div></div>
</div>
</div>