Dynamisches Menu mit CSS erstellen

shizo · Beitrag von **shizo** » 13.12.2005 18:22

hallo ich möchte gerne auf meine html seite ein dynamisches menü erstellen, das soll dann so aussehen:

> home
>> bla
> link
>> blabla

usw

die fettgedrukten und nur mit einem ">" sollen eben immer angezeigt werden, bei mouseover sollen noch die unteren dazukommen! wenn die maus weg ist sollen die dann halt auch weg. die mit den 2 ">>" sollen unter den hauptpunkt rutschen.

kann mir jm helfen?

123teddy321 · Beitrag von **123teddy321** » 13.12.2005 20:40

also ich würde es glaube mit java script lösen! da mouseover und mouseout ja jabva script sind!

FatFreddy · Beitrag von **FatFreddy** » 13.12.2005 21:05

Wie so häufig, hilft auch hier Selfhtml: http://de.selfhtml.org/css/layouts/navi ... eisten.htm

FatFreddy

shizo · Beitrag von **shizo** » 14.12.2005 13:16

ich kenn mich doch da ned aus und mein fall ist da gar nicht aufgeführt ... könnte mir jm helfen oder mir einen link geben wo mein fall behandelt wird?

chriss713 · Beitrag von **chriss713** » 14.12.2005 14:01

Und wieso sollen wir dann für Dich suchen? Frag mal google
Such nach "mein Fall", da wirst Du bestimmt fündig!

Oder lies Dich in die Materie ein, Du kannst doch nicht erwarten, dass wir das hier alles von vorne bis hinten für Dich machen bzw. Dir haarklein erklären, wies geht.
Wenn Du dem Link von FatFreddy folgst, und liest was da steht, wirst Du schon verstehen, wie Du Dein Problem lösen kannst! Und wenn sich dabei konkrete Probleme ergeben, kannst Du Dich ja hier wieder melden!

Beitrag von **Markus67** » 14.12.2005 14:06

Hi ...

mit CSS alleine bekommst du das nicht gebacken ... aber hier mal was zum "tüfteln"

http://css.maxdesign.com.au/listamatic/

Markus

shizo · Beitrag von **shizo** » 14.12.2005 14:18

he danke schön

das is ja hier echt klasse:

http://css.maxdesign.com.au/listamatic/vertical14.htm

wüsst halt dann nur gern wie ich das machen das bei mouseover unten das rauskommt wie bei dem hier: http://tutorials.alsacreations.com/dero ... rtical.htm#

edit:

soweit wär ich schonmal ^^ ich will eben den stil vom ersten link mit der fuktionsweise des zweiten ...

Code: Alles auswählen

<?php header('Content-Language: en'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Vertical expanding menu in CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>


<style type="text/css">
<!-- 
/* CSS issu des tutoriels www.alsacreations.com/articles */
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
}
dl#menu {
width: 15em;
}
dl#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: #ccc;
}
dl#menu dd {
border: 1px solid gray;
}
dl#menu li {
text-align: center;
background: #fff;
}
dl#menu li a, dl#menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}

dl#menu li a:hover, dl#menu dt a:hover {
background: #eee;
}

#mentions {
font-family: verdana, arial, sans-serif;
position: absolute;
bottom : 200px;
left : 10px;
color: #000;
background-color: #ddd;
}
#mentions a {text-decoration: none;
color: #222;
}
#mentions a:hover{text-decoration: underline;
}
 #navcontainer ul
{
list-style-type: none;
text-align: left;
}

#navcontainer ul li a
{
background: transparent url(images/list-off.gif) left center no-repeat;
padding-left: 15px;
text-align: left;
font: normal 11px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
text-decoration: none;
color: #999;
}

#navcontainer ul li a:hover
{
background: transparent url(images/list-on.gif) left center no-repeat;
color: black;
}

#navcontainer ul li a#current
{
background: transparent url(images/list-active.gif) left center no-repeat;
color: #666;
}
-->
</style>
</head>

<body>
 <div id="navcontainer">
  <ul id="navlist">

<dl id="menu">

		<dt onclick="javascript:montre();"><a href="#">Menu 1</a></dt>
			
		<dt onclick="javascript:montre('smenu2');">Menu 2</dt>
			<dd id="smenu2">
				<ul>
					<li><a href="#">Sous-Menu 2.1</a></li>
					<li><a href="#">Sous-Menu 2.2</a></li>

					<li><a href="#">Sous-Menu 2.3</a></li>
				</ul>
			</dd>	

		<dt onclick="javascript:montre('smenu3');">Menu 3</dt>
			<dd id="smenu3">
				<ul>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>

					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
				</ul>
			</dd>

		<dt onclick="javascript:montre('smenu4');">Menu 4</dt>
			<dd id="smenu4">
				<ul>
					<li><a href="#">Sous-Menu 4.1</a></li>
					<li><a href="#">Sous-Menu 4.1</a></li>
				</ul>
			</dd>

	
</dl>

 </ul>
 </div>


</body>
</html>

Beitrag von **Markus67** » 14.12.2005 14:30

Hi ...

dann schau dir doch einfach genau an wie das mit dem CSS geregelt ist. Und dann musst du nur die einzelnen Definitionen anpassen.

Ein bischen fumnmeln musst du da schon

Markus

shizo · Beitrag von **shizo** » 14.12.2005 14:45

hab das anze jetz mal hier mit mouseover:

Code: Alles auswählen

<?php header('Content-Language: en'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Vertical expanding menu in CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>


<style type="text/css">
<!-- 
/* CSS issu des tutoriels www.alsacreations.com/articles */
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {

background: transparent url(images/list-off.gif) left center no-repeat;
padding-left: 15px;
text-align: left;
font: normal 11px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
text-decoration: none;
color: #999;

}
dl#menu {
width: 15em;
}
dl#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;


}
dl#menu dd {

}
dl#menu li {
text-align: center;
background: #fff;
}
dl#menu li a, dl#menu dt a {
 background: transparent url(images/list-off.gif) left center no-repeat;
padding-left: 15px;
text-align: left;
font: normal 11px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
text-decoration: none;
color: #999;
}

dl#menu li a:hover, dl#menu dt a:hover {
 background: transparent url(images/list-on.gif) left center no-repeat;
color: black;
}

#mentions {
font-family: verdana, arial, sans-serif;
position: absolute;
bottom : 200px;
left : 10px;
color: #000;
background-color: #ddd;
}
#mentions a {text-decoration: none;
color: #222;
}
#mentions a:hover{text-decoration: underline;
}
 #navcontainer ul
{
list-style-type: none;
text-align: left;
}

#navcontainer ul li a
{
background: transparent url(images/list-off.gif) left center no-repeat;
padding-left: 15px;
text-align: left;
font: normal 11px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
text-decoration: none;
color: #999;
}

#navcontainer ul li a:hover
{
background: transparent url(images/list-on.gif) left center no-repeat;
color: black;
}

#navcontainer ul li a#current
{
background: transparent url(images/list-active.gif) left center no-repeat;
color: #666;
}
-->
</style>
</head>

<body>
 <div id="navcontainer">
  <ul id="navlist">
<dl id="menu">

		<dt onmouseover="javascript:montre();"><a href="#">Menu 1</a></dt>
			
		<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>
			<dd id="smenu2">
				<ul>
					<li><a href="#">Sous-Menu 2.1</a></li>
					<li><a href="#">Sous-Menu 2.2</a></li>

					<li><a href="#">Sous-Menu 2.3</a></li>
				</ul>
			</dd>	

		<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
			<dd id="smenu3">
				<ul>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>

					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
				</ul>
			</dd>

		<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
			<dd id="smenu4">
				<ul>
					<li><a href="#">Sous-Menu 4.1</a></li>
					<li><a href="#">Sous-Menu 4.1</a></li>
				</ul>
			</dd>

	
</dl>

 </ul>
 </div>


</body>
</html>

edit:

so alles gelöst nur noch die frage wie mache is es dass bei menu 1 auch bei mouseover unten was kommt

Beitrag von **Markus67** » 14.12.2005 15:08

Hi ...

ersetze das hier ...

Code: Alles auswählen

      <dt onmouseover="javascript:montre();"><a href="#">Menu 1</a></dt>

mit dem hier ...

Code: Alles auswählen

      <dt onmouseover="javascript:montre('smenu1');">Menu 1</dt> 
         <dd id="smenu1"> 
            <ul> 
               <li><a href="#">Sous-Menu 1.1</a></li> 
               <li><a href="#">Sous-Menu 1.2</a></li> 

               <li><a href="#">Sous-Menu 1.3</a></li> 
            </ul> 
         </dd>

Markus