add menu
This commit is contained in:
parent
739ae6df53
commit
922a12d71d
52
ofu_app/static/css/nav.css
Normal file
52
ofu_app/static/css/nav.css
Normal 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;
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
13
ofu_app/templates/macros/nav.jinja
Normal file
13
ofu_app/templates/macros/nav.jinja
Normal 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 %}
|
||||
@ -1,5 +0,0 @@
|
||||
{% block nav %}
|
||||
<nav>
|
||||
|
||||
</nav>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user