Hallo,
Hoffe ich bin hier im richtigen Thema,
ich habe ein Mega Menü mit HTML / Script was nicht so recht funktioniert bzw. nicht so ganz was ich möchte.
hier ist es momentan zusehen: http://test.mysiedler.de/
man geht mit der maus oben auf SpielerTreffpunkt und dann öffnet es sich, leider geht es hinter dem content am ende wie man sieht.
Ich möchte gerne, dass es sich erst öffnet wenn man klickt, statt mit der maus drüber fährt. und das rechts ein X zum closen des pull down ist.
auch sieht mann, dass durch den code die vorschau Bilder von den Themen extrem in die länge ziehen, warum dass so ist, weiß ich nicht. Wenn der Code raus ist, ist es nicht.
habe dies bei wordpress im admin panel in der Header.php geschrieben.
dies wäre der code
<html>
<head>
<style>
body {
margin: 0;
}
.navbar2 {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar2 a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown2 {
float: left;
overflow: hidden;
}
.dropdown2 .dropbtn2 {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
.navbar2 a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content2 {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 90%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content2 .header2 {
background: red;
padding: 3px;
color: white;
}
.dropdown2:hover .dropdown-content2 {
display: block;
}
/* Create three equal columns that floats next to each other */
.column2 {
float: left;
width: 33.33%;
padding: 10px;
background-color: #ccc;
height: 340px;
}
.column2 a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.column2 a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row2: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: 300px) {
.column2 {
width: 90%;
height: auto;
}
}
</style>
</head>
<body>
<div class="navbar2">
<div class="dropdown2">
<button class="dropbtn2" onclick="myFunction()">SpielerTreffpunkt.de
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content2">
<div class="header2">
</div>
<div class="row2">
<div class="column2">
<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="column2">
<h3>Infoseiten</h3>
<a href="#">Kontakt</a>
<a href="#">FAQ</a>
<a href="#">Impressum</a>
</div>
<div class="column2">
</div>
</div>
</div>
</div>
</div>
<script>// JavaScript Document/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown2").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn2')) {
var myDropdown = document.getElementById("myDropdown2");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}</script>
</body>
</html>
Alles anzeigen
Könnte mir bitte einer mit diesen Problemen helfen?
Die Demo davon, wie ich es mir eigentlich vorstelle ist hier zusehen: Klick mich
der Inhaber davon hat mir eigentlich dies gegeben und gesagt das ich es nutzen kann, aber leider komme ich damit überhaubt nicht klar Klick Hier
ich würde mich sehr sehr freuen, wenn mir einer beim umstellen des codes helfen könnte
DAnke