Probleme mit Dropdown Menüs in der Navleiste

Pitwheazle · Montag 12. Dezember 2022, 18:05

Ich habe es geschafft, in der Navleiste ein Dropdownmenü zu erzeugen. Das funktioniert sogar ... aber noch nicht ganz. Es gibt zwei Probleme:
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 %}

header.html:

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' %}">&#8962 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>

(... der footer ist ziemlich genauso)

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>

header.css:

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;
}

__blackjack__ · Montag 12. Dezember 2022, 19:38

So etwas wie Kopf und Fusszeilen packt man eigentlich in das Basis-Layout und inkludiert das nicht überall in den Inhaltsblock von den abgeleiteten Vorlagen.

Whitie · Montag 12. Dezember 2022, 19:47

Auf den ersten Blick würde ich sagen, du überschreibst dir den "block ccs_files" ein paar mal. Die werden nicht magisch dann alle geladen. Schau doch mal im Browser auf der fertigen Seite in den Quelltext (oder poste ihn hier). Du solltest auch nicht für jede Template-Datei eine eigene CSS-Datei haben. Schreib alles in eine.
Ansonsten schließe ich mich Blackjack an.

Viele Grüße
Whitie