Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Najprostsze wysuwane menu.
Forum PHP.pl > Forum > Przedszkole
GoldeNx3
Witam ponownie.

Jak mogę zrobić najprostrze wysuwane menu po najechaniu na daną opcję w menu?

Mam taki CSS:

  1. #menu_box {
  2. margin-top: 2px;
  3. clear: both;
  4. background: #2B1E1;
  5. text-align: center;
  6. line-height: 30px;
  7. vertical-align : middle;
  8. height : 40px;
  9. width : 100%;
  10. }
  11. #menu_main {
  12. height : 100%;
  13. width : 100%;
  14. }
  15. .menu_button {
  16. display : inline;
  17. height : 40px;
  18. width : 182px;
  19. padding: 22px;
  20. }
  21.  
  22. .menu_button:hover {
  23. background: transparent url(./images/s_menu.png) no-repeat scroll 50% 100%;
  24. }
  25.  
  26. .menu_button a {
  27. font-size : 12px;
  28. color: #ad9c87;
  29. font-weight : bold;
  30. text-decoration : none;
  31. margin: 0 auto;
  32. }
rossecki
<okok> kolejny który idzie na łatwiznę :/ http://bit.ly/tEfGdf
GoldeNx3
Okej! To ostatnie pytanie do Was:

Mam taki CSS menu:

  1. ul {
  2. list-style:none; /* usuwamy wypunktowanie listy */
  3. }
  4.  
  5. #menu {
  6. margin: 0;
  7. padding: 0; /* usuwamy wszelkie odstępy */
  8. }
  9.  
  10. #menu li a {
  11. border-left: 1px #2a2a2a solid;
  12. border-right: 1px #585a5b solid;
  13. border-bottom: 1px #585a5b solid;
  14. border-top: 1px #2a2a2a solid;
  15. color: #ffffff;
  16. text-decoration:none;
  17. padding:10px 10px;
  18. background: #333333;
  19. }
  20.  
  21. #menu li, #menu li a {
  22. float:left;
  23. }
  24.  
  25. #menu li {
  26. position:relative; /* względem tego będziemy pozycjonowali podmenu */
  27. }
  28.  
  29. #menu li a:hover {
  30. background: #252627;
  31. }
  32.  
  33. #menu li ul { /* tutaj odnosimy się do podmenu*/
  34. display:none;
  35. position:absolute;
  36. top:100%; /* wysuwające się podmenu przesuwamy w dół o długość menu-matki */
  37. padding:0;
  38. margin:0; /*usuwamy wszelkie odstępy podmenu*/
  39. }
  40.  
  41. #menu li:hover > ul { /* selektor > oznacza, że instrukcja obejmuje każdy tag <ul> wewnątrz #menu li */
  42. display:block;
  43. }
  44.  
  45. #menu li ul li, #menu li ul li a {
  46. float: none;
  47. }
  48.  
  49. #menu li ul li a {
  50. width: 100px; /* szerokosc wysuwajacego sie podmenu*/
  51. display: block;
  52. }



Jak mam menu wyśrodkować, czy było na środku strony, oraz wsadzić je na header? Głównie chodzi o wyśrodkowanie.
Damonsson
text-align: center;
albo
margin: x auto;
zależy jak to tam działa u Ciebie.
rossecki
Google?! środkowanie.. stary to są podstawy..
GoldeNx3
Niestety ale nic nie działa. Próbowałem w większości rzeczy i nic. ;/
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.