HTML wo einbauen für Dauer Anzeige?

BlackBurn

Hallo,
ich hätte eine frage, ich habe mir nun ein Mega Menü zusammen geabut.
DIes ist nun ein kompletter HTML code inkl. css drin.

Nur wo, müsste ich diesen nun einfügen , damit der Menü an oberster stelle immer angezeigt wird?

Bsp: https://www.tombraider-game.de/

so ein Menü ganz ganz oben, evntuell kann mir einer helfen, wo ich dies einfügen müsste..

danke

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

maxe

das müsste dann in die header.php deines (Child)Theme.

BlackBurn

danke, nur habe ich nun ein weiteres problem xD.
Dieser HTML code beinhaltet ein Dropdown menü also einen <script> code, da php dies nicht ausführen kann funktioniert dieses Drop Menü leider nicht.
Würde der <script> </script> auch irgendwie in php funktionieren?

maxe

Script funktioniert genauso in der header.php, dort steht ja auch HTML drin.

BlackBurn

Nein leider nicht, wenn ich nun mit der maus drüber fahre, was sich aufklappen soll, passiert dort nichts mehr

HTML

<!DOCTYPE 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>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}


// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
  if (!e.target.matches('.dropbtn')) {
  var myDropdown = document.getElementById("myDropdown");
    if (myDropdown.classList.contains('show')) {
      myDropdown.classList.remove('show');
    }
  }
}
</script>
</body>
</html>

Alles anzeigen

BlackBurn

Sry für doppel post , ich habe nun eine CSS lösung gefunden. Dies ist auch ganz ok ABER habe nun ein problem.
Wenn ich über den Drop gehe, öffnet sich sich wie gewollt das Dop Menü aber leider springt die TOP Bar , Menü und icons durch dieses Drop in durch.,..

wie kann ich das beheben?

Dies habe ich in die header.php kopiert.

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>

Alles anzeigen

SirEctor

Dann braucht die Topbar einen höheren z-index

Willkommen! Melden Sie sich an oder registrieren Sie sich.

HTML wo einbauen für Dauer Anzeige?

Jetzt mitmachen!