Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> menu w samym css jeszcze bardziej uniwersalne
onlyX
post
Post #1





Grupa: Zarejestrowani
Postów: 119
Pomógł: 0
Dołączył: 15.07.2003
Skąd: Grajewo

Ostrzeżenie: (0%)
-----


Witam!

Chciałem stworzyć prototyp wielopoziomowego menu, tak żeby bez zbędnej roboty móc je skopiować do nowych projektów. Problem z tym co już napisałem jest taki, że każdy z poziomów trzeba chować osobno, co daje po 2 reguły dla każdego poziomu.
Czy da się to tak napisać te reguły, aby działały dla nieskończenie wielu poziomów? Taki mały szczególik, ale chciałbym, żeby to było maksymalnie uniwersalne.

  1. /* DROPDOWN MENU */
  2.  
  3. .dropdown-menu li{
  4. float: left;
  5. position: relative;
  6. }
  7. /* 2 level */
  8. .dropdown-menu li ul{
  9. display: none;
  10. position: absolute;
  11. top: 30px; /* wysokosc 1 poziomu */
  12. left: 0px;
  13. }
  14. .dropdown-menu li ul li{
  15. float: none;
  16. }
  17. .dropdown-menu li ul li ul{
  18. left: 120px; /* szerokosc 2+*/
  19. top: 0;
  20. }
  21. /* pokazywanie i chowanie odpowiednich poziomów */
  22. .dropdown-menu li:hover ul {
  23. display: block;
  24. }
  25. .dropdown-menu li:hover ul li ul{
  26. display: none;
  27. }
  28. .dropdown-menu li ul li:hover ul{
  29. display: block;
  30. }
  31. .dropdown-menu li ul li:hover ul li ul{
  32. display: none;
  33. }
  34. .dropdown-menu li ul li ul li:hover ul{
  35. display: block;
  36. }
  37. .dropdown-menu li ul li ul li:hover ul li ul{
  38. display: none;
  39. }
  40. /* DROPDOWN MENU - end*/
  41.  
  42.  
  43. /* wygląd menu*/
  44. #nav{
  45. width: 950px;
  46. height: 30px;
  47. margin: 0 auto;
  48. background: #ccc;
  49. }
  50. #nav ul li{
  51. line-height: 30px;
  52. height: 30px;
  53. }
  54. #nav ul ul{
  55. background: #bbb;
  56. }
  57. #nav ul ul ul{
  58. background: #aaa;
  59. }
  60. #nav ul ul ul ul{
  61. background: #999;
  62. }
  63. #nav ul li ul li{
  64. width: 120px;
  65. }


Ten post edytował onlyX 27.09.2010, 14:35:50
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi
onlyX
post
Post #2





Grupa: Zarejestrowani
Postów: 119
Pomógł: 0
Dołączył: 15.07.2003
Skąd: Grajewo

Ostrzeżenie: (0%)
-----


Demo: http://s339854745.domenastandartowa.pl/kom..._down_menu.html

w HTMLu nie ma nic szczególnego:
  1. <div id="nav"><ul class="dropdown-menu">
  2. <li><a href="#">Menu 1</a>
  3. <ul>
  4. <li><a href="#">Menu item 1-1</a></li>
  5. <li><a href="#">Menu item 1-2</a></li>
  6. <li><a href="#">Menu item 1-3</a></li>
  7. </ul>
  8. </li>
  9.  
  10. <li>Menu 2
  11. <ul>
  12. <li><a href="#">Menu item 2-1</a></li>
  13. <li>
  14. <a href="#">Menu item 2-2</a>
  15. <ul>
  16. <li><a href="#">Menu item 2-2-1</a></li>
  17. <li>
  18. <a href="#">Menu item 2-2-2</a>
  19. <ul>
  20. <li><a href="#">Menu item 2-2-2-1</a></li>
  21. <li><a href="#">Menu item 2-2-2-2</a></li>
  22. <li><a href="#">Menu item 2-2-2-3</a></li>
  23. </ul>
  24. </li>
  25. <li><a href="#">Menu item 2-2-3</a></li>
  26. </ul>
  27. </li>
  28. <li><a href="#">Menu item 2-3</a></li>
  29. </ul>
  30. </li>
  31. <li><a href="#">Menu 3</a>
  32. <ul>
  33. <li><a href="#">Menu item 3-1</a></li>
  34. <li><a href="#">Menu item 3-2</a></li>
  35. <li><a href="#">Menu item 3-3</a></li>
  36. </ul>
  37. </li>
  38. </ul>
  39.  
  40. </div>
Go to the top of the page
+Quote Post

Posty w temacie


Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 10.10.2025 - 07:16