Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][HTML]mootool menu + content div
Forum PHP.pl > Forum > Przedszkole
ghastblood
Witam,
Zrobiłem sobie ruchome menu w jquery wszystko ładnie działa tylko że jak rozsuwa mi się menu to przesuwa mi div z treścią. Jak to naprawić ? zrobić z-index dla menu ? czy może jest jakieś inne rozwiązanie
grzeee
Może byś podał jak wygląda kod html/js/css smile.gif

Pewnie musisz zrobić dla rozsuwanego menu position: absolute; i wypozycjonować odpowiednio i ponadawać z-indexy
ghastblood
menu

  1.  
  2.  
  3. echo "<table cellpadding='0' cellspacing='0' width='1024px' class='$main_style' style='margin:0 auto;'>\n<tr>\n";
  4. if (LEFT) { echo "<td class='side-border-left' valign='top'>".LEFT."</td>"; }
  5. // to jest zawartość innego pliku który jest zwykłym kodem html dlatego nie ma echo
  6. <div id="navigation-block">
  7. <ul id="sliding-navigation">
  8. <li class="sliding-element"><h3>Navigation Title</h3></li>
  9. <li class="sliding-element"><a href="#">Link 1</a></li>
  10. <li class="sliding-element"><a href="#">Link 2</a></li>
  11. <li class="sliding-element"><a href="#">Link 3</a></li>
  12. <li class="sliding-element"><a href="#">Link 4</a></li>
  13. <li class="sliding-element"><a href="#">Link 5</a></li>
  14. </ul>
  15. </div>
  16. //i znow kod php
  17. echo "<td class='main-bg' valign='top'>".U_CENTER.CONTENT.L_CENTER."</td>";
  18. if (RIGHT) { echo "<td class='side-border-right' valign='top'>".RIGHT."</td>"; }
  19. echo "</tr>\n</table>\n";


teraz css

  1. nav_panel.css
  2. h2
  3. {
  4. color: #999;
  5. margin-bottom: 0;
  6. margin-left:13px;
  7. background:url(navigation.jpg) no-repeat;
  8. height:40px;
  9. }
  10.  
  11. h2 span
  12. {
  13. display: none;
  14. }
  15.  
  16. p
  17. {
  18. color: #ffff66;
  19. margin-top: .5em;
  20. font-size: .75em;
  21. padding-left:15px;
  22. }
  23.  
  24. #navigation-block {
  25. position:relative;
  26. }
  27.  
  28. #hide {
  29. position:absolute;
  30. top:30px;
  31. left:-190px;
  32. }
  33.  
  34. ul#sliding-navigation
  35. {
  36. list-style: none;
  37. font-size: .75em;
  38. margin: 30px 0;
  39. padding: 0;
  40. }
  41.  
  42. ul#sliding-navigation li.sliding-element h3,
  43. ul#sliding-navigation li.sliding-element a
  44. {
  45. display: block;
  46. width: 150px;
  47. padding: 5px 18px;
  48. margin: 0;
  49. margin-bottom: 5px;
  50. }
  51.  
  52. ul#sliding-navigation li.sliding-element h3
  53. {
  54. color: #fff;
  55. background:#333 url(heading_bg.jpg) repeat-y;
  56. font-weight: normal;
  57. }
  58.  
  59. ul#sliding-navigation li.sliding-element a
  60. {
  61. color: #999;
  62. background:#222 url(tab_bg.jpg) repeat-y;
  63. border: 1px solid #1a1a1a;
  64. text-decoration: none;
  65. }
  66.  
  67. ul#sliding-navigation li.sliding-element a:hover { color: #ffff66; }
  68.  
  69. styles.css
  70.  
  71. .news-category {
  72. border: 0;
  73. margin: 3px 5px 0 0;
  74. float: left;
  75. }
  76.  
  77. .news-footer {
  78. font-size: 10px;
  79. color: #555;
  80. background-color: #f1f1f1;
  81. border-width: 0 1px 1px 1px;
  82. border-color: #ddd;
  83. border-style: solid;
  84. padding: 3px 4px 4px 4px;
  85. }
  86.  
  87. .capmain {
  88. font-family: Verdana, Arial, Helvetica, sans-serif;
  89. font-size: 11px;
  90. font-weight: bold;
  91. color: #fff;
  92. background-color: #555;
  93. background-image: url(images/cap.gif);
  94. background-repeat: repeat-x;
  95. padding: 6px 4px 6px 4px;
  96. }
  97.  
  98. .capmain-left {
  99. width: 3px;
  100. height: 25px;
  101. background-color: #555;
  102. background-image: url(images/cap-left.gif);
  103. }
  104.  
  105. .capmain-right {
  106. width: 3px;
  107. height: 25px;
  108. background-color: #555;
  109. background-image: url(images/cap-right.gif);
  110. }
  111.  
  112. .main-bg {
  113. color: #555;
  114. padding: 10px 0 5px 0;
  115. }
  116.  
  117. /* General table properties */
  118.  
  119. .center {
  120. margin: 0 auto;
  121. }
  122.  
  123. .tbl-border {
  124. border: 1px solid #e1e1e1;
  125. }
  126.  
  127. .tbl {
  128. font-size: 11px;
  129. color: #555;
  130. background-color: #fff;
  131. padding: 4px;
  132. }
  133.  
  134. .tbl1 {
  135. font-size: 11px;
  136. color: #555;
  137. background-color: #fff;
  138. padding: 4px;
  139. }
  140.  
  141. .tbl2 {
  142. font-size: 11px;
  143. color: #555;
  144. background-color: #f1f1f1;
  145. padding: 4px;
  146. }
  147.  
  148. .forum-caption {
  149. font-size: 11px;
  150. font-weight: bold;
  151. color: #888;
  152. background-color: #f1f1f1;
  153. padding: 2px 4px 4px 4px;
  154. }
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.