This commit is contained in:
Götz 2017-10-19 01:00:31 +02:00
parent 739ae6df53
commit 922a12d71d
4 changed files with 78 additions and 6 deletions

View File

@ -0,0 +1,52 @@
#main-nav {
display: table;
position: fixed;
left: -200px;
top: 0;
background-color: transparent;
z-index: 5000;
height: 100%;
width: 200px;
-webkit-transition: left 0.5s; /* For Safari 3.1 to 6.0 */
transition: left 0.5s;
}
#main-nav .nav-wrapper {
display: table-cell;
vertical-align: middle;
}
#main-nav .inner-nav .menu-item {
padding: 10px;
padding-left: 20px;
width: 100%;
display: block;
background-color: #ffffff;
border: 1px solid #b1b1b1;
}
#main-nav .inner-nav .menu-item:last-child {
border-bottom-right-radius: 5px;
}
#main-nav .inner-nav .menu-item:hover {
background-color: #b1b1b1;
}
#main-nav .inner-nav .menu-head {
border-top-right-radius: 5px;
border: 1px solid #b1b1b1;
background-color: #ffffff;
display: block;
padding: 10px;
padding-left: 20px;
margin-bottom: 0;
text-transform: uppercase;
font-weight: bold;
}
#menu-button:hover #main-nav {
left: 0;
}

View File

@ -1,3 +1,4 @@
{% import '/macros/nav.jinja' as nav %}
{# ===== HTML ===== #}
<!DOCTYPE html>
<html lang="en" dir="ltr">
@ -12,13 +13,24 @@
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="{{ static('libs/font-awesome-4.7.0/css/font-awesome.css') }}">
<link rel="stylesheet" href="{{ static('libs/bootstrap-4.0.0-beta-dist/css/bootstrap.css') }}">
<link rel="stylesheet" href="{{ static('css/nav.css') }}">
{% block css_extra %}{% endblock %}
</head>
{# ===== Body ===== #}
<body>
{% block body %}
{% block headline %}{% endblock %}
<div class="row">
<div class="col-2">
<div id="menu-button"><i class="fa fa-bars" aria-hidden="true"></i>
{{ nav.main_nav() }}
</div>
</div>
<div class="col-8">
{% block headline %}{% endblock %}</div>
<div class="col-2"></div>
</div>
<div class="container-fluid bg-dark text-white">
{% block content %}{% endblock %}
</div>

View File

@ -0,0 +1,13 @@
{% macro main_nav() -%}
<nav id="main-nav">
<div class="nav-wrapper">
<div class="inner-nav">
<p class="menu-head">BaStA Menu</p>
<a class="menu-item" href="{{ url('daily-food') }}">Food</a>
<a class="menu-item" href="{{ url('day-events') }}">Events</a>
<a class="menu-item" href="{{ url('donar') }}">Donar</a>
<a class="menu-item" href="{{ url('links-home') }}">Links</a>
</div>
</div>
</nav>
{% endmacro %}

View File

@ -1,5 +0,0 @@
{% block nav %}
<nav>
</nav>
{% endblock %}