✔ Javascript Fehlermeldung bei Navigationsbar (Anpassung)

Status
Nicht offen für weitere Antworten.
I

Ilse Müller

Grünschnabel
Grundproblematik: (http://www.tutorials.de/tutorials211684.html)

Ich benötige eine Navigationsbar, die nicht nur einen Menüpunkt hat, sondern bei Bedarf auch einen Unter- bzw. ThemaUntermenüpunkt hat.
Im Anhang nun etwas was mich in diesem Punkt wirklich weiter bringt und von mir auch schon fast vollständig angepasst werden konnte. Nichts desto Trotz erhalte ich an der (im Source Code) markierten Stelle immer einen Javascript-Fehler (Zeile 71 Zeichen 13 Fehler Objekt erforderlich), wenn ich diese einfach entferne. Warum ist dem so? Was muss ich tun um das Menü in dieser Form zu nutzen:

Menüpunkt 1
Untermenüpunkt 1
UnterUntermenüpunkt 1.1
UnterUntermenüpunkt 1.2
UnterUntermenüpunkt 1.3
Untermenüpunkt 2
Untermenüpunkt 3
Untermenüpunkt 4

Menüpunkt 2
Untermenüpunkt 1
Untermenüpunkt 2
Untermenüpunkt 3

Menüpunkt 3
Untermenüpunkt 1
UnterUntermenüpunkt 1.1
UnterUntermenüpunkt 1.2
Untermenüpunkt 2

Menüpunkt 4
Untermenüpunkt 1

Weiss jemand einen Rat?
 

Anhänge

Déjà-Vu! Das von dir verwendete JavaScript zum Ein- und Ausblenden der Submenüs habe ich erst vor kurzem für das Mitglied Djingeringe korrigiert und angepasst -> Javascript - Wo steckt der Fehler in diesem Script? :suspekt:

Ilse Müller hat gesagt.:
Nichts desto Trotz erhalte ich an der (im Source Code) markierten Stelle immer einen Javascript-Fehler (Zeile 71 Zeichen 13 Fehler Objekt erforderlich), wenn ich diese einfach entferne. Warum ist dem so? Was muss ich tun um das Menü in dieser Form zu nutzen
Zum Vergrößern anklicken....
Wenn du die Menü-Ebene #sub1_thema2 nicht benötigst, dann musst du sie im JavaScript-Code löschen und den EventHandler onclick= mit der Script-Anweisung zum Öffnen dieser Ebene (onclick="open_close_thema('sub1_thema2', 'sub_master2'" ) aus dem 'darüberliegenden' DIV#sub2_master1 entfernen - dann gibt's auch keine Script-Fehlermeldung ;-]

Nachfolgend die modifizierten Komponenten für deine gewünschte Menü-Struktur.

CSS:
Code: 
#master1, #master2, #master3, #master4 { /* Hauptmenü-Punkte */
   position:relative;
   margin:10px 0px 0px 10px;
   border: 1px solid #000000;
}
Java-Script:
Code: 
function open_close_sub (id)
{
   if (document.getElementById(id).style.display == 'block')
   {
      document.getElementById(id).style.display='none';
   }
   else
   {
   // Submenüs
    document.getElementById('sub_master1').style.display='none';
    document.getElementById('sub_master2').style.display='none';
    document.getElementById('sub_master3').style.display='none';
    document.getElementById('sub_master4').style.display='none';

    document.getElementById(id).style.display='block';
   }
}
function open_close_thema (id, parent)
{
   // SubsubMenüs
   var sub_master1 = new Array ('sub1_thema1');
   var sub_master3 = new Array ('sub3_thema1');
  
   if (document.getElementById(id).style.display == 'block')
   {
      document.getElementById(id).style.display='none';
   }
   else
   {
     // Submenü 1
     if (parent == 'sub_master1')
      {
         for (j=0; j<sub_master1.length; j++)
         {
            document.getElementById(sub_master1[j]).style.display='none';
         }

         document.getElementById(id).style.display='block';
      }

     // Submenü 2
      if (parent == 'sub_master2')
      {
         for (j=0; j<sub_master2.length; j++)
         {
            document.getElementById(sub_master2[j]).style.display='none';
         }

         document.getElementById(id).style.display='block';
      }
     // Submenü 3
      if (parent == 'sub_master3')
      {
         for (j=0; j<sub_master3.length; j++)
         {
            document.getElementById(sub_master3[j]).style.display='none';
         }

         document.getElementById(id).style.display='block';
      }
     // Submenü 4
      if (parent == 'sub_master4')
      {
         for (j=0; j<sub_master4.length; j++)
         {
            document.getElementById(sub_master4[j]).style.display='none';
         }

         document.getElementById(id).style.display='block';
      }
   }
}
HTML-Source:
HTML: 
<!-- MENÜ 1 -->
<div id='master1' onClick="open_close_sub('sub_master1')">Kategorie 1</div>
<div id='sub_master1' style='display:none;'>
<div id='sub1_master1' class='sub' onClick="open_close_thema('sub1_thema1', 'sub_master1')">Subkategorie 1.1</div>
<div id='sub1_thema1' name='thema_sub1' style='display:none;'>
<div class='thema'><a href='#'>Thema Sub 1</a></div>
<div class='thema'><a href='#'>Thema Sub 2</a></div>
</div>
<div id='sub2_master1' class='sub'>Subkategorie 1.2</div>
<div id='sub3_master1' class='sub'>Subkategorie 1.3</div>
<div id='sub4_master1' class='sub'>Subkategorie 1.4</div>
</div><!-- Ende div: sub_master1 -->


