zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Submenü in mobilie Menü einbauen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.02.2024, 20:55
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
  #2 (permalink)  
Alt 05.02.2024, 14:50
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Wieso darf es kein Javascript enthalten? Ist das lediglich als Übrung für dich gedacht?

Ansonsten funktioniert das geteilte Menü bei mir schon nicht richtig, wenn der Bildschirm nicht hoch genug ist, werden auch Einträge abgeschnitten.

Aber irgendwie kann man das vielleicht mit einer maximalen höhe und overflow lösen.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.02.2024, 18:24
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

Danke für Deine Antwort. Sollte jemand Javascript deaktiviert haben, soll das Menü trotzdem funktionieren. Daher dachte ich an reines CSS. Ich würde mich ja auch zufriedengeben, wenn sich ein Untermenü nur beim darüberfahren mit der Maus über einen Hauptmenüpunkt öffnen würde.

Bei der Suche nach einer Lösung stieß ich auf die Seite https://css3menu.com/. Mit der Software soll man entsprechende Menüs gestalten können. Wenn ich die Software jedoch installieren möchte, wird diese aus Sicherheitsgründen von Windows 10 blockiert. Schade, die Demos sahen sehr vielversprechend aus.

Ich weiß jetzt einfach nicht, was ich machen soll!!!!
Mit Zitat antworten
  #4 (permalink)  
Alt 06.02.2024, 15:43
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Das ist sehr löblich, jedoch: Wie viele deiner Besucher haben denn JS deaktiviert? Heutzutage hat das fast keiner.

Vor mehr als 10 Jahren sah das bestimmt anders aus, da war JS auch noch mehr ein Sicherheitsproblem.

Man kann einige Sachen auch nur mit CSS umsetzen, jedoch sind diese dann nicht unbedingt Accessible.

Die von dir verlinkte Seite hat ja auch ein Beispiel wie das funktioniert und aussieht, das kannst du dir mit CSS + HTML copy-pasten.
Aber es sieht aus, als ob es 10 Jahre alt ist und nicht mehr entwickelt wird. Da wird es schon gute Gründe haben warum das blockiert wird. Ich würde das nicht empfehlen.

Ich schlage vor, dass du das Menü mit JS umsetzt, bräuchtest du dafür Hilfe?
Mit Zitat antworten
  #5 (permalink)  
Alt 06.02.2024, 20:44
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

Ja, das wäre toll wenn Du mir helfen könntest. Dann mache ich das eben mit JS

Ich habe übrigens auf der Seite
https://codepen.io/nrauf90/pen/dajxQQ
einen script gefunden, der ein Menü mit Untermenüs darstellt. Das ganze funktioniert ja auch soweit. Jedoch funktionieren etwaige Hyperlinks welche man in den Submenüs einbaut, nicht. Ich kann mir nicht erklären woran das liegen könnte. Mit keinem Browser hatte ich Erfolg

Ich hatte mir auch schon überlegt, das man nur das Auswahlmenü hoch und unter runterscrollen könnte. So wie bei der mobilen App von der Zeitschrift Focus. Nur bekomme ich es nicht hin, nur das Auswahlmenü zu scrollen und den Menükopf weiterhin zu fxieren

Geändert von joergi (06.02.2024 um 20:49 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 08.02.2024, 14:12
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Um das mit Js umzusetzen brauchst du einen button, der das menü ein- und ausblendet (statt deiner checkbox)

Diesem Button fügst du mittels addEventListener einen event listener für den click hinzu.
Eventuell bietet es sich für dich an, den Status of das Menü offen oder geschlossen ist, in einem data attribut am Button zu speichern.

Dann setzt du, je nachdem ob das menü geöffnet oder geschlossen wird, CSS klassen, die das aussehen steuern.

Das selbe geht auch für die Untermenüpunkte, die kannst du dann auch mittels einer zweiten Funktion (nach dem selben Prinzip) ausführen.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Menü auf Startseite funktioniert nach FORM SUBMIT nicht mehr Ceres82 (X)HTML 3 23.08.2013 22:00
vertikales Menü nachträglich einbauen Maverick010101 CSS 6 20.02.2013 16:55
Darstellungsproblem flohpapa CSS 3 16.12.2009 09:55
Menü mit Grafikbuttons - wie :active einbauen? tarlo CSS 9 04.04.2008 17:58
dropdown menü einbauen PatrickM CSS 6 07.01.2008 17:13


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:58 Uhr.