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

Posty w temacie
- nigraS   [CSS][HTML]Jak poprawnie nadać klasy do menu?   22.05.2019, 13:22:01
- - miccom   Nadaj konkretnemu menu id lub klasę i przed każdym...   24.05.2019, 18:49:45
- - nigraS   Znalazłem inne podobne menu, ale również i z nim m...   30.05.2019, 15:53:29
- - Neutral   Przepisz część kodu z JQuery na JavaScript lub zał...   30.05.2019, 16:31:15

« 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 · Przełącz na: Linearny+ · Drzewo

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

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