Hallo Forums-Mitglieder,
ich habe ein Dropdown-Menü mittels Checkbox-Hack erstellt und stehe gerade mächtig auf dem Schlauch.
Wie kann ich meinen Home-Button gestalten, sodass nicht nur der Link darin klickbar ist, sondern der gesamte Button.
Und, dass dieser "Home"-Button die selbe Größe besitzt, wie die Buttons mit dem Dropwdownmenü?
Ich habe es mit:
display: block;
width: xy px;
height: xy px;
auf mein a-Element ausprobiert aber das funktioniert nicht wirklich und zusätzlich verhält sich mein Home-Button dann ja völlig anders wie meine anderen Buttons der 1. Menüebene.
Wie bekomme ich in meinem Fall den Homebutton mit dem Link auf der gesamten Fläche klickbar?
Leider zerschießt es hier den Code zu einem unübersichtlichen Block, wenn ich die CSS und HTMl Auszeichnungen verwende, ich poste deshalb direkt meinen Code:
CSS:
/*Reset Abstände*/
*{
padding:0;
margin:0;
}
/*Navigationsmenü*/
/*Abstand Navigationsmenü unten zum Rest*/
nav{
padding-bottom:100px;
}
/*Navigationsmenü horizontal */
nav ul li{
float:left;
}
nav ul li{
margin-right:20px;}
/*Listenpunkte entfernen*/
nav li{
list-style:none;
}
/*Zweite Menüebene*/
ul ul > li {
list-style:none;
clear:left;
}
/*Zweite Menüebene Abstand angleichen*/
ul ul{
padding: 0;
}
/*Checkbox-Hack 1. Menüebene 2. Menüebene einblenden bei Klick*/
/*Checkbox ausblenden*/
input[type=checkbox]{
display: none;
}
/*2. Menüebene ausblenden*/
ul ul{
display: none;
}
/*2. Menüebene bei Klick einblenden*/
input[type=checkbox]:checked ~ ul {
display: block
}
/*2. Menüebene soll bei Klick andere Ebenen nicht auseinanderdrücken*/
ul ul{
position:absolute;
}
/*Contentbereich*/
section{
clear:left;
display:block
}
h1{
}
/*Home-Button*/
.button{
/*Maximale Breite des Buttons bestimmen; Button wird bei display flex (Zentrierung Text) automatisch auf maximal gestreckt*/
max-width:200px;
/*Innenabstand des Buttons bestimmen*/
padding:10px 20px;
/*Hintergrundfarbe des Buttons definieren*/
background-color: #9E9D24;
/*Textfarbe Button*/
color:#fff;
/*Text im Button soll mittig erscheinen*/
display: flex;
align-items: center;
justify-content: center;
/*Handsymbol als Coursur*/
/*cursor:hand;*/
}
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Navigationsmenü Dropdown mit CSS Checkboxhack </title>
<meta name="description" content="">
<!-- style -->
<style type="text/css">
</style>
</head>
<body>
<!--Navigationsmenü-->
<nav>
<ul>
<li class="button home"><a href="">Home</a></li>
<li>
<input type="checkbox" id="checkbox_toggle_first1">
<label for="checkbox_toggle_first1" class="button">Seite1</label>
<ul>
<li><a href="">Unterseite 1 zu 1</a></li>
<li><a href="">Unterseite 2 zu 1</a></li>
</ul>
</li>
<li>
<input type="checkbox" id="checkbox_toggle_first2">
<label for="checkbox_toggle_first2" class="button">Seite 2</label>
<ul>
<li><a href="">Unterseite 1 zu 2</a></li>
<li><a href="">Unterseite 2 zu 2</a></li>
</ul>
</li>
</ul>
</nav>
<section>
<header>
<h1>Testseite zur Navigation</h1>
<p>Horizontales Dropdownmenü mit Checkbox-Hack</p>
</header>
</section>
<footer>
<p>Einen Footer gibt es auch.</p>
</footer>
<!-- scripts -->
</body>
</html>