[JavaScript] Klappmenü gesucht (3 Ebenen, ohne Seite neu zu laden...)

Einklappen
X
Einklappen
 
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige template Weiter
  • #1

    [JavaScript] Klappmenü gesucht (3 Ebenen, ohne Seite neu zu laden...)

    Hallo zusammen,

    wenn ihr mal auf diese Homepage geht seht Ihr dort links ein Klappmenü. (www.clearmedia.ch). So ein ähnliches Klappmenü möchten wir, die Farben etc. sind egal, es geht um ein paar Details, und ich wollte fragen ob jemand von Euch solchen Code kennt oder gar ein Beispielklappmenü das wir so runterladen können.

    Wichtig ist:

    -Das es über 3. Ebenen gehen, also HAUPTEBENE - UNTEREBENE 1 - UNTEREBENE 2 (auf clearmedia.ch hat es nur 1. Unterebene)

    -Wenn man auf die übergeordnete Gruppe klickt (z.B Dienstleistungen) sollte nur das Menü aufklappen, und nicht die ganze Seite neu geladen werden (wie es auch bei clearmedia.ch klappt.)

    Danke für Eure Hilfe!!!!!!!!!
    EDIT:
    Scriptgesuche ins richtige Forum, verflixt!
    *verschieb*
    wahsaga
    Zuletzt geändert von wahsaga; 17.01.2006, 17:51.
    Stichworte: -
  • #2
    und warum schaust du nicht einfach in den code der seite?
    INFO: Erst suchen, dann posten![color=red] | [/color]MANUAL(s): PHP | MySQL | HTML/JS/CSS[color=red] | [/color]NICE: GNOME Do | TESTS: Gästebuch[color=red] | [/color]IM: Jabber.org |


    Kommentar

    • #3
      weil es dort nicht über 3 ebenen geht...

      Kommentar

      • #4
        ??? das funktioniert doch,es sind drei ebenen.
        hier der code

        <html>

        <head>
        <title>Dienstleistungen </title>
        <link href="style.css" rel="stylesheet" type="text/css">
        <meta name="generator" content="">
        <script language="JavaScript" type="text/javascript">
        <!--
        document.delayedDivHiding = false;

        var lastVisibleDiv = '';

        /* Swap visibility */
        function toggleVisibility(divID)
        {
        if(lastVisibleDiv != divID && lastVisibleDiv != '')
        {
        if(divIsVisible(lastVisibleDiv)) hideDiv( lastVisibleDiv );
        }
        var x = ( divIsVisible(divID) ? hideDiv( divID ) :showDiv( divID ) );
        }
        /* Check if the DIV is visible or not */
        function divIsVisible(divID){
        var e = document.getElementById(divID);
        if (!e) return false;
        return ( e.style.visibility == "visible") ;
        }
        /* Show the DIV */
        function showDiv(divID)
        {
        var e = document.getElementById(divID);
        if (!e) return false;
        e.style.visibility = "visible";
        e.style.display = "block";
        document.delayedDivHiding = divID;
        if(divID.substr(0,5) == 'FMAIN') lastVisibleDiv = divID;
        }

        /* Hide the DIV */
        function hideDiv(divID)
        {
        var e = document.getElementById(divID);
        if (!e) return false;
        if ( document.delayedDivHiding != divID || divID.substr(0,5) == 'FMAIN')
        {
        e.style.visibility ="hidden";
        e.style.display ="none";
        }
        }

        /* Reset the delay */
        function clearHidingDelay(){
        document.delayedDivHiding = false;
        }

        /* Hide the DIV - delayed */
        function hideDivDelayed(divID,delayTime)
        {
        if (!delayTime || delayTime =="undefined" ) delayTime = 50;
        window.setTimeout("hideDiv('"+divID+"')", delayTime);
        }

        /* Convert dezimal unicode */
        function dc_ConvertSpecialChars(theText)
        {
        dc_ConvertLoop = function(arg1,arg2)
        {
        var i = parseInt(arg2);
        return ( i && i > 0 ? String.fromCharCode(i): arg1 );
        }
        RegExp.lastIndex = 0;
        return theText.replace(/\&\#(\d+)\;/g, dc_ConvertLoop);
        }
        var name = ( navigator.userAgent.indexOf('MSIE') > 0 ? 'portal_msie' : 'portal_mozilla');
        document.open();
        document.write('<link rel="stylesheet" type="text/css" href="clearmedia.css" />');
        document.close();
        //-->
        </script>
        </head>

        <body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
        <p><div class="foldermainmenu">
        <a href="javascript:toggleVisibility('FMAINM150');" target="_self" class="menu1on">Dienstleistungen</a>

        <div id="FMAINM150" style="visibility:visible; display:visible;">
        <a class="menu1off" href="/dienstleistungen/webdesign/">&gt; Webdesign</a>
        <a class="menu1off" href="/dienstleistungen/fotografie/">&gt; Fotografie</a>
        <a class="menu1off" href="/dienstleistungen/video_produktion/">&gt; Video Produktion</a>
        <a class="menu1off" href="/dienstleistungen/business_software/">&gt; Business Software</a>
        <a class="menu1off" href="/dienstleistungen/printdesign/">&gt; Printdesign</a>

        <a class="menu1off" href="/dienstleistungen/hosting/">&gt; Hosting</a>
        </div>
        </div>


        <div class="foldermainmenu">
        <a class="menu1off" href="/kontakt/">Kontakt</a>
        </div>



        <div class="foldermainmenu">
        <a href="javascript:toggleVisibility('FMAINM151');" class="menu1off">Über uns</a>

        <div id="FMAINM151" style="visibility:hidden; display:none;">

        <a class="menu1off" href="/ueber_uns/philosophie/">&gt; Philosophie</a>

        <a class="menu1off" href="/ueber_uns/partner/">&gt; Partner</a>
        </div>
        </div>


        <div class="foldermainmenu">
        <a href="javascript:toggleVisibility('FMAINM152');" class="menu1off">Galerie</a>

        <div id="FMAINM152" style="visibility:hidden; display:none;">
        <a class="menu1off" href="/galerie/oeffentlich/">&gt; Öffentliche Anlässe</a>
        <a class="menu1off" href="/galerie/gallery/?gallery=menschen">&gt; Menschen</a>

        <a class="menu1off" href="/galerie/gallery/?gallery=tiere">&gt; Tiere</a>
        <a class="menu1off" href="/galerie/gallery/?gallery=natur">&gt; Natur</a>
        </div>
        </div></p>
        </body>


        </html>

        und hier die style.css

        table.copyright {font-size : 8pt; font-family: Arial, Helvetica, sans-serif; font-weight: none; color: #cccccc; text-decoration: none;}
        font.titel1 {font-size : 11pt; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #666666; text-decoration: none; text-align: left;}
        font.titel2 {font-size : 9pt; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #003366; text-decoration: none; text-align: left;}
        table.main {border : solid #000000; border-width: 1px 1px 1px 1px;}

        a.link:link {font-size : 9pt; font-family: Arial, Helvetica, sans-serif; font-weight: none; color: #003366; text-decoration: none}
        a.link:active {font-size : 9pt; font-family: Arial, Helvetica, sans-serif; font-weight: none; color: #003366; text-decoration: none}
        a.link:visited {font-size : 9pt; font-family: Arial, Helvetica, sans-serif; font-weight: none; color: #003366; text-decoration: none}
        a.link:hover {font-size : 9pt; font-family: Arial, Helvetica, sans-serif; font-weight: none; color: #000000; text-decoration: underline}

        a.seite:link {font-size: 8pt; font-family: Arial; font-weight: none; color: #666666; text-decoration: none}
        a.seite:active {font-size: 8pt; font-family: Arial; font-weight: none; color: #666666; text-decoration: none}
        a.seite:visited {font-size: 8pt; font-family: Arial; font-weight: none; color: #666666; text-decoration: none}
        a.seite:hover {font-size: 8pt; font-family: Arial; font-weight: none; color: #666666; text-decoration: none; background-color: #000000}

        input {border : 1px solid black; background-color : #eeeeee;color : black; font-family : arial; font-size : 0.8em; color : black;}
        textarea {border : 1px solid black; background-color : #eeeeee;color : black; font-family : arial; font-size : 0.8em; color : black;}
        input.submit {BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; BACKGROUND: #eeeeee; BORDER-BOTTOM-WIDTH: 1px; FONT: 10px Verdana, Geneva, Arial, Helvetica, sans-serif; COLOR: #000000; BORDER-RIGHT-WIDTH: 0px ;}
        body {
        font-size : 9pt; font-family: Arial, Helvetica, sans-serif; font-weight: none; color: #cccccc; text-decoration: none; text-align: justify;
        scrollbar-face-color: #ffffff; scrollbar-shadow-color: #cccccc;
        scrollbar-highlight-color: #000000; scrollbar-3dlight-color: #bbbbbb;
        scrollbar-darkshadow-color: #cacaca; scrollbar-track-color: #aaaaaa;
        scrollbar-arrow-color: #bababa;
        }
        table {font-size: 9pt; font-family: Arial, Helvetica, sans-serif; font-weight: none; color: #000000; text-decoration: none; text-align: justify}

        img.border {border : solid #000000; border-width: 0px 0px 1px 1px;}
        img.fullborder {border : solid #000000; border-width: 1px 1px 1px 1px;}
        #menu {
        background: #EBEBEB;
        padding: 10px 10px 40px 11px;
        margin: 0px;
        font-size: 11px;
        text-align: left;
        float: left;
        height: 100%;
        }



        /* Mainmenu 1 */

        .menu1off {
        border-style: solid;
        border-width: 1px;
        border-color: #F3F3F3 #C7C7C7 #C7C7C7 #F3F3F3;
        background: #E2E2E2;
        padding: 4px 0 4px 4px;
        display: block;
        font-weight: bold;
        color: #666666;
        text-decoration: none;
        }
        .menu1on {
        border-style: solid;
        border-width: 1px;
        border-color: #F3F3F3 #C7C7C7 #C7C7C7 #F3F3F3;
        background: #E2E2E2;
        padding: 4px 0 4px 4px;
        display: block;
        font-weight: bold;
        color: #003399;
        text-decoration: none;
        }
        a:hover.menu1off, a:hover.menu1on {
        color:#003399;
        background: #F5F5F5;
        }

        /* Mainmenu 2 */

        .menu2off {
        border-style: solid;
        border-width: 1px;
        border-color: #F3F3F3 #C7C7C7 #C7C7C7 #F3F3F3;
        background: #E2E2E2;
        padding: 4px 0 4px 12px;
        display: block;
        font-weight: bold;
        color: #666666;
        text-decoration: none;
        }
        .menu2on {
        border-style: solid;
        border-width: 1px;
        border-color: #F3F3F3 #C7C7C7 #C7C7C7 #F3F3F3;
        background: #E2E2E2;
        padding: 4px 0 4px 12px;
        display: block;
        font-weight: bold;
        color: #003399;
        text-decoration: none;
        }
        a:hover.menu2off, a:hover.menu2on {
        color: #003399;
        background: #F5F5F5;
        }

        Kommentar

        • #5
          3 Ebenen?

          Wo sind das denn bitte 3 Ebenen?
          Bin ich blind?

          Kommentar

          Vorherige template Weiter
          Lädt...
          X