<!-- MENÜ 2 -->
<div id='master2' onClick="open_close_sub('sub_master2')">Kategorie 2</div>
<div id='sub_master2' style='display:none;'>
<div id='sub1_master2' class='sub'>Subkategorie 2.1</div>
<div id='sub2_master2' class='sub'>Subkategorie 2.2</div>
<div id='sub3_master2' class='sub'>Subkategorie 2.3</div>
</div><!-- Ende div: sub_master2 -->


<!-- MENÜ 3 -->
<div id='master3' onClick="open_close_sub('sub_master3')">Kategorie 3</div>
<div id='sub_master3' style='display:none;'>
<div id='sub1_master3' class='sub' onClick="open_close_thema('sub3_thema1', 'sub_master3')">Subkategorie 3.1</div>
<div id='sub3_thema1' style='display:none;'>
<div class='thema'><a href='#'>Thema Sub 1</a></div>
<div class='thema'><a href='#'>Thema Sub 2</a></div>
</div>
<div id='sub2_master3' class='sub'>Subkategorie 3.2</div>
</div><!-- Ende div: sub_master3 -->


<!-- MENÜ 4 -->
<div id='master4' onClick="open_close_sub('sub_master4')">Kategorie 4</div>
<div id='sub_master4' style='display:none;'>
<div id='sub1_master4' class='sub'>Subkategorie 4.1</div>
</div><!-- Ende div: sub_master4 -->


[ editpost 22:05 ] Füge mal sicherheitshalber den kompletten Seiten-Quelltext hinzu:

HTML: 
<html>
<head>
<title>Klick Menü</title>

<style type="text/css">
<!--
div {
width: 147px;
cursor: pointer;
}

#master1, #master2, #master3, #master4 { /* Hauptmenü-Punkte */
   position:relative;
   margin:10px 0px 0px 10px;
   border: 1px solid #000000;
}

.sub   {
position:relative;
margin:1px 0px 0px 10px;
background-color: #FF0033;
}

.thema {
position:relative;
margin:1px 0px 0px 10px;
background-color: #33FF66;
}
//-->
</style>

