Menu,Podswietlenie ,JQuery, Menu aktywne podswietlnie aktualnie wyswietlanej strony. Opcje

[pantera366]

Witam!.Oto moja nieukończona jeszcze stronka.http://pantera366.xtreemhost.com/index.html.Problem lezy w menu,nie moge sobie za bardzo poradzić z taka sytuacja,chciałbym aby po otwarciu danej podstrony przycisk menu był dalej podświetlany,próbowałem rożnych kombinacji z a:active ale bez skutecznie,bez ingerencji w js pewnie nie da rady.Zakładam sie ze chodzi tu o prosta rzecz{dla kogos kto siedzi w js) ale ja niestety mam jeszcze zbyt malo wiedzy aby to rozwiązać dlatego zgłaszam sie do zyczliwych mi osob na tym forum o pomoc.

Tak wygląda kod w xhtml

[HTML] pobierz, plaintext 
 
<ul id="menu">
     <li><a href="o mnie.html" class="omnie"><span></span></a></li>
     <li><a href="galeria.html" class="galeria"><span></span></a></li>
     <li><a href="cv.html" class="cv"><span></span></a></li>
     <li><a href="kontakt.php" class="kontakt"><span></span></a></li>
     <li><a href="inne.html" class="inne"><span></span></a></li>
</ul>
 
 
[HTML] pobierz, plaintext 

Tutaj mamy css

[HTML] pobierz, plaintext 
 
#ul menu{margin:0; padding:0; list-style:none; clear:both;  }
 
 
 
ul#menu li {
float:left;
overflow:hidden; text-indent:-9999px; display:inline;  margin:10px 1px ;
}
 
 
ul#menu li a {
 
    width:112px;
background:url(images/spritemenu_03.png) no-repeat scroll top left;
display:block;
height:48px;
position:relative;
}
 
 
 
ul#menu li a span {
    background:url(images/spritemenu_03.png)  no-repeat scroll bottom left;
    display:block;
    position:absolute;
    height:100%;
    width:111px;
    z-index:100;
}
 
 
 
 
ul#menu li a.omnie {
width:112px;
background-position:0px 0px
}
ul#menu li a.galeria{
    background-position: -112px 0px}
 
ul#menu li a.cv{
    background-position: -224px 0px}
 
ul#menu li a.kontakt{
    background-position:  -336px  0px}
 
ul#menu li a.inne{
    background-position:   -448px 0px}
 
 
ul#menu li a.omnie span {
background-position:0px -48px;
}
 
ul#menu li a.galeria span {
    background-position: -112px -48px}
 
ul#menu li a.cv span {
    background-position: -224px -48px}
 
ul#menu li a.kontakt span {
    background-position: -336px -48px}
 
ul#menu li a.inne span {
    background-position: -448px -48px;}
 
 
[HTML] pobierz, plaintext 

A tak prezentuje się skrypt odpowiedzialny za podswietlenie

[HTML] pobierz, plaintext 
 
<script type="text/javascript">
$(function() {
        // set opacity to nill on page load
        $("ul#menu span").css("opacity","0");
        // on mouse over
        $("ul#menu span").hover(function () {
            // animate opacity to full
            $(this).stop().animate({
                opacity: 1
            }, 180);
        },
        // on mouse out
        function () {
            // animate opacity to nill
            $(this).stop().animate({
                opacity: 0
            }, 500);
        });
    });
</script>
 
 
 
 
 
 
 
 
[HTML] pobierz, plaintext 

Bede bardzo wdzięczny za każdą pomoc,wskazówkę rade.pozdrawiam !

Ten post edytował pantera366 18.09.2010, 06:23:18

[devnul]

zrób coś takiego

[HTML] pobierz, plaintext 
<ul id="menu">
     <li><a href="o mnie.html" class="omnie"><span></span></a></li>
     <li><a href="galeria.html" class="galeria active"><span></span></a></li>
     <li><a href="cv.html" class="cv"><span></span></a></li>
     <li><a href="kontakt.php" class="kontakt"><span></span></a></li>
     <li><a href="inne.html" class="inne"><span></span></a></li>
</ul>
[HTML] pobierz, plaintext 

[JAVASCRIPT] pobierz, plaintext 
<script type="text/javascript">
$(function() {
        // set opacity to nill on page load
        $("ul#menu a:not(.active) span").css("opacity","0");
        // on mouse over
        $("ul#menu a:not(.active) span").hover(function () {
            // animate opacity to full
            $(this).stop().animate({
                opacity: 1
            }, 180);
        },
        // on mouse out
        function () {
            // animate opacity to nill
            $(this).stop().animate({
                opacity: 0
            }, 500);
        });
    });
</script>
[JAVASCRIPT] pobierz, plaintext 

dzięki temu pominięte zostają animacje na elementach oznaczonych jako aktywne

[pantera366]

hmm dzięki to w końcu jakiś konkret! ale nie działa tak jakbym chciał a mianowicie.Co prawda przycisk menu jest podświetlony,ale po ponownym kliknięciu z powrotem się nie podświetla.

Ten post edytował pantera366 18.09.2010, 19:29:40

[devnul]

Co prawda przycisk menu jest podświetlony,ale po ponownym kliknięciu z powrotem się nie podświetla.

przyznam się że nie bardzo rozumiem. wrzuć może kod na stronę i zobaczymy jak to w praktyce działa - na przykładzie łatwiej będzie dojść w czym problem

[pantera366]

przyznam się że nie bardzo rozumiem. wrzuć może kod na stronę i zobaczymy jak to w praktyce działa - na przykładzie łatwiej będzie dojść w czym problem

już się robi wygląda i działa to dokładnie tak http://pantera366.xtreemhost.com/index.html

[devnul]

omg, no ale co się człowieku dziwisz że nie działa jak na podstronach oczywiście odpowiedniej klasy nie włączasz do adekwatnych pozycji menu włączoną masz tylko na index i dziwisz się że nie działa

[pantera366]

omg, no ale co się człowieku dziwisz że nie działa jak na podstronach oczywiście odpowiedniej klasy nie włączasz do adekwatnych pozycji menu włączoną masz tylko na index i dziwisz się że nie działa

chwilka już sprawdzę czy będzie działać.Ok teraz jest prawie dobrze lecz dalej mam problem z prawidlowym podswietlaniem sie 2 przyciskow.zaraz pokaze w czym problem tylko bez nerwow A wiec wyglada to teraz tak . http://pantera366.xtreemhost.com/index.html.Zbuntowaly sie 2 przyciski o mnie oraz kontakt bo reszta dziala dobrze



Edit: ok wiem co jest nie tak tam poprostu niepodpielem zmienionego przez ciebie skryptu



WIELKIE DZIEKI ZA POMOC I CIERPLIWOSC.POZDRAWIAM

Ten post edytował pantera366 18.09.2010, 21:43:11