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 ===== #}
|
{# ===== HTML ===== #}
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en" dir="ltr">
|
<html lang="en" dir="ltr">
|
||||||
@ -12,13 +13,24 @@
|
|||||||
<!-- Bootstrap CSS -->
|
<!-- Bootstrap CSS -->
|
||||||
<link rel="stylesheet" href="{{ static('libs/font-awesome-4.7.0/css/font-awesome.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('libs/bootstrap-4.0.0-beta-dist/css/bootstrap.css') }}">
|
||||||
|
<link rel="stylesheet" href="{{ static('css/nav.css') }}">
|
||||||
{% block css_extra %}{% endblock %}
|
{% block css_extra %}{% endblock %}
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
{# ===== Body ===== #}
|
{# ===== Body ===== #}
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
{% block 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">
|
<div class="container-fluid bg-dark text-white">
|
||||||
{% block content %}{% endblock %}
|
{% block content %}{% endblock %}
|
||||||
</div>
|
</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