<script type="text/javascript">
<!--
function open_close_sub (id)
{
   if (document.getElementById(id).style.display == 'block')
   {
      document.getElementById(id).style.display='none';
   }
   else
   {
   // Submenüs
    document.getElementById('sub_master1').style.display='none';
    document.getElementById('sub_master2').style.display='none';
    document.getElementById('sub_master3').style.display='none';
    document.getElementById('sub_master4').style.display='none';

    document.getElementById(id).style.display='block';
   }
}
function open_close_thema (id, parent)
{
   // SubsubMenüs
   var sub_master1 = new Array ('sub1_thema1');
   var sub_master3 = new Array ('sub3_thema1');
  
   if (document.getElementById(id).style.display == 'block')
   {
      document.getElementById(id).style.display='none';
   }
   else
   {
     // Submenü 1
     if (parent == 'sub_master1')
      {
         for (j=0; j<sub_master1.length; j++)
         {
            document.getElementById(sub_master1[j]).style.display='none';
         }

         document.getElementById(id).style.display='block';
      }

     // Submenü 2
      if (parent == 'sub_master2')
      {
         for (j=0; j<sub_master2.length; j++)
         {
            document.getElementById(sub_master2[j]).style.display='none';
         }

         document.getElementById(id).style.display='block';
      }

     // Submenü 3
      if (parent == 'sub_master3')
      {
         for (j=0; j<sub_master3.length; j++)
         {
            document.getElementById(sub_master3[j]).style.display='none';
         }

         document.getElementById(id).style.display='block';
      }

     // Submenü 4
      if (parent == 'sub_master4')
      {
         for (j=0; j<sub_master4.length; j++)
         {
            document.getElementById(sub_master4[j]).style.display='none';
         }

         document.getElementById(id).style.display='block';
      }
   }
}
//-->
</script>

</head>
<body>

<!-- MENÜ 1 -->
<div id='master1' onClick="open_close_sub('sub_master1')">Kategorie 1</div>
<div id='sub_master1' style='display:none;'>
<div id='sub1_master1' class='sub' onClick="open_close_thema('sub1_thema1', 'sub_master1')">Subkategorie 1.1</div>
<div id='sub1_thema1' name='thema_sub1' style='display:none;'>
<div class='thema'><a href='#'>Thema Sub 1</a></div>
<div class='thema'><a href='#'>Thema Sub 2</a></div>
</div>
<div id='sub2_master1' class='sub'>Subkategorie 1.2</div>
<div id='sub3_master1' class='sub'>Subkategorie 1.3</div>
<div id='sub4_master1' class='sub'>Subkategorie 1.4</div>
</div><!-- Ende div: sub_master1 -->


<!-- MENÜ 2 -->
<div id='master2' onClick="open_close_sub('sub_master2')">Kategorie 2</div>
<div id='sub_master2' style='display:none;'>
<div id='sub1_master2' class='sub'>Subkategorie 2.1</div>
<div id='sub2_master2' class='sub'>Subkategorie 2.2</div>
<div id='sub3_master2' class='sub'>Subkategorie 2.3</div>
</div><!-- Ende div: sub_master2 -->


<!-- MENÜ 3 -->
<div id='master3' onClick="open_close_sub('sub_master3')">Kategorie 3</div>
<div id='sub_master3' style='display:none;'>
<div id='sub1_master3' class='sub' onClick="open_close_thema('sub3_thema1', 'sub_master3')">Subkategorie 3.1</div>
<div id='sub3_thema1' style='display:none;'>
<div class='thema'><a href='#'>Thema Sub 1</a></div>
<div class='thema'><a href='#'>Thema Sub 2</a></div>
</div>
<div id='sub2_master3' class='sub'>Subkategorie 3.2</div>
</div><!-- Ende div: sub_master3 -->


<!-- MENÜ 4 -->
<div id='master4' onClick="open_close_sub('sub_master4')">Kategorie 4</div>
<div id='sub_master4' style='display:none;'>
<div id='sub1_master4' class='sub'>Subkategorie 4.1</div>
</div><!-- Ende div: sub_master4 -->

</body>
</html>
 
Zuletzt bearbeitet von einem Moderator:
Hallo!

Da ich seit Donnerstag im Kurzurlaub war (bei diesem Wetter konnte ich einfach nicht anders) habe ich erst jetzt gesehen, dass sich hier jemand sehr viel Mühe gemacht hat.

So startet man gern in den Tag, diese Thematik hat mir nun nämlich schon den letzten Nerv geraubt gehabt und ich war kurz vorm aufgeben.
Vielen, vielen, herzlichen Dank für Deine Hilfe und die Mühe die Du Dir gegeben hast- es klappt erstklassig und einwandfrei!

Ich wünsche im allgemeinen einen guten Start in die Woche! :-)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück