mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 08.12.2016 03:29 Benutzername: Passwort: Auto-Login

Thema: CSS Drop-Down Menü mit Javascript vom 09.02.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> CSS Drop-Down Menü mit Javascript
Seite: 1, 2  Weiter
Autor Nachricht
wandgucker
Threadersteller

Dabei seit: 22.02.2002
Ort: -
Alter: -
Geschlecht: Weiblich
Verfasst Do 09.02.2006 13:20
Titel

CSS Drop-Down Menü mit Javascript

Antworten mit Zitat Zum Seitenanfang

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 13:53, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
tacker

Dabei seit: 22.03.2002
Ort: Offenbach am Main
Alter: 36
Geschlecht: Männlich
Verfasst Do 09.02.2006 13:54
Titel

Antworten mit Zitat Zum Seitenanfang

Bitte immer die [code] Tags verwenden!
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 35
Geschlecht: Männlich
Verfasst Do 09.02.2006 14:27
Titel

Antworten mit Zitat Zum Seitenanfang

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 14:28, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
wandgucker
Threadersteller

Dabei seit: 22.02.2002
Ort: -
Alter: -
Geschlecht: Weiblich
Verfasst Do 09.02.2006 14:41
Titel

Antworten mit Zitat Zum Seitenanfang

Vielen vielen Dank!!! Funktioniert;))
  View user's profile Private Nachricht senden
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 35
Geschlecht: Männlich
Verfasst Do 09.02.2006 15:01
Titel

Antworten mit Zitat Zum Seitenanfang

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 15:02, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
wandgucker
Threadersteller

Dabei seit: 22.02.2002
Ort: -
Alter: -
Geschlecht: Weiblich
Verfasst Mo 13.02.2006 13:39
Titel

Antworten mit Zitat Zum Seitenanfang

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?
  View user's profile Private Nachricht senden
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 35
Geschlecht: Männlich
Verfasst Mo 13.02.2006 13:49
Titel

Antworten mit Zitat Zum Seitenanfang

du suchst sowas:
http://www.traum-projekt.com/forum/sitemap/t-72161.html

... oder machst das mit php (wäre sinnvoller).
  View user's profile Private Nachricht senden
wandgucker
Threadersteller

Dabei seit: 22.02.2002
Ort: -
Alter: -
Geschlecht: Weiblich
Verfasst Mo 13.02.2006 13:56
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
 
Ähnliche Themen CSS Drop Down Menü
Drop-Down-Menü in CSS soll nun auch im IE funktionieren
Problem mit Drop-Down Menü [CSS]
CSS-drop-down-menu OHNE javascript
Drop Down Menü
Drop-Down Menü
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.