API tools faq
paste
Advertisement
Gxbriel_99

Untitled

Gxbriel_99
Sep 24th, 2024
35
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.06 KB | None | 0 0
raw download clone embed print report
  1. /* menu hamburger */
  2. nav.hamburger-menu {
  3. /* Stile per la label che attiva il menu (hamburger icon) */
  4. .label-controllo {
  5. position: fixed; /* Fissato in una posizione */
  6. top: 20px; /* Distanza dal bordo superiore */
  7. left: 10px; /* Distanza dal bordo sinistro */
  8. width: 30px; /* Larghezza dell'icona */
  9. height: 30px; /* Altezza dell'icona */
  10. cursor: pointer; /* Trasforma il cursore in una mano */
  11. z-index: 300; /* Mantiene l'icona sopra gli altri elementi */
  12.  
  13. /* Stili per le tre linee dell'icona hamburger */
  14. span,
  15. span::before,
  16. span::after {
  17. position: absolute;
  18. top: 10px;
  19. width: 25px; /* Larghezza delle linee */
  20. height: 2px; /* Spessore delle linee */
  21. background-color: darkgoldenrod; /* Colore delle linee */
  22. }
  23.  
  24. /* Linea superiore dell'hamburger */
  25. span::before {
  26. content: ""; /* Pseudo-elemento */
  27. top: -8px; /* Posiziona la linea sopra quella centrale */
  28. }
  29. /* Linea inferiore dell'hamburger */
  30. span::after {
  31. content: ""; /* Pseudo-elemento */
  32. top: 8px; /* Posiziona la linea sotto quella centrale */
  33. }
  34. }
  35. /* Stile per l'icona di chiusura (croce) quando il menu è aperto */
  36. .label-controlloChiuso {
  37. display: none; /* Nasconde l'icona finché il menu non è aperto */
  38. position: fixed;
  39. top: 30px; /* posizione dell'icona */
  40. left: 20px;
  41. width: 30px; /* Larghezza della croce */
  42. height: 30px; /* Altezza della croce */
  43. cursor: pointer;
  44. z-index: 300; /* Mantiene la croce sopra gli altri elementi */
  45.  
  46. /* Stili per la croce */
  47. span,
  48. span::before,
  49. span::after {
  50. position: absolute;
  51. width: 30px; /* Larghezza delle linee */
  52. height: 2px; /* Spessore delle linee */
  53. background-color: darkgoldenrod; /* Colore delle linee */
  54. top: 10px; /* posizione dell'icona */
  55. z-index: 302;
  56. }
  57.  
  58. /* Linea superiore della croce */
  59. span::before {
  60. content: ""; /* Pseudo-elemento */
  61. top: -8px; /* Posiziona la linea sopra quella centrale */
  62. }
  63.  
  64. /* Linea inferiore della croce */
  65. span::after {
  66. content: ""; /* Pseudo-elemento */
  67. top: 8px; /* Posiziona la linea sotto quella centrale */
  68. }
  69. }
  70. /* Stile per il menu che si apre lateralmente */
  71. #menu {
  72. display: block;
  73. position: fixed;
  74. left: -100%; /* Menu nascosto fuori dallo schermo a sinistra */
  75. width: 30%; /* Larghezza del menu */
  76. height: 100vh; /* Occupa tutta l'altezza della finestra */
  77. padding: 80px 0; /* Spaziatura interna */
  78. backdrop-filter: blur(20px);
  79. box-shadow: 6px 1.5px 8.5px 1.5px #4e4d4d;
  80. box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4); /* Ombra per il menu */
  81. transition-duration: 0.25s; /* Transizione dolce quando il menu si apre */
  82. z-index: 202;
  83.  
  84. /* Stile per le voci di menu */
  85. .voci-menu {
  86. display: block;
  87. padding: 12px 24px; /* Spaziatura interna delle voci di menu */
  88. color: black; /* Colore del testo delle voci di menu */
  89. font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  90. font-size: 30px; /* Dimensione del testo */
  91. font-weight: 600; /* Spessore del testo */
  92. text-decoration: none;
  93. transition-duration: 0.25s; /* Transizione dolce per l'hover */
  94. z-index: 202;
  95.  
  96. &:hover {
  97. padding-left: 60px;
  98. color: darkgoldenrod; /* Testo rosso al passaggio del mouse */
  99. z-index: 202;
  100. }
  101. }
  102.  
  103. @media all and (max-width: 426px) {
  104. width: 100%;
  105. z-index: 202;
  106. }
  107. }
  108. /* Effetti quando il menu è attivato tramite il target */
  109. &:target {
  110. /* Nascondi l'icona hamburger quando il menu è aperto */
  111. .label-controllo {
  112. display: none;
  113. }
  114.  
  115. /* Mostra l'icona di chiusura (croce) */
  116. .label-controlloChiuso {
  117. display: block;
  118.  
  119. /* Trasforma l'icona hamburger in una croce */
  120. span {
  121. transform: rotate(45deg); /* Ruota la linea centrale */
  122.  
  123. &::before {
  124. top: 0;
  125. transform: rotate(0deg); /* Mantiene la linea orizzontale */
  126. }
  127.  
  128. &::after {
  129. top: 0;
  130. transform: rotate(90deg); /* Ruota la linea inferiore di 90 gradi */
  131. }
  132. }
  133. }
  134.  
  135. }
  136. /* Porta il menu a sinistra quando è attivato */
  137. #menu {
  138. left: 0 !important;
  139. }
  140. }
  141.  
  142. <header>
  143. <nav class="hamburger-menu" id="hamburger-menu">
  144. <a href="#hamburger-menu" class="label-controllo">
  145. <span></span>
  146. </a>
  147. <a href="#" class="label-controlloChiuso">
  148. <span> </span>
  149. </a>
  150. <ul id="menu">
  151. <li><a href="./index.php#home" class="voci-menu">Home</a></li>
  152. <li><a href="./index.php#about" class="voci-menu">About me</a></li>
  153. <li><a href="./index.php#portfolio" class="voci-menu">Servizi</a></li>
  154. <li><a href="./portfolio.php" class="voci-menu">Portfolio</a></li>
  155. <li><a href="./index.php#contattami" class="voci-menu">Contact Me</a></li>
  156. </ul>
  157. </nav>
  158. </header>
  159. <!-- qui il menu si chiude a scomparsa -->
  160.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!