mehmet_b_90
Neues Mitglied
Hallo zusammen,
ich erstelle gerade für meinen Vater eine Website. Dabei möchte ich ein Toggle-Menü, für die mobile Ansicht, in die Navigation einbauen. Das <ul>-Element lässt sich jedoch mit height in CSS nicht beinflussen. Denn es soll, bevor man auf den Icon klickt nicht sichtbar seien.
Bitte verzeiht mir, ich bin noch am Anfang des Webdesigns.
Was mache ich falsch?
Mit freundlichen Grüßen
mehmet_b_90
ich erstelle gerade für meinen Vater eine Website. Dabei möchte ich ein Toggle-Menü, für die mobile Ansicht, in die Navigation einbauen. Das <ul>-Element lässt sich jedoch mit height in CSS nicht beinflussen. Denn es soll, bevor man auf den Icon klickt nicht sichtbar seien.
Bitte verzeiht mir, ich bin noch am Anfang des Webdesigns.
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width:device-width, initial-scale=1.0">
<title>Änderungsschneiderei-Lauingen</title>
<meta name="description" content="Bei uns wird Ihre Kleidung maßgefertigt.">
<link rel="stylesheet" type="text/css" href="css/general.css">
</head>
<body>
<header>
<a id="logo" href="index.html"><h2>Änderungsschneiderei-Lauingen</h2></a>
<nav id="nav">
<a class="nav-button" id="nav-open" href="#nav"><img src="image/menu.svg"></a>
<a class="nav-button" id="nav-close" href="#close"><img src="image/menu.svg"></a>
<ul id="nav-list">
<li><a href="index.html">Startseite</a></li>
<li><a href="prices.html">Preise</a></li>
<li><a href="contact.php">Kontakt</a></li>
</ul>
</nav>
</header>
<main>
<article>
</article>
<aside>
</aside>
</main>
<footer>
</footer>
</body>
</html>
CSS:
* {
box-sizing: border-box;
padding: 0rem;
margin: 0rem;
}
body {
font-family: Arial, sans-serif;
}
img {
max-width: 100%;
height: auto;
}
/* ---------- Header ---------- */
header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #525252;
height: 3rem;
}
#logo {
margin-left: 1rem;
text-decoration: none;
color: white;
font-size: 0.6rem;
}
/* ---------- Navigation ---------- */
.nav-button {
display: inline-block;
}
.nav-button img {
height: 3rem;
padding: 0.5rem;
}
#nav-close {
display: none;
}
#nav-list {
width: 100%;
height: 0rem;
left: 0rem;
position: absolute;
transition: height 0.3s;
}
#nav-list li {
padding: 0.5rem;
font-weight: 600;
list-style: none;
text-align: center;
background-color: #525252;
border-bottom: solid 1px white;
}
#nav-list a {
display: inline-block;
width: 100%;
text-decoration: none;
color: white;
}
#nav-list li:hover {
background-color: #888888;
}
#nav:target #nav-list {
height: 5rem;
}
/* ---------- Main ---------- */
main {
width: 97%;
margin: 0.5rem auto;
box-shadow: 0rem 0rem 1rem -0.4rem black;
}
Was mache ich falsch?
Mit freundlichen Grüßen
mehmet_b_90
Zuletzt bearbeitet: