Seite 1 von 3
Dynamisches Menu mit CSS erstellen
Verfasst: 13.12.2005 18:22
von shizo
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?
Verfasst: 13.12.2005 20:40
von 123teddy321
also ich würde es glaube mit java script lösen! da mouseover und mouseout ja jabva script sind!
Verfasst: 13.12.2005 21:05
von FatFreddy
Verfasst: 14.12.2005 13:16
von shizo
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?
Verfasst: 14.12.2005 14:01
von chriss713
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!
Verfasst: 14.12.2005 14:06
von Markus67
Hi ...
mit CSS alleine bekommst du das nicht gebacken ... aber hier mal was zum "tüfteln"
http://css.maxdesign.com.au/listamatic/
Markus
Verfasst: 14.12.2005 14:18
von shizo
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>
Verfasst: 14.12.2005 14:30
von Markus67
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
Verfasst: 14.12.2005 14:45
von shizo
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
Verfasst: 14.12.2005 15:08
von Markus67
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