✔ Slide- bzw. Sub-Menü verschiebt ganze Seite - soll sie aber nicht...

P

piffel

Grünschnabel
Hallo Community!
Erst einmal ein herzliches Moin von mir. Ich bin neu hier und hoffe, dass ich bei euch Hilfe finde!

Zu meinem Problem:
Ich habe mit CSS (und Javascript) ein Submenü erstellt, dass sich vom Header aus nach unten hin öffnet. Leider verschiebt sich damit aber dann die ganze Seite. Das soll sie aber nicht. Der Inhalt im Contentbereich (weiße Fläche) und der Footer sollen so stehen bleiben.
Damit ihr genau wisst, was ich meine, hier einmal die Seite:
http://www.last-smile.de/testseite/public.html

Wie schaffe ich es nun, dass sich das Menü so öffnet, wie es das jetzt zwar auch macht, sich allerdings nicht die restliche Seite bzw. der gesamte andere Inhalt nach unten verschiebt (auch der Scrollbalken soll demnach am rechten Rand verhindert werden)?

Ich würde mich sehr freuen, wenn ihr eine Lösung parat hättet oder Hilfe geben könntet!
Vielen Dank!

mfG,
piffel
 
Zuletzt bearbeitet:
Danke für deine schnelle Antwort.
Aber wenn ich nun position:absolut; dort eingebe, kommt das Submenü gar nicht mehr rausgefahren. Außerdem soll es ja auch nicht den anderen Content vom Header überschreiben, wie es ja bei dem Menü-Beispiel von dir der Fall war.

Mh... oder hab ich was falsch verstanden? Is ja auch schon spät... ;)

mfG
 
Das Problem ist der Aufbau, also deune Struktur.
Der Link, also das Submenu ist im gleichen Container wie das Hauptmenü, und das passt nicht.
Das ist klar, dass dann der Header bereich verändert wird.
 
Also müsste ich einfach meinen header-bereich außerhalb des wrapper-divs (direkt unter das sub-link-bar-div) platzieren?

Danke weiterhin!
mfG
 
Schau dir mal das hier an:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>public</title>

<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".main-link").hover(function(){
		$(".close").fadeIn();
		$(".main-link").removeClass("active");												 
		$(this).addClass("active");										 
		$("#sub-link-bar").animate({
			height: "50px"					   
		});
		$(".sub-links").hide();
		$(this).siblings(".sub-links").fadeIn();
	});
	$(".close").click(function(){
		$(".main-link").removeClass("active");												 									 
		$(".sub-links").fadeOut();
		$("#sub-link-bar").animate({
			height: "0px"					   
		});		
		$(".close").fadeOut();
	});
	
	
});
</script>

<!-- CSS-Ergänzung -->
<style type="text/css">
  #bar-wrapper { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    z-index:999; 
    text-align: right;
	margin-top: 11px; 
}
</style>
<!-- Ende CSS-Ergänzung -->

</head>

<body>

<div id="wrapper">

    <!-- HTML-Ergänzung -->
    <div id="bar-wrapper">  
        <div id="sub-link-bar"></div><!--Ende #sub-link-bar--> 
        <a class="close" title="Click to Collapse" href="#">Submenü schließen</a><a class="close" title="Click to Collapse" href="#" style="color:#929292;"> | </a><a class="main-link" href="#konto_erstellen">Submenü ausfahren</a>
   </div><!-- Ende HTML-Ergänzung -->
   
	<div id="header">
		<div id="header_content">
        	<div id="header_content_left">     
       		</div>
  			<div id="header_content_right">
            </div>
        </div>
	</div><!--Ende #header-->

	<div id="content">    

	</div><!--Ende #content-->

	<div id="footer">
		<div id="footer_content">
        	<span style="word-spacing:20px">
   
            </span><br />
			<span style="font-size: 11px">Test 1 2 3 Test
            </span>
		</div>
	</div><!--Ende #footer-->

</div><!--Ende #wrapper-->


</body>
</html>

Wenn der Inhalt nicht nach unten verschoben werden soll, bleibt ja nur seine Überdeckung übrig ;-)

In meinem erwähnten Beispiel, das dir den grundsätzlichen Sachverhalt demonstrieren sollte, befindet sich das Menü in der Seitenansicht lediglich an anderer Position gegenüber deinem Seitenaufbau, nämlich unterhalb des Header-Bereichs, der mit dem <h1>-Element für eine Überschrift 1. Ordnung ausgezeichnet, und entsprechend per CSS formatiert ist, aber es wird nichts am darunterfolgenden Inhalt verrückt, wenn die verschachtelten Submenüebenen erscheinen ;)
 
Zuletzt bearbeitet:
Richtig, der andere Inhalt müsste überdeckt werden :)

Dein Vorschlag, spicelab, ist schonmal hilfreich! Allerdings wird ja nun auch der Header überdeckt, oder sehe ich das falsch? Der graue, vorher auch sichtbare Teil des Headers soll aber ebenfalls mit nach unten gleiten (da werden ein Logo und die Links, die das Submenü ausfahren sollen, zu sehen sein).

mfG
 
CSS: 
  #bar-wrapper { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    min-height:59px; /* Mindesthöhe - ohne Submenü */
    z-index:999; 
    text-align:right;
	margin-top:11px; 
	background:#ededed url(schadow.jpg) repeat-x left bottom; /* Hintergrund */
}
 
Zuletzt bearbeitet:
Nachtrag.

CSS: 
/* aus */
min-height:59px; /* Mindesthöhe - ohne Submenü */

/* wird */
min-height:37px; /* Mindesthöhe - ohne Submenü */
padding-bottom:22px; /* unterer Innenabstand */
 
wow vielen dank! kann man auch die schrift, was den abstand zum unteren rand des headers angeht, fixieren? also natürlich sollten die links mit runter fahren, allerdings den abstand zum unteren rand des headers nicht verändern. das wäre dann perfekt :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück