1. Wenn ich "Bildschirmgröße testen" wähle, funktioniert das Dropdownmenü nicht mehr. Ist das normal?
2. Ich habe auch versucht, in der Fußleiste ein Dropdown Menü einzufügen, das geht gar nicht. Da es die Fußleiste ist, kann wohl nichts nach unten klappen (owohl ich diese Leiste nicht als footer definiert habe ... oder doch?). Gibt es da eine andere Möglichkeit?
So, jetzt muss ich versuchen, den richtigen Code anzuhängen, damit Sirius3 nicht schimpft:
Mein Template:
Code: Alles auswählen
{% extends 'layout.html' %}
{% load static %}
{% block css_files %}
<link rel="stylesheet" href="{% static 'core/index.css' %}">
{% endblock %}
{% block content %}
{% include "includes/header.html" %}
...
{% include "includes/footer.html" %}
{% endblock %}
Code: Alles auswählen
{% load static %}
{% block css_files %}
<link rel="stylesheet" href="{% static 'core/includes/header.css' %}">
{% endblock %}
<body>
<div class="navbar">
<a href="{% url 'kategorien' %}">⌂ Home</a>
<a href="{% url 'uebersicht' %}">Aufgaben</a>
<a href="{% url 'protokoll' %}">Protokoll</a>
<div class="dropdown">
<button class="dropbtn">
{% if user.is_authenticated %}
Hallo {{ user.username }}!
{% else %}
<a href="{% url 'einloggen' %}">Anmelden</a>
{% endif %}
</button>
<div class="dropdown-content">
<a href="{% url 'password_reset' %}">Passwort zurücksetzen</a>
<a href="#">Einstellungen</a>
<a href="{% url 'logout' %}">Abmelden</a>
</div>
</div>
</div>
und noch layout.html:
Code: Alles auswählen
<!DOCTYPE html>
{% load static %}
<html lang="de">
<head>
<title>Rechentrainer im Web - Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{% static 'styles.css' %}">
{% block css_files %}{% endblock %}
</head>
<body>
<div class="container">
{% block content %}{% endblock %}
</div>
</body>
</html>
Code: Alles auswählen
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
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;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}