PullDown erstellen für webseite?

B

Bl4ck

Mitglied
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:

www.tombraider-game.de

Tomb Raider (2013) » Spiele-Review zum Neuanfang der berühmten Archäologin

Spiele Review: "Tomb Raider (2013)" ✓ Neuauflage für Lara Croft Fans ✓ Gameplay ⏩ Den Test zum PC-Spiel "Tomb Raider" hier lesen!
www.tombraider-game.de 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
 
krgewb

krgewb

Top Contributor
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

Mitglied
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

Top Contributor
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

Mitglied
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

Mitglied
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.com

GitHub - GlobalGameport/Netzwerkleiste

Contribute to GlobalGameport/Netzwerkleiste development by creating an account on GitHub.
github.com 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

krgewb

Top Contributor
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

Mitglied
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

Top Contributor
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

Mitglied
@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 :)
 
Ähnliche Java Themen
  Titel Forum Antworten Datum
M Pulldown Menüs mit doppelten Werten Angular, React, JQuery - Fragen zu JavaScript 2
A problem mit pulldown Angular, React, JQuery - Fragen zu JavaScript 3
B Options erstellen Angular, React, JQuery - Fragen zu JavaScript 2
N Diagramme mit Canvas erstellen Angular, React, JQuery - Fragen zu JavaScript 1
C Rechner erstellen Angular, React, JQuery - Fragen zu JavaScript 58
d.lumpi in javascript input erstellen Angular, React, JQuery - Fragen zu JavaScript 4
Martob282 Belegnummerierungsstempel mit JavaScript erstellen Angular, React, JQuery - Fragen zu JavaScript 34
N Überprüfungsbutton für ein Eingabeformular erstellen Angular, React, JQuery - Fragen zu JavaScript 16
krgewb Datei lesen und Datei erstellen Angular, React, JQuery - Fragen zu JavaScript 3
S Live-Statistik erstellen Angular, React, JQuery - Fragen zu JavaScript 4
F Druckversion erstellen / Ergebnisse in neuem Fenster Angular, React, JQuery - Fragen zu JavaScript 2
I Prozentbalken erstellen Angular, React, JQuery - Fragen zu JavaScript 11
S Mit Java oder mit JavaScript Spiele erstellen Angular, React, JQuery - Fragen zu JavaScript 15
D Wie JavaScript Projekt in Eclipse erstellen? Angular, React, JQuery - Fragen zu JavaScript 3
S Hochzeitspuzzle erstellen? Angular, React, JQuery - Fragen zu JavaScript 2
F feld erstellen Angular, React, JQuery - Fragen zu JavaScript 14
B Javascript Tutorial für DOM Manipulationen? Angular, React, JQuery - Fragen zu JavaScript 0
R Die Typisierung Service[] ergibt für mich keinen Sinn Angular, React, JQuery - Fragen zu JavaScript 5
Q Typsichers Binding für matSortDirection Angular, React, JQuery - Fragen zu JavaScript 10
N Cookies setzen für Verzeichnis Angular, React, JQuery - Fragen zu JavaScript 4
X NegaMax für TicTacToe in JS gewinnt nicht... Angular, React, JQuery - Fragen zu JavaScript 11
P Bildschirmtastatur für Spiele Angular, React, JQuery - Fragen zu JavaScript 6
M Mit Ajax Daten als Eingabe für Dyngraph erzeugen Angular, React, JQuery - Fragen zu JavaScript 6
L [JavaScript] Mehrere Variablen für Live-Suche in MySql-DB Angular, React, JQuery - Fragen zu JavaScript 0
A Hilfe für guten Zweck Angular, React, JQuery - Fragen zu JavaScript 6
J Lese Webseite aus für LinkPreview Angular, React, JQuery - Fragen zu JavaScript 1
A Script für Benachrichtigung Angular, React, JQuery - Fragen zu JavaScript 9
S Suche Lösung für einen Slider mit Textverlinkung Angular, React, JQuery - Fragen zu JavaScript 2
L Suche D3 Tutorial (speziell für Sunburst-Darstellung...) Angular, React, JQuery - Fragen zu JavaScript 2
H Javascript für wordpress "open new window" Angular, React, JQuery - Fragen zu JavaScript 1
N JavaScript für Touch Devices bei DropDown Menü Angular, React, JQuery - Fragen zu JavaScript 4
F Schnellen Browser für HTML mit JS drin. Angular, React, JQuery - Fragen zu JavaScript 6
Fab1 [SUCHE] JavaScript Buch für Umsteiger Angular, React, JQuery - Fragen zu JavaScript 4
K Webapp für Iphone Safari Browser und Links Angular, React, JQuery - Fragen zu JavaScript 6
H HTML5 basierter Client für Webkartendienste auf Smartphones Angular, React, JQuery - Fragen zu JavaScript 2
F Dropdownmenü für JavaScript Angular, React, JQuery - Fragen zu JavaScript 5
S OnKlick für alle Objekte gleicher Art Angular, React, JQuery - Fragen zu JavaScript 17
J Dynamic Markers für POIs aus Postgresdatenbank Angular, React, JQuery - Fragen zu JavaScript 8
H Gadgeterweitung für Kostal Piko Angular, React, JQuery - Fragen zu JavaScript 5
R Anleitung für einen Konfetti Regen Angular, React, JQuery - Fragen zu JavaScript 9
D Kontrollkästchen/Checkbox automatisch aktivieren ! (für Profis) JavaScript Angular, React, JQuery - Fragen zu JavaScript 4
S Javascript für Teamvergabe gesucht. Angular, React, JQuery - Fragen zu JavaScript 4
S Skript für Greasemonkey Angular, React, JQuery - Fragen zu JavaScript 3
C Play und Stop-Error für Musik Angular, React, JQuery - Fragen zu JavaScript 4
A Programmierer für "kleines" Javaprogramm gesucht Angular, React, JQuery - Fragen zu JavaScript 2
G finde Einstellmöglichkeiten für Menue nicht. Angular, React, JQuery - Fragen zu JavaScript 2
M Hilfe gesucht für ein Projekt Angular, React, JQuery - Fragen zu JavaScript 1
K Suche Scrollscript für Objekte Angular, React, JQuery - Fragen zu JavaScript 3
E Fragen zu java Navigation für Internetseite Angular, React, JQuery - Fragen zu JavaScript 2
T Höhe und Breite übergeben für IE! Angular, React, JQuery - Fragen zu JavaScript 2
L Dauerlaufzeile mit Fotos für html Angular, React, JQuery - Fragen zu JavaScript 2
B Einen Timer für Windows Angular, React, JQuery - Fragen zu JavaScript 4
M Script für Namen? Angular, React, JQuery - Fragen zu JavaScript 5
D Inputfeld für Preiseingabe Angular, React, JQuery - Fragen zu JavaScript 6
K Fragen für Praktikum-aber keine Ahnung! Angular, React, JQuery - Fragen zu JavaScript 4
B Zähler für Eingabefeld Angular, React, JQuery - Fragen zu JavaScript 5
D 5 € Musicload Gutschein für Antwort: Formular mit JavaScript Angular, React, JQuery - Fragen zu JavaScript 10
N Java Refresh-Script für Java-Newb Angular, React, JQuery - Fragen zu JavaScript 4
K Bild soll nach 5 Sekunden für 5 Sekunden erscheinen Angular, React, JQuery - Fragen zu JavaScript 5
S Skript für Bannerwechsel Angular, React, JQuery - Fragen zu JavaScript 3
N Java script für detailierten Text anzeigen gesucht Angular, React, JQuery - Fragen zu JavaScript 4
A Timeoutfunktion für JavaScript Angular, React, JQuery - Fragen zu JavaScript 2

Ähnliche Java Themen

Aktuelle Jobs

Neue Themen


Oben