Menü mit Css

pchero

unregistriert

1

Freitag, 8. Dezember 2006, 21:58

Hi

ich habe eine Frage zum Thema CSS bzw Javaskript

Also ich möchte mittels Css am liebsten Javaskript nur zur not ein kleines Mouseover menü machen

Also man hat nen Link wenn man darüber kommt kommen eine kleine liste mit 3 oder 4 weitern links und man kann dann auf den 2 link gehen und dann öffnet sich noch so ein menü daneben

Verrsteht ihr was ich meine ?

MFG

p.s sowas in etwa
http://aktuell.de.selfhtml.org/artikel/css/infobox/
oder http://www.psacake.com/web/jl.asp

Rene82

Kaiser

Dabei seit: 08.08.2006

Beiträge: 1 231

2

Freitag, 8. Dezember 2006, 22:02

RE: Menü mit Css

Da ja bekanntlich beld Weihnachten ist, geb ich dir und allen anderen einen Wunderschönen Link.

Hier findest Du (Ihr) alles über Menüs.

www.cssplay.co.uk

merkt euch diese URL. Die wird euch das leben erleichtern.

zu deiner frage nur mal einen rausgegriffen:
http://www.cssplay.co.uk/menus/flyout5.html

HoHoHo!

FWK-ART [media] - Fotos & Videos der schönsten und größten (Musik)Feuerwerke

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Rene82« (8. Dezember 2006, 22:03)

pchero

unregistriert

3

Freitag, 22. Dezember 2006, 19:58

So ich habe da jetzt schon was zusammengestellt , bloß meine frage ist momentan wie bekomme ich hin das der erste link jetzt aussieht wie ein stink normaler link ? und nicht in so einem kasten ist ?

Quellcode

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
.menu {
z-index:1000;
font-size:90%;
height:235px;
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
width:150px;
position:relative;
border:1px solid #888;
border-width:1px 1px 0 1px;
background:#9bb;
}

.menu li {
background:transparent;
height:26px;
}
* html .menu li {margin-left:-16px; margin-lef\t:0;}
/* get rid of the table */
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em; width:0; height:0;}

/* style the links */
.menu a, .menu a:visited {
display:block; 
text-decoration:none;
height:25px;
line-height:25px;
width:150px;
color:#000;
text-indent:5px;
border-bottom:1px solid #888;
background:transparent;
}
/* style the link hover */
* html .menu a:hover {color:#fff; background:#999;}

.menu :hover > a {
color:#fff; 
background:#999;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
top:-1px;
left:100px;
}
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul {
visibility:visible;
background:#dde;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* keep the fith level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ 
visibility:visible;
background:#ded;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul { 
visibility:visible;
background:#edd;
}
/* make the fith level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul :hover ul { 
visibility:visible;
background:#edd;
}
.menu ul.top2 {top:25px;}
.menu ul.top3 {top:51px;}
.menu ul.top4 {top:77px;}
.menu ul.top5 {top:103px;}
.menu ul.top6 {top:129px;}
.menu ul.top7 {top:155px;}

</style>
</head>
<body>


<table border="0" width="100%">
<tr>
	<td  width="90%">$header</td>
	<td  width="10%"></td>
</tr>
<tr>
	<td width="90%">$middel</td>
	<td align="left" valign="top" width="10%">$links</td>
</tr>
</table>

<div class="menu">
<ul>
<li><a href="#nogo">Item 3 »<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="top1">

	<li><a href="#nogo">Item 3a</a></li>
	<li><a href="#nogo">Item 3b »<!--[if IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul class="top2">
			<li><a href="#nogo">Item 3bi</a></li>
			<li><a href="#nogo">Item 3bii »<!--[if IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->

				<ul class="top2">
					<li><a href="#nogo">Item 3bii-1</a></li>
					<li><a href="#nogo">Item 3bii-2</a></li>
					<li><a href="#nogo">Item 3bii-3</a></li>
					<li><a href="#nogo">Item 3bii-4</a></li>
					<li><a href="#nogo">Item 3bii-5</a></li>

					<li><a href="#nogo">Item 3bii-6</a></li>
					<li><a href="#nogo">Item 3bii-7</a></li>
					<li><a href="#nogo">Item 3bii-8</a></li>
				</ul>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
			<li><a href="#nogo">Item 3biii »<!--[if IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul class="top3">
					<li><a href="#nogo">Item 3biii-1</a></li>
					<li><a href="#nogo">Item 3biii-2</a></li>
					<li><a href="#nogo">Item 3biii-3</a></li>
					<li><a href="#nogo">Item 3biii-4</a></li>
				</ul>

			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a href="#nogo">Item 3c</a></li>
	<li><a href="#nogo">Item 3d</a></li>
	<li><a href="#nogo">Item 3e</a></li>

	<li><a href="#nogo">Item 3f</a></li>
	<li><a href="#nogo">Item 3g »<!--[if IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul class="top7">
			<li><a href="#nogo">Item 3gi »<!--[if IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul class="top1">

					<li><a href="#nogo">Item 3gi-1</a></li>
					<li><a href="#nogo">Item 3gi-2</a></li>
					<li><a href="#nogo">Item 3gi-3</a></li>
					<li><a href="#nogo">Item 3gi-4</a></li>
					<li><a href="#nogo">Item 3gi-5</a></li>
					<li><a href="#nogo">Item 3gi-6</a></li>

				</ul>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
			<li><a href="#nogo">Item 3gii</a></li>
			<li><a href="#nogo">Item 3giii »<!--[if IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul class="top3">
					<li><a href="#nogo">Item 3gi »<!--[if IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul class="top1">

					<li><a href="#nogo">Item 3gi-1</a></li>
					<li><a href="#nogo">Item 3gi-2</a></li>
					<li><a href="#nogo">Item 3gi-3</a></li>
					<li><a href="#nogo">Item 3gi-4</a></li>
					<li><a href="#nogo">Item 3gi-5</a></li>
					<li><a href="#nogo">Item 3gi-6</a></li>

				</ul>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
					<li><a href="#nogo">Item 3giii-4</a></li>
				</ul>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>	
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
</li>
<li><a href="#nogo">Item 7</a></li>

</ul>
</div>



</body>
</html>

MFG