Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 20.05.2017, 14:35
crane crane ist offline
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.01.2017
Beiträge: 33
crane befindet sich auf einem aufstrebenden Ast
Standard Hilfe bei ausklappbarer Menüleiste

Hi,
ich möchte einen Div mit einer bestimmten Höhe haben. Sobald ich auf einen Link innerhalb des Div klicke möchte ich das ein bestimmter div innerhalb des ersten also das kind erscheint und so dargestellt wird das es einfach unten an den Eltern div drangehängt ist. Weiter hin soll der Rest der seite. d.h. die Dinge außerhalb des Eltern Div so weit wie nötig nach unten verschoben werden. Also eine automatische anpassung.

Das ganze soll eine ausklappbare Menüleiste sein.
Dafür habe ich momentan im CSS folgenden Code:
Code:
header {
	        
        background-color: yellow;
	background-color: gray;
	width: 100%;
	float: left;
	border-bottom: 1px solid black;
}
#bereichlogo {
	color: white;
	background-color: limegreen;		
	display: block;
	padding: 0.5em;
	text-decoration: none;
	float: left;	
}
#bereichlogo {
	width: auto;
}
#steuerung li {
	list-style: none;
	float: left;
}
#steuerung a {
	display: block;
	height: 100%;
	width: 100%;
	padding: 0.5em;
	text-decoration: none;
	color: white;
	background-color: gray;
}	
.menue-button {
	display: none;
}		
#steuerung {
	float: right;
}
#steuerung a:hover {
	color: black;
	background: orange;
}	
/* CSS erweitern um MENÜ-Button und entsprechende Steuerung */
/*	Menü-Button oben rechts einblenden bei kleiner als 600px */

	.menue-button {
		display: block;
	}
	.menue-button {
		background-color: darkblue;
		display: block;
		position: absolute;
		right: 0;
		top: 0;
		padding: 0.5em;
		color: white;
		cursor: pointer;
		text-decoration: none;
	}	
	#bereichlogo {
		width: 100%;
	}
	#steuerung {
		float: left;
		width: 100%;
		display: none;
	}	
	#steuerung li {
		width: 100%;
		border-bottom: 2px solid silver;
	}	
	.menue-button:hover {
		color: black;
		background: orange;
	}

/* die Magie, um die Steuerung einzublenden (auch auf mobile Devices) */
#nav-menue:target #steuerung {
	display:block;
	padding-top:115px;
	
}

/* ausblenden des Menü-Buttons zum öffnen - somit wird der zum Schließen sichtbar */
#nav-menue:target .menue-button-beschr-open {
	display: none ; 
}
Und im HTML:
Code:
<header id="nav-menue">
	<a href="#" id="bereichlogo">Navigation</a>
    <nav id="steuerung" role="navigation">
    	<ul>
           <li><a href="#">Startseite</a></li>
           <li><a href="#">Beispiele</a></li>
           <li><a href="#">Kontakt</a></li>
           <li><a href="#">Impressum</a></li>
        </ul>
    </nav>
    <a class="menue-button menue-button-beschr-close" 
       href="#nav-menue-zu">MEN zu</a>
    <a class="menue-button menue-button-beschr-open" 
       href="#nav-menue">MEN auf</a>
</header>
Danke
Mit Zitat antworten
Sponsored Links