Ankündigung

Einklappen
Keine Ankündigung bisher.

Problem mit css/Javascript-Navi

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Problem mit css/Javascript-Navi

    Hallo ich habe hier eine tolle Navigation gefunden, die ich auch in eine Testseite eingebaut habe.
    http://standards.webmasterpro.de/dat...appmenue.html#
    Wenn man auf Einen Navi-Punkt klickt, öffnen sich drunter die Untermenüs. Sie haben als Verweisziel ein #.
    Soweit so gut!
    <a href="#" onclick="javascript:zeigen('submenue1')">Oberpunkt 01</a>

    wenn ich aber die Navi meiner Seite anpasse und HTML-Dateien als Verweise einbinde,

    <a href="ueberuns.html" onclick="javascript:zeigen('submenue1')">Oberpunkt 01</a>

    öffnet sich das Untermenü beim Klicken kurz und geht wieder zu.



    wie kann ich das ändern?
    http://www.erlebniswelt-museum.de/index.html

  • #2
    AW: Problem mit css/Javascript-Navi

    In meinem Firefox funktioniert es prima ?!

    Kommentar


    • #3
      AW: Problem mit css/Javascript-Navi

      Zitat von threadi Beitrag anzeigen
      In meinem Firefox funktioniert es prima ?!
      darf ich mal deinen Quelltext sehen??
      http://www.erlebniswelt-museum.de/index.html

      Kommentar


      • #4
        AW: Problem mit css/Javascript-Navi

        Äh, na der den du da hochgeladen hast

        Code:
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
        
        <html xmlns="http://www.w3.org/1999/xhtml">  
          
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Webstandards-Projekt - Beipiele</title>
        
        <!-- Dieses Javascript ist für den Wechsel von "unsichtbar" zum Blockelement verantwortlich -->
        
        <script type="text/javascript">
        <!--
        window.onload=zeigen;
        function zeigen(id) {
        	for (var i = 1; i<=5; i++) {
        		if (document.getElementById("submenue"+i)) {document.getElementById("submenue"+i).style.display="none";}
        	}
        if (document.getElementById(id)) {document.getElementById(id).style.display="block";}
        }
        //-->
        </script>
        
        
        <style type="text/css">
        
        body 
        {
            background: 	#e8e7e3;
            margin-left:	10%;
        	font-size:		0.8em;
        	font-family:	"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        }
        
        a
        {
        	color:			#b3655a;
        	text-decoration:none;
        	background:		#f6f6f6;
        }
        
        a:hover
        {
        	background:		none;
        	color:			#666;
        }
        
        h1
        {
        	color:			#53B1FF;
        	margin:			1em 0;
        	padding:		0;
        	font-size:		2em;
        	text-align:		left;
        }
        
        h1 span
        {
        	font-size:		1.1em;
        	color:			#34537c;
        }
        
        h2
        {
        	color:			#B3655A;
        	margin:			0.5em 0;
        	font-size:		1.2em;
        }
        
        ul, li 
        {
        	margin: 		0;
        	padding: 		0;
        	list-style-type: none;
        }
        
        ul#menue {
        	width: 			300px;
        	margin: 		3em 0 0 0;
        }
        
        ul#menue li a 
        {
        	margin: 		2px 0;
        	height: 		25px;
        	line-height: 	25px;
        	text-align: 	center;
        	border: 		1px solid #666;
        	background: 	#ccc;
        	display:		block;
        	color:			#000;
        	text-decoration:none;
        }
        
        ul#menue li a + ul.submenue{
        	display:		none;
        }
        
        ul#menue li a:focus + ul.submenue {
        	display:		block;
        	color:			#34537c;
        }
        
        ul#submenue1 li a, ul#submenue2 li a, ul#submenue3 li a, ul#submenue4 li a{
        	background:		none; /* IE */
        }
        
        </style>
        
        </head>
        
        <body>
        <h1><span>&lt;</span> Aufklappmenü ohne Javascript.<span>&gt;</span></h1>
        
        <p><a title="Javascript sollte aktiviert sein." href="javascript:history.back();">&lt;&lt; Zur&uuml;ck</a></p>
        
        <h2>Für dern Internet Explorer wird die Funktionalität per Javascript sichergestellt.</h2>
        <ul id="menue">
        	<li><a href="#" onclick="javascript:zeigen('submenue1')">Oberpunkt 01</a>
        
        		<ul id="submenue1" class="submenue">
        			<li><a href="#">Untermenü 1.a</a></li>
        			<li><a href="#">Untermenü 1.b</a></li>
        			<li><a href="#">Untermenü 1.c</a></li>
        		</ul>
        	</li>	
        			
        	<li><a href="#" onclick="javascript:zeigen('submenue2')">Oberpunkt 02</a>
        
        		<ul id="submenue2" class="submenue">
        			<li><a href="#">Unterpunkt 2.a</a></li>
        			<li><a href="#">Unterpunkt 2.b</a></li>
        			<li><a href="#">Unterpunkt 2.c</a></li>
        		</ul>
        	</li>	
        
        	<li><a href="#" onclick="javascript:zeigen('submenue3')">Oberpunkt 03</a>
        
        		<ul id="submenue3" class="submenue">
        			<li><a href="#">Unterpunkt 3.a</a></li>
        			<li><a href="#">Unterpunkt 3.b</a></li>
        			<li><a href="#">Unterpunkt 3.c</a></li>
        		</ul>
        	</li>
        
        	<li><a href="#" onclick="javascript:zeigen('submenue4')">Oberpunkt 04</a>
        
        		<ul id="submenue4" class="submenue">
        			<li><a href="#">Unterpunkt 4.a</a></li>
        			<li><a href="#">Unterpunkt 4.b</a></li>
        			<li><a href="#">Unterpunkt 4.c</a></li>
        		</ul>
        	</li>
        </ul>
        </body>
        
        </html>

        Kommentar


        • #5
          AW: Problem mit css/Javascript-Navi

          Zitat von threadi Beitrag anzeigen
          Äh, na der den du da hochgeladen hast

          Code:
          <ul id="menue">
          	<li><a href="#" onclick="javascript:zeigen('submenue1')">Oberpunkt 01</a>
          
          		<ul id="submenue1" class="submenue">
          			<li><a href="#">Untermenü 1.a</a></li>
          			<li><a href="#">Untermenü 1.b</a></li>
          			<li><a href="#">Untermenü 1.c</a></li>
          		</ul>
          	</li>	
          			
          	<li><a href="#" onclick="javascript:zeigen('submenue2')">Oberpunkt 02</a>
          
          		<ul id="submenue2" class="submenue">
          			<li><a href="#">Unterpunkt 2.a</a></li>
          			<li><a href="#">Unterpunkt 2.b</a></li>
          			<li><a href="#">Unterpunkt 2.c</a></li>
          		</ul>
          	</li>	
          
          	<li><a href="#" onclick="javascript:zeigen('submenue3')">Oberpunkt 03</a>
          
          		<ul id="submenue3" class="submenue">
          			<li><a href="#">Unterpunkt 3.a</a></li>
          			<li><a href="#">Unterpunkt 3.b</a></li>
          			<li><a href="#">Unterpunkt 3.c</a></li>
          		</ul>
          	</li>
          
          	<li><a href="#" onclick="javascript:zeigen('submenue4')">Oberpunkt 04</a>
          
          		<ul id="submenue4" class="submenue">
          			<li><a href="#">Unterpunkt 4.a</a></li>
          			<li><a href="#">Unterpunkt 4.b</a></li>
          			<li><a href="#">Unterpunkt 4.c</a></li>
          		</ul>
          	</li>
          </ul>
          Ich wollte damit folgendes sagen:

          wenn ich anstatt der # z.b. Blabla.html einsetze, dann bleibt das Untermenü nicht offen, beim klicken. Es geht wieder zu.
          http://www.erlebniswelt-museum.de/index.html

          Kommentar


          • #6
            AW: Problem mit css/Javascript-Navi

            Ach soooo ... nun, das Menü geht nicht einfach zu, es wird die dort angegebene Seite geladen. Um dies zu verhindern musst du bei onclick ein "return false;" einfügen. Z.B. so:

            Code:
             onclick="javascript:zeigen('submenue2');return false;"

            Kommentar

            homepage-forum.de - Hilfe für Webmaster! Statistiken

            Einklappen

            Themen: 56.735   Beiträge: 429.427   Mitglieder: 28.490   Aktive Mitglieder: 41
            Willkommen an unser neuestes Mitglied, KoaLa13bfp.

            Online-Benutzer

            Einklappen

            281 Benutzer sind jetzt online. Registrierte Benutzer: 5, Gäste: 276.

            Mit 3.502 Benutzern waren am 23.01.2020 um 18:20 die meisten Benutzer gleichzeitig online.

            Die neuesten Themen

            Einklappen

            Die neuesten Beiträge

            Einklappen

            Lädt...
            X