PullDown erstellen für webseite?

Diskutiere PullDown erstellen für webseite? im Für Verirrte - Fragen zu JavaScript Bereich.
B

Bl4ck

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:


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
 
krgewb

krgewb

HTML:
<!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>
 
B

Bl4ck

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?
 
krgewb

krgewb

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.
 
B

Bl4ck

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 :)
 
B

Bl4ck

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 .

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

krgewb

Ich habe auch schon JavaScript in einer .php-Datei verwendet. Dazu habe ich es aber wie folgt eingebunden:
Java:
<script src="meineDatei.js"></script>
 
B

Bl4ck

Hm leider funktioniert es nicht... habe es so reingemacht:
HTML:
<script src="https://www.***.de/test.js"></script>
HTML:
<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:
<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>
Unbenannt-2.jpg
siehe Anhang... ach menno,...... :(
 
krgewb

krgewb

In der ersten Zeile steht:
HTML:
<html><style><body> {
Style und body müssen vertauscht werden.
Ich weiß aber nicht, ob der Fehler daran liegt.
 
B

Bl4ck

@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 :)
 
Thema: 

PullDown erstellen für webseite?

Passende Stellenanzeigen aus deiner Region:
Anzeige

Neue Themen

Anzeige

Anzeige
Oben