Problem z a:active a:current

2011-01-26 14:16:08 Post #1 korey

 
Witam.
Temat głównie kieruję do Pana nospora gdyż w jego menu widzę rozwiązanie problemu.
Teraz do rzeczy.

Napisałem sobie ładne menu (którym się pochwalę w odpowiednim dziale jak skończę) i mam problem z efektem active. Kombinowałem na wiele sposobów (Js onClick, onmouseover, onmouseout. w css ACTIVE i CURRENT )i niestety nic mi z tego nie wychodziło. o to kody:
HTML:
1
2
3
4
5
6
7
8
9
10
11
<div id="menu">
<ul>
<li><a href="#link" >Strona Główna</a></li>
<li><a href="#link6">Artykuły</a></li>
<li><a href="#link1">O Nas</a></li>
<li><a href="#link2">Kontakt</a></li>
<li><a href="#link3">Forum</a></li>
<li><a href="#link4">FAQ</a></li>
<li><a href="#link5">Rejestracja</a></li>
<ul>
</div>


CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
/*        -============= SEKCJA MOJE MENU TEST    =============-    */
div#menu{
    margin: 3px 0px 4px 0px;
    float: left;
    height: 59px;
    width: 920px;
    background: url(obrazki/nawigacja_05.gif) repeat-x;
    overflow: hidden;
    background-color: #e6f1dc;
    -moz-border-radius-topleft: 8px; /*FF*/
    -moz-border-radius-topright: 8px; /*FF*/
    -webkit-border-top-left-radius: 8px; /*webkit Opera/Safari */
    -webkit-border-top-right-radius: 8px; /*webkit Opera/Safari */
}
div#menu ul{
    height: 59px;
    float: left;
    list-style: none;
    line-height: 1;
    color:#FFFF00;
    padding: 0;
}

div#menu a, div#menu a:visited {
    display: block;
    text-decoration: underline;
    color: #CCD7E3;
    text-decoration: none;
    padding: 6px 0px 6px 5px;
}
div#menu li{
    font: 18px "Gill Sans MT",sans-serif;
    border: solid 0px red;
    height: 59px;
    float: left;
    text-align: center;
    margin: 0px;
    padding: 0px 16px 0px 14px;
}
div#menu li:first-child a{
    color: #5d8fc6;
}
div#menu li:hover{
    -moz-border-radius-topleft: 5px; /*FF*/
    -moz-border-radius-topright: 5px; /*FF*/
    -webkit-border-top-left-radius: 5px; /*webkit Opera/Safari */
    -webkit-border-top-right-radius: 5px; /*webkit Opera/Safari */
    background: #9dd53a; /* old browsers */
    background: -moz-linear-gradient(top, #9dd53a 0%, #80c217 17%, #5EAF3B 26%, #80c217 35%, #A5CE86 68%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(17%,#80c217), color-stop(26%,#5EAF3B), color-stop(35%,#80c217), color-stop(68%,#A5CE86)); /* webkit */
    filter: progidXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#A5CE86',GradientType=0 ); /* ie */
}

div#menu li:hover a{
    color: #006b14;
}


menu działa tak: http://test.get-movie.pl/art/#link3
a chciałbym by działało tak jak u Ciebie nospot (by po kliknieciu w link bylo zaznaczone tym zielonym).

2011-01-26 15:01:48 Post #2 nospor

 
Ja dynamicznie w momencie generowania kodu menu (w php) dodaję klasę active do aktywnej pozycji menu. Zadne onmouseover czy takie tam

2011-01-26 15:24:35 Post #3 korey

 
nie wiele mi dała twoja odpowiedz..

//pewnie znowu nautrudnialem sobie sprawe ale udalo sie. juz dziala jak trzeba

2011-01-26 19:20:30 Post #4 nospor

 
No ale co tu nie rozumieć? Podczas generowania kodu menu dodaje klasę ACTIVE dla aktywnej pozycji:
echo '
<div id="menu">
<ul>
<li class="ACTIVE"><a href="#link" >Strona Główna</a></li>
<li><a href="#link6">Artykuły</a></li>
<li><a href="#link1">O Nas</a></li>
<li><a href="#link2">Kontakt</a></li>
<li><a href="#link3">Forum</a></li>
<li><a href="#link4">FAQ</a></li>
<li><a href="#link5">Rejestracja</a></li>
<ul>
</div>';

Odpowiedz