Css Hamburgermemü verkleinern

Hallo zusammen,
ich habe Probleme mit einem CSS Schnipselset:
css 1:

	/*----- Menu -----*/	
		nav {
			margin: 0 auto;
			width: 50%;
			height: 1em;
			text-align: right;
			position: relative;
			background: rgba(255, 255, 255, 1.0);
			border-bottom: 1px solid white;
			-webkit-transition: all 0.8s ease;
			-moz-transition: all 0.8s ease;
			-o-transition: all 0.8s ease;
			transition: all 0.8s ease;
		}	
		nav ul {
			margin: 0;
			padding: 8.1em 0 0 0;	
			height: 100vh;
		}
		nav ul li {			
			list-style: none;
			margin: 0;
			display: inline;
		}
		nav ul li a {
			color: #009999;
			position: relative;
			padding: 0 0 0.5em 0;
			display: inline-block;
			text-decoration: none;
			text-transform: uppercase;
		}
		nav ul.menu li a:hover {
			color: #03405f;
			border-bottom: 2px solid #03405f;
		}		
	/*----------------*/
	
	
	/*----- Media Queries -----*/
		@media screen and (min-width: 2500px) {
			nav ul.menu {
				max-height: 20px;
			}			
			a#nav-m, a.close {
				display: none;
			}
			nav ul li {
				margin: 0 30px 0 0;
			}			
		}


		@media screen and (max-width: 2500px) {	
			/*Formatierung Mobiles Menue*/				
			nav ul {
				top: 4em;
				position: absolute;
				background: #ccc;	
				/*background: rgba(200,200,200,0.95);*/
				width: 50%;
				left: -150%;
display:none;
				list-style-type:none;
				margin: 0;
				padding: 0;				
				transition:all .6s ease;
				-webkit-transition:all .6s ease;
			}
			nav ul li{
				display: block;
				text-align: left;
				padding: 0em 0.5em;
				border-bottom: 1px solid #fff;
			}	
			nav ul li a {
				color: #555;
				padding: 1em 0;				
			}
			nav ul.menu li a:hover {
				border-bottom: 0;
			}			

			/*Hamburger-Icon*/
			a#nav-m img, a.close img {
				width: 40px;
				height: auto;
			}			
			nav > .close,
			a#nav-m:target {
				display: none;
			}

			a:target ~ ul,
			a:target ~ .close {
				display: inline-block;
			}
			
			a:target ~ .close {
				position: absolute;
				margin-left: -40px;
			}		

			a:target ~ ul {
				left: 0;
			}
		}

und html und etwas mehr css

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>
  <head>
 	<meta charset="UTF-8">  
	<meta name=description content="">  
	<title>Sticky Header Menu - Festes Menü in der Kopfzeile - Beispiel ansehen</title>
		

	<style>
	

	/*----- Menu -----*/	
		nav {
			margin: 0 auto;
			width: 400px;
			height: 1em;
			text-align: right;
			position: relative;
			background: rgba(255, 255, 255, 1.0);
			border-bottom: 1px solid white;
			-webkit-transition: all 0.8s ease;
			-moz-transition: all 0.8s ease;
			-o-transition: all 0.8s ease;
			transition: all 0.8s ease;
		}	
		nav ul {
			margin: 0;
			padding: 8.1em 0 0 0;	
			height: 100vh;
		}
		nav ul li {			
			list-style: none;
			margin: 0;
			display: inline;
		}
		nav ul li a {
			color: #009999;
			position: relative;
			padding: 0 0 0.5em 0;
			display: inline-block;
			text-decoration: none;
			text-transform: uppercase;
		}
		nav ul.menu li a:hover {
			color: #03405f;
			border-bottom: 2px solid #03405f;
		}		
	/*----------------*/
	
	
	/*----- Media Queries -----*/
		@media screen and (min-width: 2500px) {
			nav ul.menu {
				max-height: 20px;
			}			
			a#nav-m, a.close {
				display: none;
			}
			nav ul li {
				margin: 0 30px 0 0;
			}			
		}


		@media screen and (max-width: 2500px) {	
			/*Formatierung Mobiles Menue*/				
			nav ul {
				top: 4em;
				position: absolute;
				background: #ccc;	
				/*background: rgba(200,200,200,0.95);*/
				width: 300px;
				left: -900px;    

				list-style-type:none;
				margin: 0;
				padding: 0;				
				transition:all .6s ease;
				-webkit-transition:all .6s ease;
			}   
              
			nav ul li{
				display: block;
				text-align: left;
				padding: 0em 0.5em;
				border: 1px solid red;
                width:30%;
			}	
			nav ul li a {
				color: #555;
				padding: 1em 0;				
			}
			nav ul.menu li a:hover {
				border-bottom: 0;
			}			

			/*Hamburger-Icon*/
			a#nav-m img, a.close img {
				width: 40px;
				height: auto;   
			}			                 
			nav > .close,
			a#nav-m:target {
				display: none;
			}

			a:target ~ ul,
			a:target ~ .close {
				display: inline-block;
			}
			
			a:target ~ .close {
				position: absolute;
				margin-left: -40px;
			}		

			a:target ~ ul {
				left: 0;
			}
		}
	/*--------------------------------------*/		
	</style>
	
 </head>
