Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][CSS][PHP] Opuszczanie się strony wraz z menu
Forum PHP.pl > Forum > Przedszkole
misterious
Witam!
Posiadam menu na stronie z takim oto kodem:
CSS:
  1. ul#navigation {
  2. position: fixed;
  3. margin: 0px;
  4. padding: 0px;
  5. top: 0px;
  6. right: 28%;
  7. list-style: none;
  8. z-index:999999;
  9. }
  10.  
  11. ul#navigation li {
  12. width: 103px;
  13. display:inline;
  14. float:left;
  15. }
  16.  
  17. ul#navigation li a {
  18. display: block;
  19. float:left;
  20. margin-top: -2px;
  21. width: 100px;
  22. height: 40px;
  23. background-color:#E7F2F9;
  24. background-repeat:no-repeat;
  25. background-position:50% 10px;
  26. text-decoration:none;
  27. border:1px solid #BDDCEF;
  28. text-decoration:none;
  29. text-align:center;
  30. padding-top:80px;
  31. -moz-border-radius:0px 0px 10px 10px;
  32. -webkit-border-bottom-right-radius: 10px;
  33. -webkit-border-bottom-left-radius: 10px;
  34. -khtml-border-bottom-right-radius: 10px;
  35. -khtml-border-bottom-left-radius: 10px;
  36. opacity: 0.7;
  37. filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  38. }
  39.  
  40. ul#navigation .glowna a{
  41. background-image: url(../images/home.png);
  42. }
  43. ul#navigation .user a {
  44. background-image: url(../images/id_card.png);
  45. }
  46. ul#navigation .admin a {
  47. background-image: url(../images/admin.png);
  48. }
  49. ul#navigation .cennik a {
  50. background-image: url(../images/cennik.png);
  51. }
  52. ul#navigation .zamow a {
  53. background-image: url(../images/platnosc.png);
  54. }
  55. ul#navigation .logowanie a {
  56. background-image: url(../images/klodka.png);
  57. }
  58. ul#navigation .kontakt a {
  59. background-image: url(../images/mail.png);
  60. }
  61. ul#navigation .rejestracja a {
  62. background-image: url(../images/rejestruj.png);
  63. }
  64. ul#navigation .szukaj a {
  65. background-image: url(../images/search.png);
  66. }
  67. ul#navigation .wyloguj a {
  68. background-image: url(../images/wyloguj.png);
  69. }
  70. ul#navigation .mod a {
  71. background-image: url(../images/mod.png);
  72. }
  73. ul#navigation .kategorie a {
  74. background-image: url(../images/kategorie.png);
  75. }


JQuery
  1. $(function() {
  2. var d=300;
  3. $('#navigation a').each(function(){
  4. $(this).stop().animate({
  5. 'marginTop':'-80px'
  6. },d+=150);
  7. });
  8. $('#navigation > li').hover(
  9. function () {
  10. $('a',$(this)).stop().animate({
  11. 'marginTop':'-2px'
  12. },200);
  13. },
  14. function () {
  15. $('a',$(this)).stop().animate({
  16. 'marginTop':'-80px'
  17. },200);
  18. }
  19. );
  20. });

i menu:
  1. <ul id="navigation">
  2. <li class="glowna"><a href="index.php"><span>Strona główna</span></a></li>
  3. <li class="cennik"><a href="cennik.php"><span>Cennik</span></a></li>
  4. <li class="zamow"><a href="zamow.php"><span>Zamów</span></a></li>
  5. <li class="kategorie"><a href="cats.php"><span>Kategorie</span></a></li>
  6. <li class="kontakt"><a href="kontakt.php"><span>Kontakt</span></a></li>
  7. </ul>

Pod tym jest div - id "reklamy", i cała reszta strony.
Chciałbym, aby po wysunięciu którejś z części tego menu obniżała się cała strona.

Wiem że to znając życie banał, ale nie mam pomysłu sad.gif
MlodyJNTR
zamień css ul#navigation na to:
  1. ul#navigation {
  2. margin: 0px;
  3. margin-top: -30px;
  4. right: 30%;
  5. list-style: none;
  6. z-index: 999999;
misterious
Funkcjonuje to co podałeś, jednakże to tylko przesuwa tekst, a nie obniża div sad.gif
MlodyJNTR
By dobrze działało tylko że masz tekst ustawiony na <center>...</center>.
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.