Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 04.02.2024, 20:55
joergi joergi ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.06.2011
Beiträge: 25
joergi befindet sich auf einem aufstrebenden Ast
Standard Submenü in mobilie Menü einbauen

Hi,

vor einiger Zeit habe ich einen CSS Script gefunden, mit dessen Hilfe man ein Dropdown Menü z.B. für mobile Geräte erstellen konnte. Ich habe den Code dann an meine Bedürfnisse angepasst. Alles funktioniert auch soweit einwandfrei. Da aber das Logo und die Menüzeile fixiert sind, darf das Menü nur eine bestimmte Anzahl von Einträgen besitzen. Ansonsten würden die restlichen Einträge je nach Bildschirmhöhe nicht mehr angezeigt werden

Daher dachte ich mir, hier Untermenüpunkte einzubauen, in denen jeweils die Menüeinträge d1-d3 und e1-e3 zu finden sind. Ich habe aber keine Idee, wie ich das ganze umschreiben muss Könnt Ihr mir helfen? Das ganze sollte nach Möglichkeit kein Javascript enthalten!

Vielen Dank im voraus

HTML-Code:
<!DOCTYPE html>
<style type="text/css">
.logo
{
background-position: bottom;
width:100%;
white-space: nowrap;
height:130px;
color: #0066FF;
text-shadow: 3px 3px 5px #aba4a4;
font-size:52px;
background-size:contain;
background-image: url(logo.png);
background-repeat:repeat-x;
}


.mobile-menu
{
font-size:1.8em;
display:block;
width:100%;
text-align:center;
position: relative;
z-index: 19999;
}

.mobile-menu ul
{
margin: 10 auto;
padding-left:0;
text-align:center;
max-width:600px;
word-wrap: break-all;
position: absolute;
background: #0066FF;
}

.mobile-menu li
{
display:inline-block;
border: 5px ridge #ffffff;
background: #3300FF;
margin-top:2px;
margin-bottom:2px;
max-width:95%;
}

.mobile-menu li a
{
display:block;
min-width:140px;
text-align: center;
color: #ffffff;
text-decoration: none;
padding-top: 10px;
padding-bottom: 10px;
}

.mobile-menu .show-menu
{
text-decoration: none;
color: #ffffff;
text-align: center;
padding: 10px 15px;
display: none;
cursor: pointer;
text-transform: uppercase;
}

.mobile-menu .show-menu span
{
padding-left: 35px;
}

.mobile-menu input[type=checkbox]
{
display: none;
}

.mobile-menu input[type=checkbox]:checked ~ #menu
{
display: block;
}

.mobile-menu .lines
{
margin-top:15px;
border-bottom: 25px double #f8f8f8;
border-top: 9px solid #f8f8f8;
height: 8px;
width:50px;
padding-right:15px;
float: right;
}

.mobile-menu ul
{
position: static;
display: none;
}

.mobile-menu ul li, .mobile-menu li a
{
width: 100%;
}

.mobile-menu .show-menu
{
display:block;
}

html, body {margin:0; padding:0; height:100%;}
</style>
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-15">
</head>
<body>
<div style="position:fixed; width:100%;height:100%">
<div align="center" class="logo">
Logo
<div style="font-size:40px; color: #000000; white-space: nowrap;">Testseite</div>
 </div>

<div style="position: relative; margin-bottom: 30px; width: 100%; height: 95px; background-color: #0066FF; color: #ffffff; border:1px solid #000000;">
<span style="position: absolute; left: 10px; top:15px;font-size:50px; color: #ffffff;">Text</span>

<nav class="mobile-menu">
<label for="show-menu" class="show-menu"><div class="lines"></div><div style="float:right; margin-right:15px;">Men&Uuml;</div></label>
	<input type="checkbox" id="show-menu">
		<ul id="menu">
		<li><a href="a.php">Seite a</a></li>
		<li><a href="b.php">Seite b</a></li>
		<li><a href="c.php">Seite c</a></li>
		<li><a href="d1.php">Seite d1</a></li>
		<li><a href="d2.php">Seite d2</a></li>
        <li><a href="d3.php">Seite d3</a></li>
        <li><a href="e1.php">Seite e1</a></li>
        <li><a href="e2.php">Seite e2</a></li>
        <li><a href="e3.php">Seite e3</a></li>
        <li><a href="f.php">Seite f</a></li>
        <li><a href="g.php">Seite g</a></li>
        <li><a href="h.php">Seite h</a></li>
	</ul>
</nav>
</div>
</div>

<div style="padding-top:500px;">Hier</div>

<div style="padding-top:500px;">variabler</div>

<div style="padding-top:500px;padding-bottom:500px;">Text</div>

</body>
</html>

Geändert von joergi (04.02.2024 um 22:13 Uhr)
Mit Zitat antworten
Sponsored Links