Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Menu,Podswietlenie ,JQuery
Forum PHP.pl > Forum > Po stronie przeglądarki
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

  1.  
  2. <ul id="menu">
  3. <li><a href="o mnie.html" class="omnie"><span></span></a></li>
  4. <li><a href="galeria.html" class="galeria"><span></span></a></li>
  5. <li><a href="cv.html" class="cv"><span></span></a></li>
  6. <li><a href="kontakt.php" class="kontakt"><span></span></a></li>
  7. <li><a href="inne.html" class="inne"><span></span></a></li>
  8. </ul>
  9.  
  10.  


Tutaj mamy css
  1.  
  2. #ul menu{margin:0; padding:0; list-style:none; clear:both; }
  3.  
  4.  
  5.  
  6. ul#menu li {
  7. float:left;
  8. overflow:hidden; text-indent:-9999px; display:inline; margin:10px 1px ;
  9. }
  10.  
  11.  
  12. ul#menu li a {
  13.  
  14. width:112px;
  15. background:url(images/spritemenu_03.png) no-repeat scroll top left;
  16. display:block;
  17. height:48px;
  18. position:relative;
  19. }
  20.  
  21.  
  22.  
  23. ul#menu li a span {
  24. background:url(images/spritemenu_03.png) no-repeat scroll bottom left;
  25. display:block;
  26. position:absolute;
  27. height:100%;
  28. width:111px;
  29. z-index:100;
  30. }
  31.  
  32.  
  33.  
  34.  
  35. ul#menu li a.omnie {
  36. width:112px;
  37. background-position:0px 0px
  38. }
  39. ul#menu li a.galeria{
  40. background-position: -112px 0px}
  41.  
  42. ul#menu li a.cv{
  43. background-position: -224px 0px}
  44.  
  45. ul#menu li a.kontakt{
  46. background-position: -336px 0px}
  47.  
  48. ul#menu li a.inne{
  49. background-position: -448px 0px}
  50.  
  51.  
  52. ul#menu li a.omnie span {
  53. background-position:0px -48px;
  54. }
  55.  
  56. ul#menu li a.galeria span {
  57. background-position: -112px -48px}
  58.  
  59. ul#menu li a.cv span {
  60. background-position: -224px -48px}
  61.  
  62. ul#menu li a.kontakt span {
  63. background-position: -336px -48px}
  64.  
  65. ul#menu li a.inne span {
  66. background-position: -448px -48px;}
  67.  
  68.  



A tak prezentuje się skrypt odpowiedzialny za podswietlenie

  1.  
  2. <script type="text/javascript">
  3. $(function() {
  4. // set opacity to nill on page load
  5. $("ul#menu span").css("opacity","0");
  6. // on mouse over
  7. $("ul#menu span").hover(function () {
  8. // animate opacity to full
  9. $(this).stop().animate({
  10. opacity: 1
  11. }, 180);
  12. },
  13. // on mouse out
  14. function () {
  15. // animate opacity to nill
  16. $(this).stop().animate({
  17. opacity: 0
  18. }, 500);
  19. });
  20. });
  21.  
  22.  
  23.  
  24.  
  25.  
  26.  
  27.  
  28.  




Bede bardzo wdzięczny za każdą pomoc,wskazówkę rade.pozdrawiam !
devnul
zrób coś takiego
  1. <ul id="menu">
  2. <li><a href="o mnie.html" class="omnie"><span></span></a></li>
  3. <li><a href="galeria.html" class="galeria active"><span></span></a></li>
  4. <li><a href="cv.html" class="cv"><span></span></a></li>
  5. <li><a href="kontakt.php" class="kontakt"><span></span></a></li>
  6. <li><a href="inne.html" class="inne"><span></span></a></li>
  7. </ul>


[JAVASCRIPT] pobierz, plaintext
  1. <script type="text/javascript">
  2. $(function() {
  3. // set opacity to nill on page load
  4. $("ul#menu a:not(.active) span").css("opacity","0");
  5. // on mouse over
  6. $("ul#menu a:not(.active) span").hover(function () {
  7. // animate opacity to full
  8. $(this).stop().animate({
  9. opacity: 1
  10. }, 180);
  11. },
  12. // on mouse out
  13. function () {
  14. // animate opacity to nill
  15. $(this).stop().animate({
  16. opacity: 0
  17. }, 500);
  18. });
  19. });
  20. </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.
devnul
Cytat
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
Cytat(devnul @ 18.09.2010, 21:21:05 ) *
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
Cytat(devnul @ 18.09.2010, 22:09:23 ) *
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 aaevil.gif 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
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.