| Autor |
Nachricht |
wandgucker
Threadersteller
Dabei seit: 22.02.2002
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Do 09.02.2006 14:20
Titel CSS Drop-Down Menü mit Javascript |
  |
|
Hi,
habe hier ein CSS Drop-Down Menü mit Javascript (für den IE)
jetzt hätte ich gern, dass sich die Submenü Punkte wieder ausblenden,
sobald ich erneut auf das 2. Menuitem klicke.
Habe es schon mit onmouseout probiert, dann verschwindet allerdings
das Submenü komplett. Googeln und die Suche hier brachten
bisher leider keinen Erfolg. Wäre für jeden Tipp dankbar;)
Gruß wandgucker
| Code: | <html>
<head>
<title></title>
<style type="text/css" media="screen">
<!--
body
{
margin: 0;
padding: 0;
background: white;
font: bold 8pt Verdana, sans-serif;
color: gray;
}
dl
{
border-width: 1px 0 0 0;
border-style: solid;
border-color: gray;
}
dl, dt, dd, ul, li
{
margin: 0;
padding: 0;
list-style-type: none;
}
#menu
{
position: absolute; /* Menu position that can be changed at will */
top: 20px;
left: 20px;
}
#menu
{
width: 260px;
}
#menu dt
{
cursor: pointer;
margin: 0;
padding: 2px 0 2px 0;
height: 17px;
line-height: 17px;
text-align: left;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: gray;
background: #FFF;
}
#menu dd
{
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: gray;
}
#menu li
{
text-align: left;
background: #E6E6E6;
}
#menu dd li a.last
{
border: 0px;
}
#menu li a, #menu dt a
{
color: gray;
text-decoration: none;
display: block;
height: 100%;
padding: 0 0 0 70px;
}
#menu dt a:hover
{
display: block;
background-color: #E6E6E6;
}
#menu li a
{
border-width: 0 0 1px 0;
border-style: solid;
border-color: gray;
padding: 4px 0 4px 70px;
}
#menu li a:hover
{
display: block;
background-color: silver;
color: white;
}
#menu li a:active
{
display: block;
}
-->
</style>
<script type="text/javascript">
<!--
window.onload=show;
function show(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>
</head>
<body>
<dl id="menu">
<dt onclick="javascript:show();"><a href="#">1. Menuitem</a></dt>
<dt onclick="javascript:show('smenu2');"><a href="#" class="smenu">2. Menuitem</a></dt>
<dd id="smenu2">
<ul>
<li><a href="#">1. Submenu</a></li>
<li><a href="#" class="last">2. Submenu</a></li>
</ul>
</dd>
</dl>
</body>
</html> |
Zuletzt bearbeitet von tacker am Do 09.02.2006 14:53, insgesamt 1-mal bearbeitet
|
|
| |
  |
 |
tacker
Dabei seit: 22.03.2002
Ort: Trondheim, Norwegen
Alter: 43
Geschlecht: 
|
Verfasst Do 09.02.2006 14:54
Titel
|
|
|
|
Bitte immer die [code] Tags verwenden!
|
|
| |
 |
|
|
Anzeige
|
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Do 09.02.2006 15:27
Titel
|
|
|
| Code: |
<script type="text/javascript">
<!--
window.onload=show;
function show(id)
{
var d = document.getElementById(id);
for (var i = 1; i<=10; i++)
{
if (document.getElementById('smenu'+i) && document.getElementById('smenu'+i) != d)
{
document.getElementById('smenu'+i).style.display='none';
}
}
if (d) {
if (d.style.display == 'none')
{
d.style.display = 'block';
}
else {
d.style.display = 'none';
}
}
}
//-->
</script>
</head>
|
Zuletzt bearbeitet von sahnemuh am Do 09.02.2006 15:28, insgesamt 1-mal bearbeitet
|
|
| |
|
|
wandgucker
Threadersteller
Dabei seit: 22.02.2002
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 09.02.2006 15:41
Titel
|
|
|
|
Vielen vielen Dank!!! Funktioniert;))
|
|
| |
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Do 09.02.2006 16:01
Titel
|
|
|
vielleicht nochmal für den lerneffekt:
geändert habe ich:
| Code: | if (document.getElementById('smenu'+i) && document.getElementById('smenu'+i) != d )
|
(also wenn es das objekt mit der id smenu +x gibt, blende es aus aber NICHT wenn es d [also dem in der variable übergebenen objekt] entspricht. somit wird das objekt, sollte es grade angezeigt werden nicht automatisch ausgeblendet).
| Code: | if (d)
if (d.style.display == 'none')
{
d.style.display = 'block';
}
else {
d.style.display = 'none';
}
} |
hier wird überprüft, ob "d" existiert. ist dies der fall, wurde auf einen link geklickt (bei aufruf der seite wird die funktion ohne eine variable aufgerufen.. es gibt also kein "d").
danach wird überprüft, ob das objekt grade ausgeblendet ist. wenn ja (if): einblenden, wenn nein(else): ausblenden.
Zuletzt bearbeitet von sahnemuh am Do 09.02.2006 16:02, insgesamt 1-mal bearbeitet
|
|
| |
|
|
wandgucker
Threadersteller
Dabei seit: 22.02.2002
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 13.02.2006 14:39
Titel
|
|
|
merci,
habe mittlerweile ein anderes Problem- wenn ich auf einen der Links klicke wird
der Inhalt der Seite sowie das Menü neu geladen, d.h. das ausgeklappte Submenü
wird sowieso zugeklappt- unerwünschter Effekt, da der User dann nicht mehr weiß
wo er sich gerade befindet, bzw. nochmal neu suchen muss..
bin gerad am googeln wie ich das umgehen kann..dachte zunächst an einen onload
auf jeder Seite, der den jeweiligen zustand aufrufen soll, wäre aber ziemlich
umfangreich..habt ihr noch einen tipp?
|
|
| |
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
|
| |
|
|
wandgucker
Threadersteller
Dabei seit: 22.02.2002
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 13.02.2006 14:56
Titel
|
|
|
oweia, ne php geht leider nich.
Problem ist dass es jsp seiten sind die früher eine layer navi
hatten, die jetzt aber nicht mehr von firefox unterstützt
wird, deswegen probier ich es mit javascript..
trotzdem danke
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Drop Down Menü
Art drop down menü?
Drop Down Menü
Drop-Down Menü
CSS Drop Down Menü
Problem mit Drop-Down Menü [CSS]
|
|
Willkommen auf dem Portal für Mediengestalter
