[HTML][CSS][JavaScript?] Menu - aktywna aktualnie wyswietlana karta Opcje

[BatGraf]

Cześć

Mam problem tego typu:

Chciałbym zrobić menu takie jak na stronie http://www.tillytec.de/de/news.html -
Chodzi o to, żeby zakładka, której dotyczy podstrona, była aktywna (inne tło) po wejściu na podstronę.

Napisałem [JavaScript?] bo nie wiem, czy można to osiągnąć w css, czy musi być w JS?

Bardzo proszę o pomoc i z góry dzięki

[erix]

Zostaje JS. Zapisuj ciastko z bieżącą podstroną.

[sweter]

Użyj CSS-ów
Zakładki przechowaj w liście i użyj :hover (który odpowiada za to co ma się zrobić z obiektem ponajechaniu myszką), np.:

[HTML] pobierz, plaintext 
ul li:hover{
   background-image:url('adres_obrazka_z_aktywną_zakładką')
} 
[HTML] pobierz, plaintext 

[BatGraf]

erix - kombinuję z jQuery, ale wolałbym bez JS. Jeśli natomiast trzeba będzie, to będzie w JS

sweter - nie wiem czy dobrze rozumiem, ale to sposób na efekt po najechaniu? To znam doskonale Chodzi mi o to, żeby po kliknieciu na zakładkę np "podstrona1" i przejściu na "podstrona1" zmieniła się na taką "wyróżnioną" z tłem innym niż .a {} czy a:hover {}

______________

W JavaScript znalazłem całkiem fajne menu z jQuery http://webmuch.com/demos/jQ_animated_navbar/navbar.html




Ten post edytował BatGraf 25.08.2009, 20:38:23

[thek]

A tak trudno pomyśleć, że skoro przechodzisz na daną podstronę to wiesz CO kliknąłeś i ustawić CSS dla tego elementu menu "na sztywno"? Ja sobie definiuję klasę "chosen" i ustawiam ją temu wybranemu elementowi.

Ten post edytował thek 25.08.2009, 21:17:46

[BatGraf]

Rany, chyba właśnie mi o to chodzi.
Napisz, proszę trochę szerzej, bo wydaje mi się, że nie wiem jak to zrobić.

Już mi ręce opadły - zrezygnowałem z jQuery, więc może Ty mi pomożesz

Zaczynam myśleć nad phpem, ale nie wiem czy to słuszne rozwiazanie - uzaleznić tło od tego co przesyła GET

Ten post edytował BatGraf 25.08.2009, 22:07:39

[thek]

Akurat robiłem to we frameworku, więc w czystym pho może to wyglądać nieco inaczej... Skoro znam podstronę na ktorej sie znajduję, to wiem tak naprawdę jaki element menu ja wywołał. Ja mam dwa menu, a właściwie menu i grupę kilku submenu. Każde z submenu ma początkowo display:none, ale po najechaniu na element menu, który posiada submenu danemu submenu uwidaczniam na stronie. Gdy kliknę na jakiś link z submenu przenosi mnie do danej podstrony a jednocześnie jej kontroler wysyła do widoku informację o tym z jaką pozycją submenu ma do czynienia. Widok przechwytuje tę informacje i dokleja do tego elementu zdefiniowaną przeze mnie klasę, która oznacza zaznaczenie.

[PHP] pobierz, plaintext 
<div id="menu">
        <ul class="menu">
            <li><a href="" onmouseover="submenu('1');return"<?php echo ($kontrolerG == "1") ? ' class="active"' : '' ?>>link</a></li>
            <li><a href="" onmouseover="submenu('2');return"<?php echo ($kontrolerG == "2") ? ' class="active"' : '' ?>>link</a></li>
            <li><a href="" onmouseover="submenu('3');return"<?php echo ($kontrolerG == "3") ? ' class="active"' : '' ?>>link</a></li>
            <li><a href="" onmouseover="submenu('4');return"<?php echo ($kontrolerG == "4") ? ' class="active"' : '' ?>>link</a></li>
            <li><a href="" onmouseover="submenu('5');return"<?php echo ($kontrolerG == "5") ? ' class="active"' : '' ?>>link</a></li>
        </ul>
    </div>
    <div id="submenu1" style="<?php echo ($kontrolerG == "1") ? 'display:block;' : 'display:none;' ?>">
        <ul class="menu">
            <li><a href=""<?php echo ($kontrolerP == "1") ? ' class="active"' : '' ?>>link</a></li>
            <li><a href=""<?php echo ($kontrolerP == "2") ? ' class="active"' : '' ?>>link</a></li>
            <li><a href=""<?php echo ($kontrolerP == "3") ? ' class="active"' : '' ?>>link</a></li>
            <li><a href=""<?php echo ($kontrolerP == "4") ? ' class="active"' : '' ?>>link</a></li>
            <li><a href=""<?php echo ($kontrolerP == "5") ? ' class="active"' : '' ?>>link</a></li>
        </ul>
    </div>
    <div id="submenu2" style="<?php echo ($kontrolerG == "2") ? 'display:block;' : 'display:none;' ?>">
        <ul class="menu">
            <li><a href=""<?php echo ($kontrolerP == "1") ? ' class="active"' : '' ?>>link</a></li>
            <li><a href=""<?php echo ($kontrolerP == "2") ? ' class="active"' : '' ?>>link</a></li>
            <li><a href=""<?php echo ($kontrolerP == "3") ? ' class="active"' : '' ?>>link</a></li>
            <li><a href=""<?php echo ($kontrolerP == "4") ? ' class="active"' : '' ?>>link</a></li>
        </ul>
    </div>
    <div id="submenu3" style="<?php echo ($kontrolerG == "3") ? 'display:block;' : 'display:none;' ?>">
        <ul class="menu">
            <li><a href=""<?php echo ($kontrolerP == "1") ? ' class="active"' : '' ?>>link</a></li>
            <li><a href=""<?php echo ($kontrolerP == "2") ? ' class="active"' : '' ?>>link</a></li>
            <li><a href=""<?php echo ($kontrolerP == "3") ? ' class="active"' : '' ?>>link</a></li>
            <li><a href=""<?php echo ($kontrolerP == "4") ? ' class="active"' : '' ?>>link</a></li>
        </ul>
    </div>
    <div id="submenu4" style="<?php echo ($kontrolerG == "4") ? 'display:block;' : 'display:none;' ?>">
        <ul class="menu">
            <li><a href=""<?php echo ($kontrolerP == "1") ? ' class="active"' : '' ?>>link</a></li>
            <li><a href=""<?php echo ($kontrolerP == "2") ? ' class="active"' : '' ?>>link</a></li>
            <li><a href=""<?php echo ($kontrolerP == "3") ? ' class="active"' : '' ?>>link</a></li>
            <li><a href=""<?php echo ($kontrolerP == "4") ? ' class="active"' : '' ?>>link</a></li>
            <li><a href=""<?php echo ($kontrolerP == "5") ? ' class="active"' : '' ?>>link</a></li>
        </ul>
    </div>
    <div id="submenu5" style="<?php echo ($kontrolerG == "5") ? 'display:block;' : 'display:none;' ?>">
        <ul class="menu">
            <li><a href=""<?php echo ($kontrolerP == "1") ? ' class="active"' : '' ?>>link</a></li>
            <li><a href=""<?php echo ($kontrolerP == "2") ? ' class="active"' : '' ?>>link</a></li>
            <li><a href=""<?php echo ($kontrolerP == "3") ? ' class="active"' : '' ?>>link</a></li>
            <li><a href=""<?php echo ($kontrolerP == "4") ? ' class="active"' : '' ?>>link</a></li>
            <li><a href=""<?php echo ($kontrolerP == "5") ? ' class="active"' : '' ?>>link</a></li>
        </ul>
    </div>
[PHP] pobierz, plaintext 

$kontrolerG to pozycja w menu głównym, zaś $kontrolerP to pozycja w submenu. Para tych dwóch oznacza dla mnie konieczność doklejenia klasy active dla konkretnego elementu w submenu. W momencie gdy jest podana tylko jedna z liczb oznacza to przyjęcie 1 jako domyślnego drugiego parametru.
A więc 5,3 to "zakolorowanie" 5 elementu w menu i 3 elementu w jego submenu, zaś wywolanie 4 oznacza to samo dla 4 elementu w menu i domyślnie 1 w jego submenu. Dodatkowo, jak może widać, jest skrypt submenu(x), który odpowiada za wyświetlanie właściwego submenu przy najechaniu na element menu. Działa to na zasadzie podobnej do zakładek. Oczywiście mi jest łatwo bo mam nemu na sztywno, a ktoś może je mieć generowane, ale wtedy może sie odnosić id lub czymś co jednoznacznie identyfikowałoby element do zaznaczenia. Całość oczywiście ostylowana tak, że tworzy zgrabne menu poziome. Nie jest to trudne do zrobienia, tylko trzeba zrozumieć ideę, która stoi za takim podejściem. Ale to jest akurat rozwiązanie dobre gdy nie ma wielu zagłębień, bo inaczej robi się zamieszanie ze względu na ogromną ilość linków będących wtedy obok siebie. A każdy wie, że zbyt dużo linków na jednej stronie (podstronie), źle z reguły wpływa na jej pozycjonowanie i obniża ranking.

[BatGraf]

Dzięki, na pewno się przyda, nie tylko dla mnie.
Rozwiązałem to trochę za pomocą sznurka i drutu, ale działa i to nawet całkiem dobrze

Dziś już ciut późno, ale jutro spróbuję Twojego sposobu, bo mój jest trochę kłopotliwy w eksploatacji - dodawanie , zmiana linków itp.

Tak czy inaczej, dzięki wszystkim