<body>
	
	<nav>
		<a href="#nav-m" id="nav-m"><img src="../../mainimages/HamburgerIcon.png" alt=""/></a>  
		<a href="#" class="close"><img src="../../mainimages/HamburgerIconzu.png" alt=""/></a>  
		
		<ul class="menu">  
			<li><a href="#abschnitt1">Abschnitt 1</a></li>  
			<li><a href="#abschnitt2">Abschnitt 2</a></li>  
			<li><a href="#abschnitt3">Abschnitt 3</a></li>  
			<li><a href="#abschnitt4">Abschnitt 4</a></li>  
			<li><a href="#abschnitt5">Abschnitt 5</a></li>  
		</ul>
	</nav>

	<main>
		<div id="abschnitt1">  
			<strong>Abschnitt 1</strong><br />
			<br />
		
		</div>
		<div id="abschnitt2">  
			<br />
			<strong>Abschnitt 2</strong><br />
			reet euismod leo netus elit aliquet lobortis ut quis In. Tristique lacinia id mauris elit tellus Sed congue orci Vestibulum Aenean. Morbi egestas sit id vitae netus wisi malesuada sem ut nisl. Tincidunt Vestibulum elit felis eu enim Duis nulla consequat vitae ante. Facilisis id ullamcorper malesuada congue in Duis amet lacinia tempus non. Urna Pellentesque justo senectus semper id In sed Donec pretium feugiat. Nunc urna montes Cum ac justo orci id urna Lorem est. Nam gravida semper lacus pede neque ut consequat ac vel consequat. Lorem magna fringilla orci felis vel at Sed purus gravida justo. Condimentum Vestibulum id aliquam congue tincidunt quis quis sapien semper Phasellus. In metus Nullam mauris orci tristique Fusce amet ligula nibh est. Cursus lorem id Mauris est senectus sollicitudin gravida consectetuer convallis felis. Vel lobortis amet laoreet id justo gravida condimentum eu Vestibulum Ut. Tincidunt orci pellentesque ridiculus commodo Curabitur id gravida nisl eu Ut. Facilisis semper tellus Mauris pellentesque pede Integer porttitor In turpis tortor. Felis Vivamus eu mauris ut vitae nulla metus Ut nisl tempor. Eget urna vitae tortor consectetuer ligula tortor orci Nulla quis amet. Netus sem adipiscing et pede est fringilla Integer a convallis laoreet. Et tristique nunc quam scelerisque urna tempus aliquet elit augue consequat. In Nam Sed fa<br />
		
		</div>		
		<div id="abschnitt3">  
			<br />
			<strong>Abschnitt 3</strong><br />
			reet euismod leo netus elit aliquet lobortis ut quis In. Tristique lacinia id mauris elit tellus Sed congue orci Vestibulum Aenean. Morbi egestas sit id vitae netus wisi malesuada sem ut nisl. Tincidunt Vestibulum elit felis eu enim Duis nulla consequat vitae ante. Facilisis id ullamcorper malesuada congue in Duis amet lacinia tempus non. Urna Pellentesque justo senectus semper id In sed Donec pretium feugiat. Nunc urna montes Cum ac justo orci id urna Lorem est. Nam gravida semper lacus pede neque ut consequat ac vel consequat. Lorem magna fringilla orci felis vel at Sed purus gravida justo. Condimentum Vestibulum id aliquam congue tincidunt quis quis sapien semper Phasellus. In metus Nullam mauris orci tristique Fusce amet ligula nibh est. Cursus lorem id Mauris est senectus sollicitudin gravida consectetuer convallis felis. Vel lobortis amet laoreet id justo gravida condimentum eu Vestibulum Ut. Tincidunt orci pellentesque ridiculus commodo Curabitur id gravida nisl eu Ut. Facilisis semper tellus Mauris pellentesque pede Integer porttitor In turpis tortor. Felis Vivamus eu mauris ut vitae nulla metus Ut nisl tempor. Eget urna vitae tortor consectetuer ligula tortor orci Nulla quis amet. Netus sem adipiscing et pede est fringilla Integer a convallis laoreet. Et tristique nunc quam scelerisque urna tempus aliquet elit augue consequat. In Nam Sed fa...<br />
				</div>		
		<div id="abschnitt4">  
			<br />
			<strong>Abschnitt 4</strong><br />
			Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rethorische Frage über die Wange, dann setzte es seinen Weg fort. Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie...<br />
			
		</div>		
		<div id="abschnitt5">  
			<br />
			<strong>Abschnitt 5</strong><br />
			reet euismod leo netus elit aliquet lobortis ut quis In. Tristique lacinia id mauris elit tellus Sed congue orci Vestibulum Aenean. Morbi egestas sit id vitae netus wisi malesuada sem ut nisl. Tincidunt Vestibulum elit felis eu enim Duis nulla consequat vitae ante. Facilisis id ullamcorper malesuada congue in Duis amet lacinia tempus non. Urna Pellentesque justo senectus semper id In sed Donec pretium feugiat. Nunc urna montes Cum ac justo orci id urna Lorem est. Nam gravida semper lacus pede neque ut consequat ac vel consequat. Lorem magna fringilla orci felis vel at Sed purus gravida justo. Condimentum Vestibulum id aliquam congue tincidunt quis quis sapien semper Phasellus. In metus Nullam mauris orci tristique Fusce amet ligula nibh est. Cursus lorem id Mauris est senectus sollicitudin gravida consectetuer convallis felis. Vel lobortis amet laoreet id justo gravida condimentum eu Vestibulum Ut. Tincidunt orci pellentesque ridiculus commodo Curabitur id gravida nisl eu Ut. Facilisis semper tellus Mauris pellentesque pede Integer porttitor In turpis tortor. Felis Vivamus eu mauris ut vitae nulla metus Ut nisl tempor. Eget urna vitae tortor consectetuer ligula tortor orci Nulla quis amet. Netus sem adipiscing et pede est fringilla Integer a convallis laoreet. Et tristique nunc quam scelerisque urna tempus aliquet elit augue consequat. In Nam Sed fa.<br />
			
		</div>			
	</main>
	
</body>
</html>

Ursprünglich war das gedachtmit media query für mobil und Desktop dan ein anderes Menü.
Ich möchte aber das Ganze grundsätzlich als Hamburger Menü. Daher habe ich im Media-Query einfach als Min-sreen-width:2500px gesetzt.
Das Ganze funktioniert, wenn ich with und left auf 100% setze.
Die Idee war nun das Ganze auf 30% zu setzen, damit es diskreter ist, nur dann geht gar nichts mehr. Das Menü wird dann nicht ausgeblendet, sondern springt nur und das icon sitzt mittig auf dem Bildschirm (horizontal).
Wie kriege ich es hin, dass das Icon einfach zB links oben sitzt und dann mit ner Breite von was weiß ich 300px ausklappt. Möglichst ohne js.
nfG
tsun nami

Please also mark the comments that contributed to the solution of the article

Content-Key: 1995280053

Url: https://administrator.de/contentid/1995280053

Printed on: April 26, 2024 at 17:04 o'clock

German solved Question CSS Development