Menu déroulant responsive

Menu déroulant responsive - HTML/CSS - Programmation

Marsh Posté le 16-12-2021 à 14:18:44    

Bonjour,
J'ai trouvé un exemple de menu déroulant responsive qui me convient.
J'essaie toutefois de l'aménager de façon que les sous-menus apparaissent au survol de la souris (j'ai trouvé comment faire avec le :hover)
Ce que je ne comprends pas c'est pourquoi je ne peux accéder au sous-menu, il ne reste pas affiché...
J'essaie de trouver l'instruction qui me me permettrait de laisser le sous menu affiché mais je suis loin d'être à l'aise avec le css, alors je vous remercie d'avance pour vos conseils
Le code du menu :

Code :
  1. <nav class="nav">
  2.   <input class="chk-nav" type="checkbox" id="btn-navbar" />
  3.   <label for="btn-navbar"><i class="fa fa-bars"></i></label>
  4.  
  5.   <ul class="navbar">
  6.     <li><a href="#"><i class="fa fa-home"></i>Inicio</a></li>
  7.     <li>
  8.         <label class="lbl-nav" for="btn-subnav1">
  9.           <i class="fa fa-user"></i>Cursos
  10.         </label>
  11.         <input class="chk-nav" type="checkbox" id="btn-subnav1"/>
  12.      
  13.         <ul class="sub-nav">
  14.           <li><a href="#">Excel básico</a></li>
  15.           <li><a href="#">Diseño web</a></li>
  16.           <li><a href="#">Computación básica</a></li>
  17.           <li><a href="#">Fundamentos de programación</a></li>
  18.         </ul>
  19.              
  20.     </li>
  21.     <li>
  22.         <label class="lbl-nav" for="btn-subnav2">
  23.              <i class="fa fa-info-circle"></i>Nosotros
  24.         </label>
  25.         <input class="chk-nav" type="checkbox" id="btn-subnav2" />
  26.        
  27.         <ul class="sub-nav">
  28.             <li><a href="#una">Historia</a></li>
  29.             <li><a href="#">Servicios</a></li>
  30.         </ul>
  31.     </li>
  32.     <li><a href="#"><i class="fa fa-envelope"></i>Contáctenos</a></li>
  33.   </ul>
  34.  
  35. </nav>


Voici le code CSS

Code :
  1. /*_________________________________________________________________
  2.  
  3.        $VARIBLES PARA COLORES  
  4. ____________________________________________________________________*/
  5. body {
  6.   font-family: 'Lato', sans-serif;
  7.   font-size: 100%;
  8.   background-color: #151515;
  9. }
  11. /*_________________________________________________________________
  12.  
  13.        $RESET
  14. ____________________________________________________________________*/
  15. *, *:before, *:after {
  16.   margin: 0;
  17.   padding: 0;
  18.   box-sizing: border-box;
  19. }
  21. /*_________________________________________________________________
  22.  
  23.        $ESTILOS GENERALES  
  24. ____________________________________________________________________*/
  25. ul {
  26.   list-style-type: none;
  27. }
  29. a, label {
  30.   display: block;
  31.   font-size: 1.25rem;
  32.   text-decoration: none;
  33.   color: #E5E5E5;
  34.   padding: 1rem 1rem 1rem 3rem;
  35.   cursor: pointer;
  36.   transition: all .3s ease;
  37.   border-left: 4px solid rgba(255, 255, 255, 0);
  38. }
  39. a:hover, label:hover {
  40.   color: #FFB503;
  41.   border-left: 4px solid #ffbc1d;
  42. }
  44. .chk-nav {
  45.   display: none;
  46. }
  48. /*_________________________________________________________________
  49.  
  50.        $NAV <nav class"nav"></nav>
  51. ____________________________________________________________________*/
  52. .nav {
  53.   width: 100%;
  54.   position: fixed;
  55.   z-index: 10;
  56. }
  58. /*_________________________________________________________________
  59.  
  60.        $NAVBAR <ul class"nav-bar"></ul>  
  61. ____________________________________________________________________*/
  62. .navbar {
  63.   width: 50%;
  64. }
  65. .navbar .sub-nav {
  66.   display: block;
  67. }
  69. .sub-nav a {
  70.   padding-left: 2rem;
  71.   font-size: 1rem;
  72. }
  74. .navbar > li {
  75.   border-top: 1px solid rgba(255, 255, 255, 0.2);
  76.   position: relative;
  77. }
  79. /*_________________________________________________________________
  80.  
  81. $ESTILOS PARA MODIFICAR EL LABEL SECUNDARIO DEL SUBMENU
  82. ____________________________________________________________________*/
  83. .navbar .fa {
  84.   position: absolute;
  85.   left: 1rem;
  86. }
  88. .lbl-nav:after {
  89.   content: "\25BC";
  90.   font-size: 1rem;
  91.   position: absolute;
  92.   width: 100%;
  93.   text-align: right;
  94.   left: 0;
  95.   padding-right: .75rem;
  96.   line-height: 1.5rem;
  97. }
  99. /*_________________________________________________________________
  100.  
  101. $ESTILOS PARA MODIFICAR EL LABEL PRINCIPAL O ICONO DE HAMBURGUESA
  102. ____________________________________________________________________*/
  103. label[for="btn-navbar"] {
  104.   padding: .5rem 1rem .5rem 1rem;
  105.   font-size: 2rem;
  106.   text-align: left;
  107.   color: #E5E5E5;
  108.   background-color: #252525;
  109. }
  110. label[for="btn-navbar"]:hover {
  111.   color: #E5E5E5;
  112.   border-left: 4px solid rgba(0, 0, 0, 0);
  113. }
  115. /*_________________________________________________________________
  116.  
  117. $ESTILOS PARA ESCONDER LA LISTA PRINCIPAL DEL MENU
  118. ____________________________________________________________________*/
  119. .navbar {
  120.   margin-left: -100%;
  121.   height: 100vh;
  122.   transition: all .5s ease;
  123.   background-color: #252525;
  124. }
  126. .chk-nav:checked ~ .navbar {
  127.   margin-left: 0;
  128. }
  130. /*_________________________________________________________________
  131.  
  132. $ESTILOS PARA ESCONDER LOS SUBMENUS  
  133. ____________________________________________________________________*/
  134. .navbar .sub-nav {
  135.   display: none;
  136. }
  138. .chk-nav:checked ~ .sub-nav {
  139.   display: block;
  140. }
  142. /*_________________________________________________________________
  143.  
  144.         $ESTILOS PARA DESKTOP MEDIAQUERYS
  145. ____________________________________________________________________**/
  146. @media all and (min-width: 48rem) {
  147.   a, label {
  148.  display: block;
  149.  padding: 1rem 1.25rem;
  150.  border-right: 1px solid rgba(255, 255, 255, 0.2);
  151.   }
  153. /*_________________________________________________________________
  154.  
  155.    $ESTILOS PARA NAVBAR  
  156. ____________________________________________________________________*/
  157.   .navbar {
  158.  max-width: 1200px;
  159.  width: 100%;
  160.  height: auto;
  161.  display: table;
  162.  table-layout: fixed;
  163.  margin: auto;
  164.   }
  166.   .navbar > li {
  167.  display: table-cell;
  168.   }
  170.   .chk-nav:checked ~ .navbar {
  171.  margin: auto;
  172.   }
  174. /*_________________________________________________________________
  175.  
  176.    $ESTILOS PARA ESCONDER EL ICONO DE HAMBURGUESA
  177. ____________________________________________________________________*/
  178.   label[for="btn-navbar"] {
  179.  display: none;
  180.   }
  182. /*_________________________________________________________________
  183.  
  184.     $ESTILOS PARA el SUBMENU  
  185. ____________________________________________________________________*/
  187.   .navbar .sub-nav {
  188.  display: none;
  189.   }
  191.   .navbar > ul > li {
  192.  postion: relative;
  193.   }
  195.   .chk-nav:checked ~ .sub-nav {
  196.  display: block;
  197.   }
  198. /**/
  199.   .navbar > li > a:hover, label:hover ~ .sub-nav {
  200.    display: block;
  201.   }
  202.  
  203. /**/
  204.   .navbar .sub-nav {
  205.  width: 100%;
  206.  background-color: #222;
  207.  position: absolute;
  208.   }
  210.   .sub-nav a {
  211.  font-size: 1rem;
  212.  border-top: 1px solid rgba(255, 255, 255, 0.2);
  213.   }
  215. /*_________________________________________________________________
  216.  
  217.       $ESTILOS PARA LOS ICONOS
  218. ____________________________________________________________________*/
  219.   .navbar .fa {
  220.  position: static;
  221.  padding-right: .3rem;
  222.   }
  224.   .lbl-nav:after {
  225.  top: 0;
  226.  height: 100%;
  227.  line-height: 3.5rem;
  228.   }
  230. /*_________________________________________________________________
  231.  
  232.       $ESTILOS PARA EL MENU PRINCIPAL
  233. ____________________________________________________________________*/
  234.   .navbar > li {
  235.  position: relative;
  236.  border-top: 4px solid #FFB503;
  237.   }
  239.   .navbar > li > a:hover, label:hover {
  240.  border-left: 4px solid rgba(0, 0, 0, 0);
  241.   }
  243. }
  244. /*_________________________________________________________________
  245.  
  246.   $ESTILOS PARA EL SECTION  ESTO NO TIENE NADA QUE VER CON EL MENU
  247. ____________________________________________________________________*/
  248. section {
  249.   width: 90%;
  250.   padding: 3.5rem;
  251.   margin: auto;
  252.   color: #E5E5E5;
  253.   text-align: center;
  254.   transition: all .4s ease;
  255. }
  256. section small {
  257.   display: block;
  258.   padding-bottom: 1rem;
  259.   font-size: 1rem;
  260. }
  261. section span {
  262.   color: red;
  263.   font-size: 1.5rem;
  264. }

Reply

Marsh Posté le 16-12-2021 à 14:18:44   

Reply

Marsh Posté le 16-12-2021 à 14:34:17    

Dans cette technique de menu déroulant, ils ont fait le choix du full css (sans javascript) avec l'usage d'un label, d'un input checkbox hidden et de la règle suivante :

Code :
  1. .chk-nav:checked ~ .sub-nav {
  2. display: block;
  3.   }


C'est de plus en plus fréquent puisque les navigateurs sont de plus en plus souvent en mode tactile et que dans ce cas le survol de souris n'a pas de sens.
 
Dans le cas de ce menu, pas de clic, pas de dépliage mais tu dois pouvoir faire un règle genre :

Code :
  1. ul.navbar > li:hover ul.sub-nav {
  2. display: block;
  3.   }


 
Par contre ça fonctionnera pas sur les (très) vieux navigateur, il fut un temps ou :hover ne fonctionnait que sur les balises a...


---------------
D3
Reply

Marsh Posté le 16-12-2021 à 15:08:40    

Bonjour,
Merci pour ton conseil, le bout de code fonctionne !

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed