# PullDown erstellen für webseite?



## Bl4ck (15. Mai 2020)

Hallo,
Ich bin seid längerem dran, ein PullDown für meine seite zu erstellen... leider bisher ohne erfolg.
Nun habe ich auf dieser seite folgendes gesehen:






						TombRaider-Game.de
					

Topaktuelle & langjährige Tomb Raider-Seite zum Action-Adventure von Square Enix. Mit TR News, Fakten, Hilfe, Infos, Bildern, Videos, einem Forum uvm.




					www.tombraider-game.de
				




Oben in der leiste auf Global Gameport klicken und dann kommt das menü.
Genau sooo würde ich es gerne auf meiner Page einbauen.
Wie könnte ich das hinkriegen?
habe mir das bereits angeschaut: https://www.w3schools.com/howto/howto_js_dropdown.asp


und naja, komme leider einfach nicht zum erfolg das der Hintergrund über die ganze seite geht, also die leiste und dann dieses Pull DOwn menü..
Wenn sich es öffnet würde ich es gerne wie dort statt mit 3 Überschriften mit 2 Überschriften arbeiten.

Eventuell kann mir da ja einer helfen, dass wäre super danke..


Greetz


----------



## MoxxiManagarm (15. Mai 2020)

Ahhh, das hat einen Namen, aber ich komme gerade nicht drauf ._. Vielleicht fällt es mir wieder ein.. ^^


Edit: Ah habs - "Mega Menu" https://www.w3schools.com/howto/howto_css_mega_menu.asp


----------



## krgewb (15. Mai 2020)

```
<!DOCTYPE html>

<html>
    <head>

<style>
* {
    font-family: sans-serif;
}

body {
    margin: 0px;
    padding: 0px;
}

header {
    color: #FFF;
    background-color: #00A2E8;
    height: 100px;
    margin: 0px 0px 0px 0px;
}

header h1 {
    position: absolute;
    padding: 0px 0px 0px 165px;
    margin: 0px;
    line-height: 3em;
}

</style>

    </head>
    <body>
    
<header>
<h1><a class="link01" href="#" onclick="myFunction();">Dropdown &#9662;</a></h1>
</header>

<div hidden id="myDropdown" style="width:100%; height: 300px; background-color: gray; position: absolute;"></div>

<div>
Huhu
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Huhu 2
</div>

<script>
function myFunction() {
  var myDropdown = document.getElementById("myDropdown");
  if(myDropdown.hidden == true) {
    myDropdown.hidden = false;
  }
  else{
    myDropdown.hidden = true;
  }
}

window.onclick = function(e) {
  if (!e.target.matches('.link01')) {
  var myDropdown = document.getElementById("myDropdown");
    if (myDropdown.hidden == false) {
      myDropdown.hidden = true;
    }
  }
}
</script>

</body>
</html>
```


----------



## Bl4ck (16. Mai 2020)

Vielen dank für eure Hilfe,
Leider bin ich in HTML / java überhaubt nicht so drin.. deswegen frage ich es leider hier... sry wenn ich es so vorgekaut haben muss :/
Der COde sieht schon gut aus jetzt wäre nur die Frage... wie kriege ich dort wenn es aufklappt 2 Menüs rein? 
und in der Bar bevor man drauf klickt, ganze rechts noch die schrift mit Kontakt hin?

ich weiss , ist echt mies aber könnte mir da irgendwie einer waas zeigen / helfen?


----------



## MoxxiManagarm (16. Mai 2020)

Hast du dir mal meinen Link angeschaut?


----------



## krgewb (16. Mai 2020)

Auf der Seite, die MoxxiManagarm gepostet hat, gibt es den Button "Try it Yourself". Wenn du da draufklickst, erscheint eine Seite, bei der du links den Code siehst und rechts die Seite. Du kannst Änderungen im Code machen und wenn du auf "Run" klickst, siehst du das Ergebnis.


----------



## Bl4ck (16. Mai 2020)

Sry mein fehler .
So weit habe ich es denke ich.
Nun habe ich das problem, dass ich den code  html inkl dem <script> in eine header.php einfügen muss, damit dies dauerhaft angezeigt wird.
html klappt, aber script wird nicht ausgeführt.
Könnte mir einer sagen , ich da noch das Script ausführen kann?

Weil wenn ich nun mit der maus drüber gehe, passiert nichts bzw. klappt nicht auf


----------



## Bl4ck (17. Mai 2020)

Sry für meinen Doppel Post.
ich habe vom alten ersteller , oben der das Bsp.. erstellt hat, einen Link bekommen und er sagte ich kann dies nutzen .








						GitHub - GlobalGameport/Netzwerkleiste
					

Contribute to GlobalGameport/Netzwerkleiste development by creating an account on GitHub.




					github.com
				




Leider saagt mir das überhauabt nichts, da die .js datein natrülich nicht abgerufen werden können, weil eine HTML datei fehlt.
Kann mir in der sache einer helfen? Ich glaube das wäre die Lösung


----------



## krgewb (17. Mai 2020)

Ich habe auch schon JavaScript in einer .php-Datei verwendet. Dazu habe ich es aber wie folgt eingebunden:

```
<script src="meineDatei.js"></script>
```


----------



## Bl4ck (17. Mai 2020)

Hm leider funktioniert es nicht... habe es so reingemacht:

```
<script src="https://www.***.de/test.js"></script>
```


```
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial, Helvetica, sans-serif;
}

.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 {
     cursor: pointer;
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 100%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content .header {
  background: red;
  padding: 3px;
  color: white;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  background-color: #ccc;
  height: 350px;
}

.column a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.column a:hover {
  background-color: #ddd;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    height: auto;
  }
}
</style>
</head>
<body>

<div class="navbar">

  <div class="dropdown">
    <button class="dropbtn" onclick="myFunction()">SpielerTreffpunkt.de
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <div class="header">
      </div> 
      <div class="row">
        <div class="column">
          <h3>Aktuelle Games</h3>
          <a href="#">Cyberpunk 2077</a>
          <a href="#">Apex Legends</a>
          <a href="#">Call Of Duty</a>
          <a href="#">Anno 1800</a>
          <a href="#">Formel 1 2020</a>
        </div>
        <div class="column">
          <h3>Infoseiten</h3>
          <a href="#">Kontakt</a>
          <a href="#">FAQ</a>
          <a href="#">Impressum</a>
        </div>
                  <div class="column">
        </div>
      </div>
    </div>
  </div>
</div>




<script src="https://www.mysiedler.de/test.js"></script>



</body>
</html>
```

leider tut sich da nichts 
Ich habe nun auch eine CSS version gefunden... aber die macht mir auch probleme.... die navigation schaut einfach durch das Drop down durch....

```
<html><style><body> {

}

* {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  box-sizing: border-box;
}

nav2 {
  position: absolute;
  width: 100%;
  background: #2a2a2a;
    height: 58px;
  font-size: 16px;
  box-shadow: 0 0 10px rgba(0,0,0,1);
}

/* first stage */

nav2 > ul {
  position: relative;
  display: flex;
  justify-content: center;
  width: 1200px;
  margin: 0 auto;
  padding: 0;
}

nav2 a {
  display: block;
  color: #fff;
  text-decoration: none;
}

nav2 ul li {
  color: #fff;
  list-style: none;
  transition: 0.5s;
}

nav2 > ul > li > a {
  padding: 15px 25px;
}

nav2 ul > li.submenu > a:after {
  position: relative;
  float: right;
  content: '';
  margin-left: 10px;
  margin-top: 8px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  border-bottom: 5px solid transparent;
}

nav2 ul > li.submenu:hover > a:after {
  margin-top: 2px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid #fff;
}

nav2 > ul > li:hover {
  background: #4096ee;
}

/* second stage (the mega-menu) */

nav2 ul.megamenu2 {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  width: 1200px;
  top: -9999px;
  left: 0;
  padding: 40px 40px 0 40px;
  background: #fff;
  text-align: left;
  border-top: 5px solid #4096ee;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
  z-index: 1;
}

nav2 ul li:hover ul.megamenu2 {
  top: 100%;
}

/* third stage (child-menus in the mega-menu) */

nav2 ul.megamenu2 ul {
  width: 25%;
  margin-bottom: 40px;
  color: #000;
  box-shadow: none;
}

nav ul.megamenu2 h4 {
  margin-bottom: 15px;
  text-transform: uppercase;
}

nav2 ul.megamenu2 ul li {
  display: block;
}

nav2 ul.megamenu2 ul li a {
  margin-top: 10px;
  transition: 0.5s;
  color: #000;
}

nav2 ul.megamenu2 ul li a:hover {
  color: #4096ee;
}</style>

<nav2>
  <ul>
    <li><a href="#">Home</a></li>
    <li class="submenu"><a href="#" title="Unser Produktsortiment">Produkte</a>
      <ul class="megamenu2">
        <ul>
          <h4>Arbeitsspeicher</h4>
          <li><a href="#">DDR</a></li>
          <li><a href="#">DDR2</a></li>
          <li><a href="#">DDR3</a></li>
          <li><a href="#">DDR4</a></li>
          <li><a href="#">Notebookspeicher</a></li>
          <li><a href="#">Sonstiger Speicher</a></li>
        </ul>
        <ul>
          <h4>Festplatten</h4>
          <li><a href="#">Interne Festplatten</a></li>
          <li><a href="#">Externe Festplatten</a></li>
          <li><a href="#">SSD (Solid State Drive)</a></li>
        </ul>
        <ul>
          <h4>Gehäuse und Netzteile</h4>
          <li><a href="#">PC-Gehäuse</a></li>
          <li><a href="#">Festplattengehäuse</a></li>
          <li><a href="#">Netzteile</a></li>
          <li><a href="#">Kühler</a></li>
          <li><a href="#">Zubehör</a></li>
        </ul>
        <ul>
          <h4>Grafikkarten</h4>
          <li><a href="#">AMD</a></li>
          <li><a href="#">Nvidia</a></li>
          <li><a href="#">Sonstige</a></li>
          <li><a href="#">Kühler</a></li>
          <li><a href="#">Zubehör</a></li>
        </ul>
      </ul>
    </li>
    <li><a href="#">Über uns</a></li>
    <li><a href="#">Kontakt</a></li>
    <li><a href="#">Impressum</a></li>
  </ul>
</nav></body></html>
```

siehe Anhang... ach menno,......


----------



## krgewb (17. Mai 2020)

In der ersten Zeile steht:

```
<html><style><body> {
```
Style und body müssen vertauscht werden.
Ich weiß aber nicht, ob der Fehler daran liegt.


----------



## thecain (17. Mai 2020)

krgewb hat gesagt.:


> Style und body müssen vertauscht werden


Nein...

Style müsste im <head> stehen...


----------



## Bl4ck (18. Mai 2020)

@krgewb , nun funktioniert es ... frag mich nicht warum.. ich habe das genaze Theme neu installiert und nun geht es ohne problem xD
Danke für deine und eure Hilfe


----------

