Add dropdown in navtab

This commit is contained in:
Soldat
2018-10-20 15:10:45 +02:00
committed by klmp200
parent 3dc73ebb9a
commit 29935cb5a8
3 changed files with 204 additions and 101 deletions

View File

@ -336,7 +336,7 @@ header {
border-radius: 6px 6px 0px 0px;
box-shadow: $shadow-color 0px 0px 15px;
a {
a{
flex: auto;
text-align: center;
padding: 20px;
@ -356,6 +356,45 @@ header {
}
}
}
.dropdown{
flex: auto;
text-align: center;
position: relative;
}
.dropbtn {
all: unset;
padding: 20px;
font-weight: bolder;
}
.dropdown-content {
display: none;
position: absolute;
overflow: auto;
width: 100%;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
display: block;
text-align: center;
&:hover {
border-radius: unset;
color: white;
background: $secondary-neutral-color;
}
}
.dropdown:hover .dropdown-content {
display: block;
}
}
/*--------------------------------CONTENT------------------------------*/

View File

@ -149,15 +149,43 @@
{% if not popup %}
<nav>
<a href="{{ url('core:index') }}">{% trans %}Main{% endtrans %}</a>
<a href="{{ url('core:page', page_name='clubs') }}">{% trans %}Clubs{% endtrans %}</a>
<div class="dropdown">
<button class="dropbtn">{% trans %}Assocations & Clubs{% endtrans %}
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="/club/1/">{% trans %}The AE{% endtrans %}</a>
<a href="{{ url('core:page', page_name='clubs') }}">{% trans %}The Clubs of The AE{% endtrans %}</a>
<a href="/club/2/">{% trans %}The BDF{% endtrans %}</a>
<a href="/club/3/">{% trans %}The BDS{% endtrans %}</a>
</div>
</div>
<a href="{{ url('matmat:search_clear') }}">{% trans %}Matmatronch{% endtrans %}</a>
<a href="{{ url('core:page', page_name="Index") }}">{% trans %}Wiki{% endtrans %}</a>
<a href="{{ url('sas:main') }}">{% trans %}Pictures{% endtrans %}</a>
<a href="{{ url('forum:main') }}">{% trans %}Forum{% endtrans %}</a>
<a href="{{ url('core:page', "services") }}">{% trans %}Services{% endtrans %}</a>
<a href="{{ url('sas:main') }}">{% trans %}Gallery{% endtrans %}</a>
<a href="{{ url('eboutic:main') }}">{% trans %}Eboutic{% endtrans %}</a>
<div class="dropdown">
<button class="dropbtn">{% trans %}Services{% endtrans %}
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="/launderette">{% trans %}Launderette{% endtrans %}</a>
<a href="{{ url('eboutic:main') }}">{% trans %}E-Boutic{% endtrans %}</a>
<a href="{{ url('core:file_list') }}">{% trans %}Files{% endtrans %}</a>
<a href="https://ae2.utbm.fr/uvs/">{% trans %}Pedagogy{% endtrans %}</a>
<a href="{{ url('core:page', page_name="Index") }}">{% trans %}Wiki{% endtrans %}</a>
</div>
</div>
<a href="{{ url('core:page', page_name="partenaires")}}">{% trans %}Sponsors{% endtrans %}</a>
<a href="https://ae2.utbm.fr/article.php?name=docs:index">{% trans %}Help{% endtrans %}</a>
<div class="dropdown">
<button class="dropbtn">{% trans %}Help{% endtrans %}
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="{{ url('core:page', 'contacts') }}">{% trans %}Contacts{% endtrans %}</a>
<a href="https://ae2.utbm.fr/article.php?name=docs:index">{% trans %}Help{% endtrans %}</a>
</div>
</div>
</nav>
{% endif %}
{% endblock %}