Drukowana wersja tematu

Kliknij tu, aby zobaczyć temat w orginalnym formacie

Forum PHP.pl _ Przedszkole _ [CSS][HTML]Jak poprawnie nadać klasy do menu?

Napisany przez: nigraS 22.05.2019, 13:22:01

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

Napisany przez: miccom 24.05.2019, 18:49:45

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? smile.gif

Napisany przez: nigraS 30.05.2019, 15:53:29

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?

Napisany przez: Neutral 30.05.2019, 16:31:15

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

[HTML] pobierz, plaintext 
  1. <http://december.com/html/4/element/script.html src="https://code.jquery.com/jquery-3.4.1.min.js"></http://december.com/html/4/element/script.html>
[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.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)