Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS][HTML]Jak poprawnie nadać klasy do menu?
nigraS
post 22.05.2019, 13:22:01
Post #1





Grupa: Zarejestrowani
Postów: 179
Pomógł: 1
Dołączył: 25.11.2006

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


Jak zmodyfikować ten skrypt menu, aby css odnosił się wyłącznie do tego menu, a nie do całej zawartości strony?

Jak próbowałem nadawać klacy to menu się rozjeżdżało i nie dawało takiego efektu - być może źle coś zrobiłem.
Poniżej podaję kod działającego menu.

  1. <html lang="pl">
  2. <meta charset="UTF-8">
  3. <meta name="viewport" content="width=device-width, initial-scale=1">
  4. <link rel="stylesheet" href="menu.css">
  5. </head>
  6. <label for="show-menu" class="show-menu">Pokaż menu</label>
  7. <input type="checkbox" id="show-menu" role="button">
  8. <ul class="atommenu">
  9.  
  10. <li>
  11. <a href="#">Dla dzieci</a>
  12. <ul class="hidden">
  13. <li><a href="#">Zabawki</a></li>
  14. <li><a href="#">Rowerki i Pojazdy</a></li>
  15. </ul>
  16. </li>
  17. <li>
  18. <a href="#">Elektronika</a>
  19. <ul class="hidden">
  20. <li><a href="#">Komputery</a></li>
  21. <li><a href="#">Telefony i Akcesoria</a></li>
  22. <li><a href="#">RTV i AGD</a></li>
  23. </ul>
  24. </li>
  25.  
  26.  
  27. <li>
  28. <a href="#">Dla zwierząt</a>
  29. <ul class="hidden">
  30. <li><a href="#">Koty</a></li>
  31. <li><a href="#">Fretki</a></li>
  32. </ul>
  33. </li>
  34.  
  35.  
  36.  
  37. </ul>
  38. </body>
  39. </html>
  40.  




  1.  
  2. /*Strip the ul of padding and list styling*/
  3. ul {
  4. list-style-type:none;
  5. margin:0;
  6. padding:0;
  7. position: absolute;
  8. }
  9. /*Create a horizontal list with spacing*/
  10. li {
  11. display:inline-block;
  12. float: left;
  13. margin-right: 1px;
  14. }
  15. /*Style for menu links*/
  16. li a {
  17. display:block;
  18. min-width:140px;
  19. height: 50px;
  20. text-align: center;
  21. line-height: 50px;
  22. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  23. color: #fff;
  24. background: #2f3036;
  25. text-decoration: none;
  26. }
  27. /*Hover state for top level links*/
  28. li:hover a {
  29. background: #19c589;
  30. }
  31. /*Style for dropdown links*/
  32. li:hover ul a {
  33. background: #f3f3f3;
  34. color: #2f3036;
  35. height: 40px;
  36. line-height: 40px;
  37. }
  38. /*Hover state for dropdown links*/
  39. li:hover ul a:hover {
  40. background: #19c589;
  41. color: #fff;
  42. }
  43. /*Hide dropdown links until they are needed*/
  44. li ul {
  45. display: none;
  46. }
  47. /*Make dropdown links vertical*/
  48. li ul li {
  49. display: block;
  50. float: none;
  51. }
  52. /*Prevent text wrapping*/
  53. li ul li a {
  54. width: auto;
  55. min-width: 100px;
  56. padding: 0 20px;
  57. }
  58. /*Display the dropdown on hover*/
  59. ul li a:hover + .hidden, .hidden:hover {
  60. display: block;
  61. }
  62. /*Style 'show menu' label button and hide it by default*/
  63. .show-menu {
  64. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  65. text-decoration: none;
  66. color: #fff;
  67. background: #19c589;
  68. text-align: center;
  69. padding: 10px 0;
  70. display: none;
  71. }
  72. /*Hide checkbox*/
  73. input[type=checkbox]{
  74. display: none;
  75. }
  76. /*Show menu when invisible checkbox is checked*/
  77. input[type=checkbox]:checked ~ #menu{
  78. display: block;
  79. }
  80. /*Responsive Styles*/
  81. @media screen and (max-width : 760px){
  82. /*Make dropdown links appear inline*/
  83. ul {
  84. position: static;
  85. display: none;
  86. }
  87. /*Create vertical spacing*/
  88. li {
  89. margin-bottom: 1px;
  90. }
  91. /*Make all menu links full width*/
  92. ul li, li a {
  93. width: 100%;
  94. }
  95. /*Display 'show menu' link*/
  96. .show-menu {
  97. display:block;
  98. }
  99. }
  100.  
  101.  


Ten post edytował nigraS 22.05.2019, 13:23:47
Go to the top of the page
+Quote Post
miccom
post 24.05.2019, 18:49:45
Post #2





Grupa: Zarejestrowani
Postów: 493
Pomógł: 8
Dołączył: 7.07.2007
Skąd: Tychy

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


Nadaj konkretnemu menu id lub klasę i przed każdym np. .li dodaj nazwę id lub klasy.

np. z tego

  1. ul {
  2. list-style-type:none;
  3. margin:0;
  4. padding:0;
  5. position: absolute;
  6. }




zrób


  1. .NazwaKlasymenu ul {
  2. list-style-type:none;
  3. margin:0;
  4. padding:0;
  5. position: absolute;
  6. }



Pokaż zmodyfikowany arkuszy stylów, bo może coś źle robisz? smile.gif

Ten post edytował miccom 24.05.2019, 18:51:16


--------------------
Jeśli pomogłem- kliknij POMÓGŁ-przyda się ;)- jeśli piszę bzdury- pisz pod postami. Poprawię się.
PISZĘ POPRAWNIE PO POLSKU!
Go to the top of the page
+Quote Post
nigraS
post 30.05.2019, 15:53:29
Post #3





Grupa: Zarejestrowani
Postów: 179
Pomógł: 1
Dołączył: 25.11.2006

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


Znalazłem inne podobne menu, ale również i z nim mam problem.
Czy możecie spojrzeć co źle zrobiłem, że w wersji mobilnej rozwijanie menu nie działa - w oryginalnej wersji działa dobrze.

Moje menu:
Kod
https://codepen.io/anon/pen/rgvWma


Wersja Oryginalna:
Kod
https://codepen.io/guipaduaan/pen/yaFpi


Są jakieś pomysły gdzie błąd popełniłem?

Ten post edytował nigraS 25.05.2019, 15:03:14
Go to the top of the page
+Quote Post
Neutral
post 30.05.2019, 16:31:15
Post #4





Grupa: Zarejestrowani
Postów: 286
Pomógł: 46
Dołączył: 10.01.2016

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


Przepisz część kodu z JQuery na JavaScript lub załącz tę bibliotekę, np. taką:

  1. <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Musisz umieścić ten kod w takim miejscu, żeby najpierw kod z tej biblioteki został odczytany, a dopiero później inny kod używający tej biblioteki JQuery.

Ogólnie, to naciśnij F12 i sprawdź jakie się pojawiają błędy w konsoli deweloperskiej.

Ten post edytował Neutral 30.05.2019, 16:35:02
Go to the top of the page
+Quote Post

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

 



RSS Wersja Lo-Fi Aktualny czas: 29.03.2024 - 02:22