Ankündigung

Einklappen
Keine Ankündigung bisher.

Sub Button ?

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

  • Sub Button ?

    Hallo Leute,

    Zur Zeit bin ich am Programmieren meiner Vereinshomepage und ich habe mal eine Frage an die Profi´s unter Euch, da ich gerade etwas verzweifle:

    Wie gesagt programmiere ich die Homepage und sitze gerade etwas an der Navigationsleiste fest. Die entsprechenden Buttons und die dazugehörigen Links sind kein Problem. Nur beisse ich mir gerade etwas die Zähne aus, an den "Dropdowns". Bei manchen Buttons benotige ich eine Auswahlliste, d.h. wenn ich z.B. auf "Impressum" klicke, sollten sich ca. 3 "Unterbuttons" als Auswahl öffnen. Ich habe nun schon in mehreren Foren und anderen Webseiten recherchiert, aber kann nichts finden. Entweder wird man zu Vista-Buttons verwiesen, oder bekommt irgend welche java-scripts, die nicht passen..... Es muss doch möglich sein, es im linken Programierfenster so zu hinterlegen, dass nach Klick der Button aufmacht und eine Auswahl zeigt. Ich benötige auch keine Button´s, sondern es reicht schon leicht versetzter Text zum anklicken. Hier noch ein Screenshot ( ich arbeite mit ExpressionWeb2 ) :


    Klicke auf die Grafik für eine vergrößerte Ansicht

Name: Sub-Button.jpg
Ansichten: 1
Größe: 337,9 KB
ID: 4288391

    Für eine kurze Hilfe, wäre ich Euch echt dankbar.....

    Gruss

    makkie

    EDIT:

    Ich hätte da auch selbst eine logische Idee, weis aber nicht, ob es so gemacht wird, bzw. Sinn macht:

    Ich hätte jetzt eine neue ( zweite ) Index-Datei gemacht und bei der ursprünglichen einfach bei Onklick auf den Button zu der neuen ( zweiten ) Seite verlinkt, bei der nur der linke Navigationsbereich verändert ist - also mit dem entsprechenden Dropdown.......... das erscheint mir zwar logisch, aber ich bin mir nicht sicher, ob es da nicht einen einfacheren Weg gibt, bei dem ich dann nicht noch 6 zusätzliche Seiten benötige, wenn ich 6 Buttons unterteile ???
    Die letzte Stimme, die man hören wird, bevor die Welt explodiert, wird die Stimme eines Experten sein, der sagt:
    ------------------------------> " DAS IST TECHNISCH UNMÖGLICH !!! " <------------------------------

  • #2
    Wenn Du die Menüleite meim Klicken auf einen Knopf immer neu Laden lässt, läuft das nur auf Datenmüll und viel Bastelei hinaus.

    Ausserdem ist das Ändern eines Menüpunkts viel zu umständlich.
    Der einfachste Weg ist natürlich über CSS:

    SELFHTML: Dynamische CSS-Navigation für moderne Browser

    Da Du aber mit ein paar grafischen Komponenten arbeitest (die Blaue Kugel vor den Menüeinträgen) kommst Du um Java wohl nicht herum.

    Hier mal das Beispielscript: (hoffe ich vertippe mich nicht)

    1.
    Menüverhalten definieren:
    ----------------------------------------------------------------
    <script type="text/javascript">
    var lastExpanded = false;

    function dropnavi(sender) {
    if(lastExpanded) {
    lastExpanded.style.display = 'block';
    }
    var parent = sender.parentNode;
    var subMenu = parent.getElementsByTagName('UL')[0];
    if(subMenu.style.display == 'block') {
    subMenu.style.display = 'none';
    lastExpanded = false;
    } else {
    subMenu.style.display = 'block';
    lastExpanded = subMenu;
    }
    }
    </script>
    ---------------------------------
    2.
    Bilder für Hovereffekt definieren:

    <script language="javascript">
    <!--
    a1=new Image(59,37) *größe des Bildes in Pixeln*
    a1.src="images/menu/wir0.jpg"
    a2=new Image(59,37)
    a2.src="images/menu/wir1.jpg"
    b1=new Image(59,37)
    b1.src="images/menu/vorstand0.jpg"
    b2=new Image(59,37)
    b2.src="images/menu/vorstand1.jpg"

    //-->
    </script>
    -----------------------------------------------

    3. Script für Hovereffekt

    <script>
    <!--
    function filter(imagename,objectsrc){
    if (document.images)
    document.images[imagename].src=eval(objectsrc+".src")
    }
    //-->
    </script>
    --------------------------------------

    Dann nur noch die die Links mit den verweisen auf die Scripts in der Menüleiste einfügen:

    //Obermenü//
    <a href="main.htm" onmouseover="filter('img1','a2'); window.status='Status Message';return true;"
    onmouseout="filter('img1','a1'); window.status='';return true;" onclick="dropnavi(this); return false;">
    <img src="images/menu/wir0.jpg" name="img1" border=0 width=137 height="28"></a>

    //Untermenü//
    <a href="docs/vorstand.htm" onmouseover="filter('img2','b2'); window.status='Status Message';return true;"
    onmouseout="filter('img2','b1'); window.status='';return true;">
    <img src="images/menu/vorstand0.jpg" name="img2" border=0 width=110 height="20"></a>

    -----------------------------------------------------------------------------------

    Ich habe die Scripts aus guten Grund nicht in ein einziges Gepackt, da ich so mehr Übersicht habe.

    Natürlich gibt es auch noch schönere Möglichkeiten mit komplette Applets zu arbeiten.
    Die benötigen bei komplexeren Menüs nur etwas länger zum Laden und sind auch oft etwas schwerer anzupassen.
    Ausserdem gibt es da nciht so viele kostenlose bzw. diese sind oft mit Werbung und Ähnlichen verbunden.

    Beispiel für Java-Script:
    -http://www.fwg-medebach.de/

    Beispiel für Java Applett:
    - Gasthof Oberreuter

    Viel Spass beim Basteln.
    Das Script für den Hovereffekt habe ich selber mal von nem Kumpel bekommen, bevor ich sowas selber machen konnte, aber den Dropdowneffekt kannst Du von mir aus so übernehmen.

    Kommentar


    • #3
      Wow, das nenn´ ich mal ausführlich .......

      ....ich hoffe, ich kann es umsetzen. Vielen lieben Dank dafür.

      Eigentlich habe ich nicht damit gerechnet, dass ich Hilfe bekomme und nun gleich so ausführlich. Man lernt doch nie aus

      Übrigens, die Buttons vom Gasthof Oberreuter sind echt cool

      Ich informiere Euch hier über das Ergebnis, wenn es geklappt hat. Ich hoffe, ich bekomme es gebacken

      makkie
      Die letzte Stimme, die man hören wird, bevor die Welt explodiert, wird die Stimme eines Experten sein, der sagt:
      ------------------------------> " DAS IST TECHNISCH UNMÖGLICH !!! " <------------------------------

      Kommentar


      • #4
        Leider hat es nicht so funktioniert, wie ich es mir dachte. Ich bekomme einfach diese doofe Verknüpfung nicht hin , was mich ärgert.

        Bei Punkt 1. kann man nichts falsch machen und das mit Punkt 2. ist ja noch einleuchtend. Die Grafiken zu definieren ist nicht das Problem. Probleme habe ich mit dem Obermenü und dem Untermenü. Beim Obermenü ist main.htm angegeben und beim Untermenü vorstand.htm. Es sind also doch 2 Navigationsbereiche vorhanden, oder liege ich da falsch ???

        Bei mir ist der Navigationsbereich mit den Hauptbuttons "navigation.html". Ich hätte dann für jeden Navigatonsbereich mit entsprechend geöffnetem Untermenü halt "navigation1.htm", "navigation2.htm", etc. gemacht und bei ONKLICK eben nur den Navigationsbereich entsprechend verändert. Da ja alle Buttons ( incl. Subbuttuns ) pre-geloaded werden, verändert sich ja eigentlich nur der Navigationsbereich mit ein paar kB und wenn ich dann auf den entsprechenden Unterbutton klicke kann ich den Datenteil verändern

        Habe ich da den falschen Ansatz ???

        makkie
        Die letzte Stimme, die man hören wird, bevor die Welt explodiert, wird die Stimme eines Experten sein, der sagt:
        ------------------------------> " DAS IST TECHNISCH UNMÖGLICH !!! " <------------------------------

        Kommentar


        • #5
          Generell würde ich der Einfachheit wegen zu einer Javascriptbibliothek wir z.B. jQuery raten. (Das geht auch noch, wenn man gar kein Javascript versteht ) Die nehmen einem nämlich den ganzen komplizierten Code ab und liefern einfache Befehle für solche Effekte. Mit Hilfe dieser kann man mit 2-3 Zeilen Javascriptcode wunderbare Menüs basteln. ist ja im Prinzip nur ein Listenelement oder Div auf-/zuklappen. Optisch sollte man sie dann per CSS anpassen.

          Dein Screenshot gibt es jetzt nicht so viel her um dir jetzt einen fertigen Codeschnipsel speziell für deine Seite zu geben. Sind da sogar noch Frames zu sehen? Ich kann dir gerne ein paar Tipps geben oder schnell was basteln, du kennst ja meine PN-Adresse
          "Steigen Sie in den Fichtenelch! - Steigen Sie ein!"

          Kommentar


          • #6
            Zitat von Dr.Bock Beitrag anzeigen
            Generell würde ich der Einfachheit wegen zu einer Javascriptbibliothek wir z.B. jQuery raten. (Das geht auch noch, wenn man gar kein Javascript versteht ) Die nehmen einem nämlich den ganzen komplizierten Code ab und liefern einfache Befehle für solche Effekte. Mit Hilfe dieser kann man mit 2-3 Zeilen Javascriptcode wunderbare Menüs basteln. ist ja im Prinzip nur ein Listenelement oder Div auf-/zuklappen. Optisch sollte man sie dann per CSS anpassen.
            Das ist auch mein eigentliches Problem Ich dachte, ich kann im Expressionweb einfach sagen: "Ich möchte ein Button, das beim Anklicken einfach nach unten aufgeht und drei neue, kleinere Buttons frei gibt". Dass man da noch jede Menge java von Hand eingeben muss, habe ich nicht bedacht. Ich habe sogar in der Hoffnung, irgendwo ein Fallbeispiel zu finden, für 60 Euro Bücher gekauft - leider war es rausgeschmissenes Geld . Naja, jetzt habe ich wenigstens was für mein Bücherregal und kann damit angeben, dass ich Webprogrammierungsschmöker brauche Nein-nein, die Bücher werde ich bestimmt noch ein paar mal brauchen können, spätetstens für das Gästebuch und die Bildergallerie

            Dein Screenshot gibt es jetzt nicht so viel her um dir jetzt einen fertigen Codeschnipsel speziell für deine Seite zu geben. Sind da sogar noch Frames zu sehen? Ich kann dir gerne ein paar Tipps geben oder schnell was basteln, du kennst ja meine PN-Adresse
            Wäre echt TOLL, wenn Du mir wenigstens den Anfang machen könntest. Nichts anderes brauche ich, als einfach einen konkreten Wegweiser, an dem ich mich orientieren kann. Was benötigst Du dazu, damit es für Dich so einfach wie möglich wird?


            Hier mal ein paar Bilder, wie ich es mir vorstelle:

            Zuerst mal das Grundbild:

            Klicke auf die Grafik für eine vergrößerte Ansicht

Name: Seite.JPG
Ansichten: 1
Größe: 310,2 KB
ID: 4256872

            (Übrigens: Die Frames hat man nur deshalb gesehen, weil ich einen Screenshot vom Expressionweb gemacht habe und nicht von der Browseransicht )

            So, beim Anklicken von "Der Verein" z.B., soll sich das Ganze einfach nach unten wie folgt öffnen:

            Klicke auf die Grafik für eine vergrößerte Ansicht

Name: Unter.JPG
Ansichten: 1
Größe: 24,9 KB
ID: 4256873

            Die Buttons habe ich im Prinzip schon alle als GIF fertig ( ".gif" wegen der Transparenz ). Die roten Buttons sind für den Hoovereffekt bei "mouseover" :

            Klicke auf die Grafik für eine vergrößerte Ansicht

Name: Verein-1.gif
Ansichten: 1
Größe: 1,7 KB
ID: 4256874 Klicke auf die Grafik für eine vergrößerte Ansicht

Name: Verein-2.gif
Ansichten: 1
Größe: 1,6 KB
ID: 4256875

            Klicke auf die Grafik für eine vergrößerte Ansicht

Name: vwir-1.gif
Ansichten: 1
Größe: 1,4 KB
ID: 4256880 Klicke auf die Grafik für eine vergrößerte Ansicht

Name: vwir-2.gif
Ansichten: 1
Größe: 1,3 KB
ID: 4256881

            Klicke auf die Grafik für eine vergrößerte Ansicht

Name: vhist-1.gif
Ansichten: 1
Größe: 1,3 KB
ID: 4256878 Klicke auf die Grafik für eine vergrößerte Ansicht

Name: vhist-2.gif
Ansichten: 1
Größe: 1,3 KB
ID: 4256879

            Klicke auf die Grafik für eine vergrößerte Ansicht

Name: vgal-1.gif
Ansichten: 1
Größe: 1,4 KB
ID: 4256876 Klicke auf die Grafik für eine vergrößerte Ansicht

Name: vgal-2.gif
Ansichten: 1
Größe: 1,3 KB
ID: 4256877

            ...ach ja, meine Buttongrafiken sind allesamt im Unterordner "/Grafiken/Buttons/****.***" gespeichert, falls das für die Programmierung wichtig ist.

            ________________________________________________

            Im Moment habe ich mir schon überlegt, ob ich die doofen Unter-Buttons nicht einfach rechts in den Datenbereich platziere, aber dann müsste ich mir eine Niederlage eingestehen . Sie gehören bei einer modernen Webseite IMO einfach in den linken Navigationsbereich........

            Ich habe mal ein ein Probeupload auf meine Testhomepage hochgeladen, dann siehst Du, wie weit ich bin:

            http://www.kaliger.eu

            Wenn Du möchtest, kann ich Dir auch die Zugangsdaten für den ftp-server geben. Dann kannst Du Dir mal ansehen, was ich bisher habe und evtl. direkt bearbeiten, wenn es so einfacher für Dich ist.

            Gib´ mir einfach Bescheid und ............vorab schon mal DANKE, DANKE, DANKE !!!!!

            makkie
            Die letzte Stimme, die man hören wird, bevor die Welt explodiert, wird die Stimme eines Experten sein, der sagt:
            ------------------------------> " DAS IST TECHNISCH UNMÖGLICH !!! " <------------------------------

            Kommentar


            • #7
              Hoi!

              Dies sollte in etwa das sein, was du dir vorgestellt hast. Nichts besonderes, nur minimal optisch angepasst, aber natürlich ausbaufähig.

              Ist hoffentlich selbsterklärend, ansonsten einfach fragen. Beim Klick auf ein a-Element der Klasse "klappen" fährt das nächste ul-Element aus. Wenns nicht aufklappen soll, einfach die Klasse und das ul-Element weglassen.
              Angehängte Dateien
              "Steigen Sie in den Fichtenelch! - Steigen Sie ein!"

              Kommentar


              • #8
                Zitat von Dr.Bock Beitrag anzeigen
                Hoi!

                Dies sollte in etwa das sein, was du dir vorgestellt hast. Nichts besonderes, nur minimal optisch angepasst, aber natürlich ausbaufähig.

                Ist hoffentlich selbsterklärend, ansonsten einfach fragen. Beim Klick auf ein a-Element der Klasse "klappen" fährt das nächste ul-Element aus. Wenns nicht aufklappen soll, einfach die Klasse und das ul-Element weglassen.

                Hey, Du bist einfach SPITZE !!!!!!!!!!!!!!!!

                Leider kann ich es nicht an der Homepage selbst testen, da ich heute mein ganzes Arbeitszimmer auseinander gebaut habe. Ich modle alles etwas um und nun ist der ganze Hauptrechner incl. Peripherie in Tausend Einzelteile auf drei Räume verteilt, bis die Regale stehen und alles angepasst ist. Ich hoffe, ich schaffe es bis heute Nacht alles wieder zusammen zu bringen und dann werde ich es morgen gleich testen . Das ZIP habe ich schon mal entpackt und auf dem Notebook angesehen. Sieht super aus. Genau so wollte ich es Nun muss ich nur noch den Quellcode anpassen - ich werde es wohl auch noch hinbekommen .....

                Nochmals vielen, vielen Dank

                Gruß

                makkie
                Die letzte Stimme, die man hören wird, bevor die Welt explodiert, wird die Stimme eines Experten sein, der sagt:
                ------------------------------> " DAS IST TECHNISCH UNMÖGLICH !!! " <------------------------------

                Kommentar


                • #9
                  Hallo Leute,

                  leider muss ich nochmal posten ............

                  die Vorlage von Dr.Bock hat super funktioniert - Danke noch mal an Dr.Bock. Ich habe alles entsprechend angepasst und es funktioniert im Grunde bestens. Hier der Beweis:

                  HC-Haiterbach

                  Wenn ich die Buttons anklicke, gehen auch die Unterlisten wie gewollt auf. Leider aber bleiben sie offen, bis ich nicht wieder auf den Hauptbutton klicke. Es sollte aber so sein, dass, wenn man auf den nächsten Hauptbutton klickt, die Liste des vorherigen wieder einklappt. Das tut sie aber nicht . Ich war schon soweit, dass ich es mit "mouseover" hinbekommen habe, aber dann bleiben die Unterlisten nicht offen und ich kann die Untermenüs nicht anwählen, weil alles sofort wieder hoch fährt . Hier ist der Code, den ich programmiert habe:

                  Erst der von Dr.Bock

                  Code:
                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                  <html xmlns="http://www.w3.org/1999/xhtml">
                  <head>
                  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
                  <meta http-equiv="Content-Style-Type" content="text/css" />
                  
                  <title>Navigation</title>
                  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
                  
                  <!-- Ausfahren -->
                  <script type="text/javascript">
                  
                  
                  $(document).ready(function () {
                  
                      $("a.klappen").click(function () {
                       $(this).next('ul').slideToggle('slow');
                            });
                     });
                  </script>
                  und hier noch zur Ergänzung mein angepasster:

                  Code:
                  <!-- Stylesheet -->
                  <style type="text/css">
                  .submenu {
                  	display: none;
                  }
                  #nav_main a  {
                  	cursor: pointer;
                  	font-family: verdana;
                  	font-size: 16px;
                  	font-weight: bold;
                  	color: #93B5E2;
                  	text-decoration: none;
                  }
                  #nav_main a:hover {
                  	color:#FF0000;
                  }
                  #nav_main {
                  	list-style-image: url('Grafiken/list-image-main.png');
                  }
                  
                  .submenu a {
                  	
                  	font-size:14px !important;
                  	
                  }
                  .submenu {
                  	list-style-image: url('Grafiken/list-image-sub.png');
                  }
                  .style1 {
                  }
                  .style2 {
                  }
                  </style>
                  
                  <base target="_self" />
                  
                  </head>
                  
                  <body style="background-color: #032D69; margin-left: 5px; margin-right: 5px; margin-top: 50px; margin-bottom: 0;">
                  
                  <ul id="nav_main" class="style1">
                  	
                  	<li id="nav_point1" class="style2">
                  	<a href="Aktuelles/Aktuell.htm" target="Daten">Aktuelles</a></li>
                  	
                  	<li>
                  		<a class="klappen" href="Verein/Basis-v.htm" target="Daten" >Der Verein</a>
                  	<ul class="submenu">
                  		<li><a href="Verein/Verein.htm" target="Daten"> Wir über uns</a></li>
                  		<li><a href="Verein/Historie.htm" target="Daten"> Historie</a></li>
                  		<li><a href="Verein/Gallerie.htm" target="Daten"> Bildergallerie</a></li>
                  	</ul>
                  	</li>
                  	<li id="nav_point3"><a href="Event/Event.htm" target="Daten">Events</a></li>
                  	
                  	<li><a class="klappen" href="Badminton/Basis-b.htm" target="Daten">Badminton</a>
                  	<ul class="submenu">
                  		<li><a href="Badminton/Badminton.htm" target="Daten"> Wir über uns</a></li>
                  		<li><a href="Badminton/Termine-b.htm" target="Daten"> Termine</a></li>
                  		<li><a href="Badminton/Info-b.htm" target="Daten"> Info´s</a></li>
                  	</ul>
                  	</li>
                  	<li><a class="klappen" href="Freizeit/Basis-f.htm" target="Daten">Freizeitabteilung</a>
                  	<ul class="submenu">
                  		<li><a href="Freizeit/Freizeit.htm" target="Daten"> Wir über uns</a></li>
                  		<li><a href="Freizeit/Termine-f.htm" target="Daten"> Termine</a></li>
                  		<li><a href="Freizeit/Info-f.htm" target="Daten"> Info´s</a></li>
                  	</ul>
                  	</li>
                  	<li><a class="klappen" href="Theater/Basis-t.htm" target="Daten">Theatergruppe</a>
                  	<ul class="submenu">
                  		<li><a href="Theater/Theater.htm" target="Daten"> Wir über uns</a></li>
                  		<li><a href="Theater/Termine-t.htm" target="Daten"> Termine</a></li>
                  		<li><a href="Theater/Info-t.htm" target="Daten"> Info´s</a></li>
                  	</ul>
                  	</li>
                  	<li>
                  	<a class="klappen" href="Links/Basis-l.htm" target="Daten" onclick="window.location.reload()">Links</a>
                  	<ul class="submenu">
                  		<li><a href="Links/Lokalverein.htm" target="Daten"> Vereine Lokal</a></li>
                  		<li><a href="Links/Verband.htm" target="Daten"> Verbände</a></li>
                  		<li><a href="Links/Links.htm" target="Daten"> Weitere Links</a></li>
                  	</ul>
                  	</li>
                  	<li id="nav_point8"><a href="Downloads/Downloads.htm" target="Daten">Downloads</a></li>
                  	
                  	<li><a class="klappen" href="Gast/Gast.htm" target="Daten">Gästebuch</a>
                  	<ul class="submenu">
                  		<li><a href="Gast/Eintrag.htm" target="Daten"> Einträge</a></li>
                  	</ul>
                  	</li>
                  	<li><a class="klappen" href="Kontakt/Basis-k.htm" target="Daten">Kontaktdaten</a>
                  	<ul class="submenu">
                  		<li><a href="Kontakt/Vorstand.htm" target="Daten"> Der Vorstand</a></li>
                  		<li><a href="Kontakt/Abteilungen.htm" target="Daten"> Abteilungen</a></li>
                  		<li><a href="Kontakt/Impressum.htm" target="Daten"> Impressum</a></li>
                  		<li><a href="Kontakt/Webmaster.htm" target="Daten"> Webmaster</a></li>
                  	</ul>
                  	</li>
                  
                  
                  	
                  	</ul>
                  
                  </body>
                  
                  </html>
                  Ich habe es auch schon mit folgendem Befehl versucht:

                  Indem ich onclick="window.location.reload()" setze, baut es eine neue Seite auf, aber das funktioniert nur mit den Buttuns, die keine Unterlisten haben, wie z.B.:

                  Code:
                  <li id="nav_point1" class="style2">
                  	<a href="Aktuelles/Aktuell.htm" target="Daten"onclick="window.location.reload()">Aktuelles</a></li>
                  Bei den anderen führt es immer zu Fehlern, wie z.B. die ganze Nav-Leiste verschwindet, etc.

                  Ich habe mich schon zu Tode gegoogelt und langsam regt mich die Sache auch auf. Warum kann man nicht irgendwo einen Befehl eintragen, wie "if next id then .hide", oder so........

                  Da gibt es sowas wie accordion, aber nirgends steht ein konkreter Code am Stück, den man als Vorlage nehmen kann.

                  Falls jemand von Euch eine Idee hat, wäre ich ihm sehr dankbar Wie gesagt würde mir schon ein "Schubbser" reichen. Wenn ich nämlich mal die Vorgehensweise sehe, dann ist alles Andere leicht.

                  makkie
                  Zuletzt geändert von makkie; 20.09.2010, 16:16.
                  Die letzte Stimme, die man hören wird, bevor die Welt explodiert, wird die Stimme eines Experten sein, der sagt:
                  ------------------------------> " DAS IST TECHNISCH UNMÖGLICH !!! " <------------------------------

                  Kommentar


                  • #10
                    Setze vor das
                    Code:
                    $(this).next('ul').slideToggle('slow');
                    noch ein
                    Code:
                    $(".submenu").slideUp('slow');
                    Das sollte reichen.

                    Die Anleitung für dein verlinkten Accordion-Plugin findest du übrigens ein paar Klicks weiter:
                    UI/API/1.8/Accordion - jQuery JavaScript Library
                    Dort findest du den HTML-Code für die Boxen, sowie den Javascript aufruf.
                    "Steigen Sie in den Fichtenelch! - Steigen Sie ein!"

                    Kommentar


                    • #11
                      Zitat von Dr.Bock Beitrag anzeigen
                      Setze vor das
                      Code:
                      $(this).next('ul').slideToggle('slow');
                      noch ein
                      Code:
                      $(".submenu").slideUp('slow');
                      Das sollte reichen.
                      DU BIST EINFACH DER GRÖSSTE !!!!!!!!!!!!!!!!!!

                      Genau so funktioniert es ............ ( und das nur mit einer Zeile Code ) Ich wusste, dass es einfach ist. Deshalb ärgert es mich umso mehr, dass ich nun 3 Wochen rumgemacht habe und nicht von alleine darauf gekommen bin, bzw. nichts gefunden habe, dabei ist es im Grunde so einfach ......

                      Hier das Ergebnis:

                      HC - Haiterbach

                      Die Anleitung für dein verlinkten Accordion-Plugin findest du übrigens ein paar Klicks weiter:
                      UI/API/1.8/Accordion - jQuery JavaScript Library
                      Dort findest du den HTML-Code für die Boxen, sowie den Javascript aufruf.
                      Ich habe es nacher auch gesehen wollte mein Geschriebenea aber nicht mehr löschen

                      Nochmals vielen, vielen Dank ..... ich versuche mich zu revanchieren

                      makkie
                      Die letzte Stimme, die man hören wird, bevor die Welt explodiert, wird die Stimme eines Experten sein, der sagt:
                      ------------------------------> " DAS IST TECHNISCH UNMÖGLICH !!! " <------------------------------

                      Kommentar


                      • #12
                        Ich weis nicht ob es für dich von Interesse ist, aber wenn ich ein aufgeklapptes Menü zuklappe, geht es zu und sofort wieder auf. Zumindest mit Opera 10.62 und Firefox 3.5.10
                        Textemitter, powered by C8H10N4O2

                        It takes the Power of a Pentium to run Windows, but it took the Power of 3 C-64 to fly to the Moon!

                        Kommentar


                        • #13
                          Zitat von ayin Beitrag anzeigen
                          Ich weis nicht ob es für dich von Interesse ist, aber wenn ich ein aufgeklapptes Menü zuklappe, geht es zu und sofort wieder auf. Zumindest mit Opera 10.62 und Firefox 3.5.10
                          Danke für den Hinweis. Ist mir auch schon aufgefallen, aber das ist ein kleiner Preis ( Schönheitsfehler ). Es wäre natürlich toll, wenn es nicht so wäre, aber mir war wichtig, dass ich nicht tausend offene und somit unübersichtliche Untermenüs habe. Wenn die ganze Homepage fertig ist, werde ich, wenn ich Zeit habe, den finalen Feinschliff machen, doch momentan ist mir mehr als geholfen und ich kann mich den nächsten Projekten widmen. Ich hoffe, die Webseite wird bis Weihnachten komplett fertig . Irgendwie habe ich nämlich so eine Vorahnung, dass das Vorhaben mit dem Gästebuch und der Bildergallerie was Grösseres wird .

                          Bisher bin ich aber mit dem Gemachten ganz zufrieden, wenn man bedenkt, dass ich ganz neu angefangen habe und alles (das meiste zumindest ) alleine designe und programmiere. Ein paar Fehler werden wohl drin sein, doch es ist alles im akzeptablen Bereich

                          Übrigens ist die Sache mit dem "klappen" auch im IE so . Das liegt nicht am Browser, sondern am "slideUp-Befehl" denke ich. Idee: Ich könnte das Menü schneller einfahren lassen ( ohne Animation ), dann wäre der Zu- und wieder Aufklappeffekt nicht so deutlich sichtbar.

                          makkie
                          Die letzte Stimme, die man hören wird, bevor die Welt explodiert, wird die Stimme eines Experten sein, der sagt:
                          ------------------------------> " DAS IST TECHNISCH UNMÖGLICH !!! " <------------------------------

                          Kommentar


                          • #14
                            Wenn die Elemente jetzt alle eine eindeutige ID hätten, könntest du natürlich das aktuelle Element vom wiederaufklappen auschließen. So, wie du es jetzt hast, kannst du aber auch noch folgenden Umweg nehmen. Ist zwar nicht sehr performant, aber bei so nem kleinen Teil macht das eigentlich nichts aus:
                            Code:
                            <script type="text/javascript">
                            $(document).ready(function () {
                                $("a.klappen").click(function () {
                            		if ($(this).next('ul').css('display') == 'none') {
                            			$(".submenu").slideUp('slow');
                            			$(this).next('ul').slideToggle('slow'); 
                            		} else {
                            			$(".submenu").slideUp('slow');
                            		}	  
                            	});
                             });
                            </script>
                            Generell könnte man das ganze natürlich sowieso ganz anders (bzw. sauberer) machen, aber ich habe keine Lust jetzt viel zu tippen oder umständlich was zu erklären
                            "Steigen Sie in den Fichtenelch! - Steigen Sie ein!"

                            Kommentar


                            • #15
                              Zitat von Dr.Bock Beitrag anzeigen
                              Wenn die Elemente jetzt alle eine eindeutige ID hätten, könntest du natürlich das aktuelle Element vom wiederaufklappen auschließen. So, wie du es jetzt hast, kannst du aber auch noch folgenden Umweg nehmen. Ist zwar nicht sehr performant, aber bei so nem kleinen Teil macht das eigentlich nichts aus:
                              Ich hab´s jetzt so übernommen - war aber vorher auch schon gut - Danke

                              Generell könnte man das ganze natürlich sowieso ganz anders (bzw. sauberer) machen,
                              Was heist hier ganz anders ????? ...mach mir keine Angst Ich bin froh, dass es so schon klappt

                              ...und was heist hier "sauberer" ??? - meine Homepage ist sauber Ich kehre jeden Abend und wische mit "Meister Propper" nass aus .......

                              ....aber ich habe keine Lust jetzt viel zu tippen oder umständlich was zu erklären
                              Kein Thema, wie gesagt hast Du mir schon mehr als zufriedenstellend geholfen - und seien wir mal ehrlich: es muss ja auch noch ein kleiner Unterschied zwischen Rookies wie mir und den Meistern zu erkennen sein, oder ?!?

                              makkie
                              Die letzte Stimme, die man hören wird, bevor die Welt explodiert, wird die Stimme eines Experten sein, der sagt:
                              ------------------------------> " DAS IST TECHNISCH UNMÖGLICH !!! " <------------------------------

                              Kommentar

                              Lädt...
                              X