Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS][HTML]Jak poprawnie nadać klasy do menu?
nigraS
post
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.

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




[HTML] pobierz, plaintext 
  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.  
[HTML] pobierz, plaintext


Ten post edytował nigraS 22.05.2019, 13:23:47
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 3)
miccom
post
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 

[HTML] pobierz, plaintext 
  1. ul {
  2.     list-style-type:none;
  3.     margin:0;
  4.     padding:0;
  5.     position: absolute;
  6. }
[HTML] pobierz, plaintext




zrób 


[HTML] pobierz, plaintext 
  1. .NazwaKlasymenu ul {
  2.     list-style-type:none;
  3.     margin:0;
  4.     padding:0;
  5.     position: absolute;
  6. }
[HTML] pobierz, plaintext



Pokaż zmodyfikowany arkuszy stylów, bo może coś źle robisz? (IMG:style_emoticons/default/smile.gif)

Ten post edytował miccom 24.05.2019, 18:51:16
Go to the top of the page
+Quote Post
nigraS
post
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
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ą:

[HTML] pobierz, plaintext 
  1. <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
[HTML] pobierz, plaintext

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
« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 23.08.2025 - 16:57
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn