Forum PHP.pl > [CSS] Menu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS] Menu

mrk9109

24.06.2010, 15:02:27

Witam otóż mam takie menu w css no i wszystko działa tak jak powino ale moje pytanie brzmi jak zrobić że po kliknięciu w dany link w menu np: druzyna zostaje obrazek ktory w style jest wywolany za pomoca " hover " o to cześć mojego kodu:

Kod

Kod

a.przycisk1 { background-image: url('images/m1a.gif'); background-repeat: no-repeat; width: 118px; height: 39px; display:block;}
a.przycisk1:hover { background-image: url('images/m1b.gif'); background-repeat: no-repeat; width: 118px; height: 39px; display:block;}
a.przycisk2 { background-image: url('images/m2a.gif'); background-repeat: no-repeat; width: 117px; height: 39px; display:block;}
a.przycisk2:hover { background-image: url('images/m2b.gif'); background-repeat: no-repeat; width: 117px; height: 39px; display:block;}

pedro84

24.06.2010, 15:09:09

Utworzyć klasę "active", na stronie sprawdzać czy strona = odnośnikowi z linka, jeśli tak, nadawać klasę active. Stylujesz ją tak samo jak hover.

mrk9109

24.06.2010, 15:19:25

noo ale patrz robie np:

Kod

<li><a href="html.html" class="przycisk2"></a></li>
i css
a.przycisk2:active { background-image: url('images/m2b.gif'); background-repeat: no-repeat; width: 117px; height: 39px; display:block;}

i Dalej nie dziala

erix

24.06.2010, 15:51:02

No ale tę klasę musisz chyba jeszcze jakoś do linka doczepić?

W samym CSS, jedyne wyjście, to pseudoklasa visited (ale przeglądarki ostatnio ograniczają stylowanie tego elementu z powodów bezpieczeństwa), ale zostaje Ci albo PHP, albo JS.

mrk9109

24.06.2010, 15:58:21

to jakis przyklad jak to zrobic ? podasz

pedro84

24.06.2010, 16:00:05

Cytat(mrk9109 @ 24.06.2010, 16:58:21 )

to jakis przyklad jak to zrobic ? podasz

Przecież masz podane jak to zrobić, z czym konkretnie masz problem?

mrk9109

24.06.2010, 16:28:01

robie to tak i to działa tylko nie wiem czemu zostają mi podswietlone 2 obrazki i jak klikne w 2 obrazek w menu to 1 zostaje dalej jak na hover o to kod:

Kod

       <div class="menu">
            <ul>
                </li>
                <li><a href="html.html" class="przycisk1"  ></a></li>
                <li><a href="xs.html" class="przycisk2" ></a></li>

                </li>
            </ul>
             </div>
a.przycisk1 { background-image: url('images/m1a.gif'); background-repeat: no-repeat; width: 118px; height: 39px; display:block;}
a.przycisk1:hover { background-image: url('images/m1b.gif'); background-repeat: no-repeat; width: 118px; height: 39px; display:block;}
a.przycisk1:active { background-image: url('images/m1b.gif'); background-repeat: no-repeat; width: 118px; height: 39px; display:block;}
a.przycisk1:visited  { background-image: url('images/m1b.gif'); background-repeat: no-repeat; width: 118px; height: 39px; display:block;}

a.przycisk2 { background-image: url('images/m2a.gif'); background-repeat: no-repeat; width: 117px; height: 39px; display:block;}
a.przycisk2:hover { background-image: url('images/m2b.gif'); background-repeat: no-repeat; width: 117px; height: 39px; display:block;}
a.przycisk2:active { background-image: url('images/m2b.gif'); background-repeat: no-repeat; width: 117px; height: 39px; display:block;}
a.przycisk2:visited { background-image: url('images/m2b.gif'); background-repeat: no-repeat; width: 117px; height: 39px; display:block;}

gdzie jest blad ?

tehaha

24.06.2010, 16:33:37

chodziło o klasę active czyli:

[HTML] pobierz, plaintext 
a.przycisk1_active { background-image: url('images/m1b.gif'); background-repeat: no-repeat; width: 118px; height: 39px; display:block;}
[HTML] pobierz, plaintext

a potem jak jesteś na tej podstronie to dodajesz:

[HTML] pobierz, plaintext 
            <ul>
                </li>
                <li><a href="html.html" class="przycisk1 przycisk1_active"  ></a></li>
                <li><a href="xs.html" class="przycisk2" ></a></li>
 
                </li>
            </ul>
[HTML] pobierz, plaintext

mrk9109

24.06.2010, 16:42:31

noo i to mi chodzilo noo ale np: jak koduje szablon pod dany cms i zamiast xs.html jest index.php?site=files to jak to zrobic

bo to co mi podałeś jest dobre jak mam stronke w html`u i dany plik ma wpisane dana classe . Myślałem o takim rozwiązaniu ale nie wiem czy to wypali:

Kod

<ul class="menu">
     <li id="menu1"><a href="index.php">O Nas</a></li>
     <li id="menu2"><a href=" index.php?site=oferta">Oferta</a></li>
     <li id="menu3"><a href=" index.php?site=galeria">Galeria</a></li>
     <li id="menu4"><a href=" index.php?site=linki">Linki</a></li>
     <li id="menu6"><a href=" index.php?site=kontakt">Kontakt</a></li>
</ul>

.home .menu #menu1,
.oferta.menu #menu2,
.galeria.menu #menu3,
.linki.menu #menu4,
.kontakt .menu #menu5 {
/* Style do aktywnej zakładki */
}

pedro84

24.06.2010, 16:48:16

site + $_GET['site'];

mrk9109

24.06.2010, 16:50:35

dzieki wszystkim ;p poradzilem sobie juz

wskazówki były cenne

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.