• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

aufklappbares Menü (CSS)

B

basti2320

Neues Mitglied
Guten Morgen,

ich bin gerade dabei die neue Homepage der Freiwilligen Feuerwehr Frohnaus zu machen, komme aber nun nicht mehr weiter...

Freiwillige Feuerwehr Frohnau

Ich würde gern mittels CSS oder Javascript das Menü auf der rechten Seite der Homepage (3x Überschrift, viele Unterpunkte) so machen, dass man nur die 3 Überpunkte sieht (FF-Frohnau, JF-Frohnau, Verein der FF-Frohnau e.V.) und das bei Anklicken einer der 3 Überpunkte die Unterpunkte vertikal eingeblendet werden. Das Menü soll sich also nach unten hin verschieben, damit die entsprechnenden Unterpunkte erscheinen.

Wäre toll, wenn einer helfen könnte, damit tut ihr sogar einer Feuerwehr etwas Gutes :)

Danke für die Hilfe
Sebastian
 
Werbung:
Werbung:
Denke bitte daran, daß bei einer js-Navigation der Totalausfall derselben droht, wenn der User js abgeschaltet hat.
btw bitte noch die (zahlreichen) Fehler entfernen. Alle Fehler gibt´s hier in der Übersicht: w3c-Validation
Grüsse aus dem Norden
low
 
lowsaxonian schrieb:
Denke bitte daran, daß bei einer js-Navigation der Totalausfall derselben droht, wenn der User js abgeschaltet hat.
Zum Vergrößern anklicken....

Wenn man es richtig anstellt (was der Normallfall sein sollte), bleibt es aber bei der "Drohung" und die Seite funktioniert weiterhin. Ich weiß, du hast nicht gesagt, dass das nicht so ist, aber man könnte die Äußerung so lesen, als wäre das ein generelles Problem bei JavaScript. Das ist aber nicht so, wenn es korrekt (nämlich auf dem bestehenden HTML-Code aufbauend) eingesetzt wird. (Sich darüber Gedanken zu machen, ist natürlich dennoch notwendig. :))
 
hi!

Was lowsaxonian wohl meinte ist, dass Benutzer, die javscript abgeschaltet haben der Navigation nicht folgen können. Da kommt dann auch keine Fehlermeldung mehr. Abgeschaltet ist abgeschaltet. Im Übrigen surfen Suchmaschinen auch mit ausgeschaltetem js durchs Netz. *Wink mit dem Zaunpfahl* ;-)

Liebe Grüße!
 
Werbung:
Ja, und was ich meinte, ist, dass das nur ein theoretisches Problem ist, für das es Lösungen gibt. Wenn der HTML-Code erst so erstellt wird, als wäre JavaScript deaktiviert, und Veränderungen, die für JS-Funktionalität benötigt werden, erst "onload" per JavaScript durchgeführt werden, funktioniert es sowohl mit als auch ohne JavaScript.

Bei dieser Variation des in #3 verlinkten Beispiels werden ohne JavaScript alle Abschnitte "ausgeklappt" dargestellt:

HTML: 
<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>test</title>
        <!-- Das jQuery-Script sollte für den Einsatz natürlich auf dem eigenen Server liegen -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
        <style type="text/css">
        .menu {
            width: 200px;
        }

        .section {
            border: 1px solid #ccc;
            padding: 5px;
            margin-bottom: 10px;
        }

        .show-details {
            cursor: pointer;
        }

        .hidden {
            display: none;
        }
        </style>

        <script type="text/javascript">
        $(document).ready(function ()
        {
            $('div.section').each(function ()
            {
                var element = $(this).children('h3');

                $(element).addClass('show-details');
                $(element).toggle(function () {
                    $(this).parent().children('ul').removeClass('hidden');
                }, function () {
                    $(this).parent().children('ul').addClass('hidden');
                });
                $(this).children('ul').addClass('hidden');
            });
        });
        </script>
    </head>

    <body>

        <div class="menu">

        <div class="section">
            <h3>Test</h3>
            <ul>
                <li><a href="#">Testeintrag A</a></li>
                <li><a href="#">Testeintrag</a></li>
                <li><a href="#">Testeintrag</a></li>
                <li><a href="#">Testeintrag</a></li>
            </ul>
        </div>

        <div class="section">
            <h3>Test 2</h3>
            <ul>
                <li><a href="#">Testeintrag B</a></li>
                <li><a href="#">Testeintrag</a></li>
                <li><a href="#">Testeintrag</a></li>
                <li><a href="#">Testeintrag</a></li>
            </ul>
        </div>

        <div class="section">
            <h3>Test 3</h3>
            <ul>
                <li><a href="#">Testeintrag C</a></li>
                <li><a href="#">Testeintrag</a></li>
                <li><a href="#">Testeintrag</a></li>
                <li><a href="#">Testeintrag</a></li>
            </ul>
        </div>

        </div>
        
    </body>

</html>
 
mermshaus schrieb:
Ja, und was ich meinte, ist, dass das nur ein theoretisches Problem ist, für das es Lösungen gibt. Wenn der HTML-Code erst so erstellt wird, als wäre JavaScript deaktiviert, und Veränderungen, die für JS-Funktionalität benötigt werden, erst "onload" per JavaScript durchgeführt werden, funktioniert es sowohl mit als auch ohne JavaScript.

Bei dieser Variation des in #3 verlinkten Beispiels werden ohne JavaScript alle Abschnitte "ausgeklappt" dargestellt:

HTML: 
<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>test</title>
        <!-- Das jQuery-Script sollte für den Einsatz natürlich auf dem eigenen Server liegen -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
        <style type="text/css">
        .menu {
            width: 200px;
        }

        .section {
            border: 1px solid #ccc;
            padding: 5px;
            margin-bottom: 10px;
        }

        .show-details {
            cursor: pointer;
        }

        .hidden {
            display: none;
        }
        </style>

        <script type="text/javascript">
        $(document).ready(function ()
        {
            $('div.section').each(function ()
            {
                var element = $(this).children('h3');

                $(element).addClass('show-details');
                $(element).toggle(function () {
                    $(this).parent().children('ul').removeClass('hidden');
                }, function () {
                    $(this).parent().children('ul').addClass('hidden');
                });
                $(this).children('ul').addClass('hidden');
            });
        });
        </script>
    </head>

    <body>

        <div class="menu">

        <div class="section">
            <h3>Test</h3>
            <ul>
                <li><a href="#">Testeintrag A</a></li>
                <li><a href="#">Testeintrag</a></li>
                <li><a href="#">Testeintrag</a></li>
                <li><a href="#">Testeintrag</a></li>
            </ul>
        </div>

        <div class="section">
            <h3>Test 2</h3>
            <ul>
                <li><a href="#">Testeintrag B</a></li>
                <li><a href="#">Testeintrag</a></li>
                <li><a href="#">Testeintrag</a></li>
                <li><a href="#">Testeintrag</a></li>
            </ul>
        </div>

        <div class="section">
            <h3>Test 3</h3>
            <ul>
                <li><a href="#">Testeintrag C</a></li>
                <li><a href="#">Testeintrag</a></li>
                <li><a href="#">Testeintrag</a></li>
                <li><a href="#">Testeintrag</a></li>
            </ul>
        </div>

        </div>
        
    </body>

</html>
Zum Vergrößern anklicken....

Mahlzeit zusammen. Habe von sowas 0 ahnung, Aber dieser Code funktioniert bei mir und habe ihn mal meinen bedürfnissen angepasst (Links und Bilder und ohne diese Punkte).

ddddddd.jpg
So sieht es bei mir aus.

Nun ist es bei dem code so das wenn ich auf eine zb CAR klicke NANO-CLEAN wieder geschlossen wird. Hätte gern das es offen bleibt.
Zudem das die Übersicht - Zubehöt mittig platziert sind.
Nur ich weiß nicht wie das funktioniert.
Hoffe wäre einer so freundlich mir dabei zu helfen.

Lieben Gruß
 
Das ist mit JavaScript allein nicht so ganz leicht zu erreichen, da du Daten requestübergreifend speichern musst.

Ansätze:

- Javascript-Wertbergabe zwischen HTML-Dokumenten

In HTML5 wird dazu „local storage“ kommen, aber das ist noch nicht flächendeckend unterstützt, denke ich.

- Local Storage - Dive Into HTML5

Die in meinen Augen beste Lösung ist es, mit einem serverseitigen Script anhand der jeweiligen URL einen JavaScript-Befehl in den Code zu schreiben, der das passende Menü beim Laden der Seite ausklappt. (Könnte man wahrscheinlich auch rein in JavaScript implementieren.)
 
Zuletzt bearbeitet:
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben