zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Hilfe bei ausklappbarer Menüleiste

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.05.2017, 13:35
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.01.2017
Beiträge: 29
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
Antwort

Stichwörter
menüleiste

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üleiste HILFE marcbaginski CSS 1 14.11.2012 02:13
Menüleiste einbinden Tim0 CSS 4 21.05.2011 13:10
HILFE Menüleiste nicht mehr sichtbar bei Mozilla und Safari LittleStep Javascript & Ajax 1 01.12.2009 20:39
Hilfe bei Menüleiste mit CSS Silvana CSS 1 17.07.2009 12:05
Hilfe! Problem mit Menüleiste Anny CSS 0 25.07.2007 20:31


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:10 Uhr.