zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Elemente überlappen bei Ausklappmenü

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.07.2019, 16:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.01.2017
Beiträge: 23
crane befindet sich auf einem aufstrebenden Ast
Standard Elemente überlappen bei Ausklappmenü

Hallo alle zusammen,
ich bräuchte Hilfe beim Design meiner Menü Liste. Ich möchte wenn man auf den Knopf drückt, dass das sich ausklappende Menü den Inhalt der Seite überlappt. Das bedeutet zum Beispeil, dass der Container mit dem Menüinhalt über dem Container mit dem Content der Seite überlappt und der Container mit dem Content der Seite sich nicht bewegt. Weiterhin soll der Content Container relativ zu dem in y-Richtung darüber angeordenten Container positioniert werden, d.h. wenn der darüber angeordnete Container größer wird wandert der Container mit dem Content schon nach unten aber der Abstand zum darüber angeordneten Container bleib immer gleich.

Das ausklappende Menü soll genauso wie der Container mit dem Content positioniert werden, aber in dem Fall relativ zum Knopf.

Mein aktueller Code:
HTML-Code:
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS Only Navigation Menu</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="nav2.css">
</head>
<style>
li.hm1
{
float: left;
}
</style>
<body>

<div style="float: left; border:1px solid; height:150px; width:150px; text-align: center;"><a style="" href=test.html">Leonard Schmidt</a></div>
<div style="float: right;" ><label for="show-menu" class="show-menu" style="position: absolute; right:0; top:0;">☰</label>
	<input type="checkbox" id="show-menu" role="button">
	<ul class="menuc">
		<li class="hm1"><a href="#">Home</a></li>
		<li class="hm1"><a href="#">&Uuml;ber mich</a></li>
		<li class="hm1"><a href="#">Taiji</a>
			<ul class="hidden">
				
				<li><a style="background: green;" href="#">Was ist Taiji</a></li>
				<li><a style="background: green;" href="#">Chen Taiji System</a></li>
				<li><a style="background: green;" href="#">Termine</a></li>

			</ul>
		</li>
		<li class="hm1"><a href="#">Hakomie</a>
			<ul class="hidden">
				
				<li><a style="background: green;" href="#">Was ist Hakomie</a></li>
				<li><a style="background: green;" href="#">Themen</a></li>
				<li><a style="background: green;" href="#">Termine</a></li>

			</ul>
		</li>
		<li class="hm1"><a href="#">Medien</a>
			<ul class="hidden">
				
				<li><a style="background: green;" href="#">Bilder</a></li>
				<li><a style="background: green;" href="#">Videos</a></li>
				
			</ul>
		</li>
		<li class="hm1"><a href="#">Links</a></li>
		<li class="hm1"><a href="#">Kontakt</a></li>
	</ul>
</div>
<div style="clear:both">
<div style="position:relative; top:0"><h1>Content</h1></div>
</div>
</body>
</html>
Das dazugehörige CSS:
Code:
/*Strip the ul of padding and list styling im*/
html, body{
margin:0;
padding:0;
}
ul {
	list-style-type:none;
	margin:0px 0px;
	padding:0px 0px;
	
	
	text-align: justify;
    	
	
	
}

/*Create a horizontal list with spacing im*/
li {
	
}

/*Style for menu links im*/
li a {
	display:block;
	min-width:140px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #000000;
	background: red;
	text-decoration: none;
}

/*Hover state for top level links im*/
li:hover a {
	
	color: #19c589;
}



/*Hover state for dropdown links maybe*/
li:hover ul a:hover {
	color: #fff;
}

/*Hide dropdown links until they are needed im*/
li ul {
	display: none;
}

/*Make dropdown links vertical im*/
li ul li {
	display: block;
	float: none;
}



/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
	display: block;
	position:relative;
	top:0;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
	width: 50px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-decoration: none;
	color: #fff;
	background: #19c589;
	text-align: center;
	padding: 10px 0;
	display: none;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
    -webkit-appearance: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ .menuc{
    display: block;
}


/*Responsive Styles*/

@media screen and (max-width : 1168px){
	/*Make dropdown links appear inline*/
	ul {
		position: static;
		
		
		
		display: none;
		
	}
	/*Create vertical spacing*/
	li {
		margin-bottom: 0px;
		clear:both;
		position: relative;
		
	}
	/*Make all menu links full width*/
	ul li, li a {

float: none;

		
	}
.hidden
{
position:relative;
top:0;}
	/*Display 'show menu' link*/
	.show-menu {
		display:block;

	}

}
Vielleicht versteht der ein oder andere meine Frage und kann mir weiterhelfen.
Schon mal vielen lieben Dank
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.07.2019, 18:10
Benutzer
neuer user
 
Registriert seit: 10.07.2018
Beiträge: 99
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Mal zwei Fragen zu deinem Code.

Warum formatierst du dein Element '<label for="show-menu" class="show-menu"...> im CSS mit 'display: none;'? So wird es nicht angezeigt und man hat auch nichts zum anklicken.

Du formatierst dein Element 'input[type="checkbox"]:checked ~ .menuc' mit 'display: block;' - wie soll es denn dargestellt werden, wenn die Checkbox nicht 'checked' ist?
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
ausklappmenü, relativ, überlappen

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
Elemente nebeneinander mit max Höhe des umgebenden Elementes ShadowDeath CSS 1 27.08.2011 21:00
Elemente unbrauchbar bei absolute Bara CSS 0 28.07.2010 06:18
Mehr (unnötige) Elemente oder weniger Flexibilität? Pleex CSS 3 13.05.2009 22:17
Flash Elemente überlappen BoFiaZ CSS 5 21.09.2008 01:59
Welche Positionierung für elemente eines Formulas? bastien CSS 3 01.01.2007 22:31


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:57 Uhr.