html / css navbar und dropdown menü?

2 Antworten

Allgemein: Sehr umständliche Umsetzung, JavaScript ist hier nicht Notwendig, Kriegt man so auch mit CSS hin und mit ner minimalistischerem HTML, aber ich weiß ja nicht ob es in der Form sein Muss.. :P

Fehler: die Position des DIVs, welches durch display:block; sichtbar gemacht wird ist relativ, weswegen der gesamte <nav> in der höhe beeinflusst wird. Gefixt wird das durch position:absolute; auf den <div>, und zusätzlich muss man hier den overflow:hidden des <nav>s wegmachen, da es sonst nicht Angezeigt wird.

Wie gesagt, es ist nicht Optimal, aber wenn du den Code fixen willst ist hier der CSS QuickFix:

nav {
  /* overflow: hidden; */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #383638;
  /* overflow: hidden; */
  list-style-type: none;
  display: block;
}
li {
  float: left;
  display: block;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: #008a8a;
}
.active {
  background-color: #025c6c;
}
#socialmedia_dropdown {
  display: none;
  position: absolute;
  background-color: #383638;
}
.nav_right {
  float: right;
}

Danke hat mir weiter geholfen. Hast du vielleicht eine Idee, wie ich das Dropdown Menü genauso lang machen kann wie "Social Media". Weil es sieht bisschen komisch aus, wenn die Dropdown Felder unter Social Media kleiner sind als Social Media selber.

0
@yam1811

Das in die CSS ergänzen. <li> relativ setzen, sodass sich die 100% des <div>s auf die Breite des <li>s bezieht.

li {  
  float: left;
  display: block;
    position: relative; /* Ergänzen */
}


#socialmedia_dropdown {
  display: none;
  position: absolute;
  background-color: #383638;
    width: 100%; /* Ergänzen */
}
0

ty 👌

0

hier nochmal der html code, da der gerade nicht ganz in der Quelltext box drinne ist:_

<!DOCTYPE html>
<!-- Dieser Teil ist für ALLE html Seiten vorgesehen -->
<html lang="de">
  <head>
    <title>
      Projekt-Z3ro.de
    </title>
    <meta charset="utf-8">
    <link href="style.css" rel="stylesheet">
    <script href="scripts.js"></script>
  </head>
  <body>
    <nav>
      <li><a href="#" class="active">Projekt-Z3ro</a></li>
        <span><li id="dropdown">
          <a id="socialmedia" onmouseover="socialmedia()" onmouseout="socialmediaout()" href="#">Social Media</a>
          <div id="socialmedia_dropdown">
            <a onmouseover="socialmedia()" onmouseout="socialmediaout()" href="#">Twitter</a>
            <a onmouseover="socialmedia()" onmouseout="socialmediaout()" href="#">YouTube</a>
          </div></li></span>
          <li><a href="#">Impressum</a></li>
          <li class="nav_right"><a href="#" class="register">Registrieren</a></li>
          <li class="nav_right"><a href="#" class="login">Einloggen</a></li>
    </nav>


    <script>
    function socialmedia() {
      document.getElementById("socialmedia_dropdown").style.display = "block";
    }
    function socialmediaout() {
      document.getElementById("socialmedia_dropdown").style.display = "none";
    }
    </script>
<!-- Dieser Teil ist für ALLE html Seiten vorgesehen -->
  </body>
</html>


Was möchtest Du wissen?