✔ JS Menü nur bis Content

Q

quidnovi

Erfahrenes Mitglied
Hi Ihr's

ich weiß nicht wie ich mein Problem in diesem Forum suchen soll, daher verzeiht es mir bitte, wenn dieses Thema schon durchgekaut wurde. Im Google habe ich auch nix gefunden.

Mein Prob:

Habe ein ausklappbares JS Menü links, das - wenn man mit der Maus auf einen Link fährt - nur bis zum Content rechts ausklappt. Also wird so ziemlich alles abgeschnitten.
Kann mitunter fast den ganzen Content überlappen. Daher auch ein ausklappbares, denn untereinander wüder man sich in der Nav zu Tode scrollen.

Ist es überhaupt möglich, dieses Menü "über den Content" fahren zu lassen?

Habe die ganze Seite auf CSS aufgebaut, daher bin ich mir auch nicht sicher, ob ich hier richtig bin.

Hat bitte jemand einen Tip für mich?

Danke im voraus
 
Hallo Sven Mintel,

danke für Deinen Tip, habe nun das CSS komplett umgeschrieben, somit benötige ich z-index nicht mehr.

Für alle die diesen Thread lesaen nun folgende Codestücke.

HTML:
HTML: 
<html>
 <head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="./css/stot.css" />
  <link rel="stylesheet" type="text/css" href="./css/vertikal_CSS.css" />
  </head>

<body>

<!-- ###DOKUMENT### begin -->

<script language="JavaScript">
<!--
function IEHoverPseudo() {
 
	var navItems = document.getElementById("nav").getElementsByTagName("li");
	
	for (var i=0; i<navItems.length; i++) {
		if(navItems[i].className == "menuparent") {
			navItems[i].onmouseover=function() { this.className += " over"; }
			navItems[i].onmouseout=function() { this.className = "menuparent"; }
		}
	}
 
}
window.onload = IEHoverPseudo;
//-->
</script>


<div id="frame">
    <div id="header">###LOGO###</div>
	<div id="headernavigation">
	 <div style="width:350px; top: 0px; float:left; color:black; text-align: left;">###ANGEMELDET###</div>
     <div style="width:500px; top: 0px; float:right; text-align: right;">###KLICKPFAD###</div>
	</div>
	<div id="navleft"><div id="nav">###MENU###</div></div>
	<div id="contentcenter">###CONTENT###</div>
	<div id="navright">###NEWS###<br>###BILDER###</div>
	<div id="footer">###FUSSZEILE###</div>
	&nbsp;
	<br clear="all" /><!-- ohne dieses kleine <br> streckt NS6 and IE5PC den frame nicht nach unten -->
</div>

 </body>

 <!-- ###DOKUMENT### end -->
</html>

Das angeführte JavaScript liest den Navbaum aus.

1.css
HTML: 
	body {
		text-align:center;
		
		}
	
	#frame {
		width:950px;
		margin-right:auto;
		margin-left:auto;
		margin-top:10px;
		padding:0px;
		text-align:left;
		overflow: hidden;
		}
		
	#navleft {
		width:175px;
		padding:0px;
		float:left;
		background:#E8E8E8;
		height: 400px;
		}
	
	#contentcenter {
		width:600px;
		padding:0px;
		height: 400px;
		float:left;
		background:#ffffff;
		overflow: auto;
		}
	
	#navright {
		width:175px;
		padding:0px;
		float:left;
		background:#E8E8E8;
		height: 400px;
		}
	
	#header {
		background:#ffffff;
		border: 0px solid silver;
		height: 121px;
		}
    #headernavigation {
		background:red;
		border: 0px solid silver;
		height: 30px;
		}
	#footer {
		background:#FF99CC;
		border: 0px solid silver;
		height: 30px;
		clear:left;
        background:red;
        text-align:center;
        padding:0px;
		}
		
	p,h1,pre {
		margin:0px 10px 10px 10px;
		}
		
	h1 {
		font-size:14px;
		padding-top:10px;
		}
		
	#header h1 {
		font-size:14px;
		padding:10px;
		margin:0px;
		}
	
	#navright p { font-size:10px}

vertikal.css (dieser Code führt das angesprochene ausklappbare Menü über den Content aus)
HTML: 
ul#nav,
ul#nav ul {
	margin: 0;
	padding: 0;
	width: 175px; /* Width of Menu Items */
	border-bottom: 1px solid #ccc;
	background: #fff; /* IE6 Bug */
	color: black;
	font-size: 100%;
	}
 
ul#nav li {
	position: relative;
	list-style: none;
	}
 
ul#nav li a {
	display: block;
	text-decoration: none;
	color: #777;
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
	font-size: 12px;
	}
	
 
/* Fix IE. Hide from IE Mac \*/
* html ul#nav li { float: left; height: 1%; }
* html ul#nav li a { height: 1%; }
/* End */
 
ul#nav ul {
	position: absolute;
	display: none;
	left: 175px; /* Set 1px less than menu width */
	top: 0;
	}
 
ul#nav li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
 
ul#nav li:hover ul ul,
ul#nav li:hover ul ul ul,
ul#nav li.over ul ul,
ul#nav li.over ul ul ul { display: none; } /* Hide sub-menus initially */
 
ul#nav li:hover ul,
ul#nav li li:hover ul,
ul#nav li li li:hover ul,
ul#nav li.over ul,
ul#nav li li.over ul,
ul#nav li li li.over ul { display: block; background: #f9f9f9; } /* The magic */

ul#nav li.menuparent { background: transparent url(arrow.gif) right center no-repeat; }
 
ul#nav li.menuparent:hover,
ul#nav li.over { 
	background-color: #f9f9f9; 
}
 
 
ul#nav li a:hover { 
	color: red; 	
}

Muß noch dazu erwähnen, dass dies die Vorlage für ein CMS (Typo3) ist.

Hoffe dass dies auch anderen hilft.

An die Administratoren dieses Boards:
Weiß nicht in welche Kategorie dies gehört, also bitte nicht böse sein, wenn ich hier im falschen gepostet habe.

Noch was in eigener Sache:
Habe auf tutorials.de schon viel Hilfe erhalten, und ich hoffe, dass ich mit diesen Kleinigkeiten wenigstens ein bißchen zurückgeben kann.

Schöne Grüße
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück