Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1807 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Menu déroulant responsive

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Menu déroulant responsive

n°2403986
theo92
Posté le 16-12-2021 à 14:18:44  profilanswer
 

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. }

mood
Publicité
Posté le 16-12-2021 à 14:18:44  profilanswer
 

n°2403987
mechkurt
Posté le 16-12-2021 à 14:34:17  profilanswer
 

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
n°2403990
theo92
Posté le 16-12-2021 à 15:08:40  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Menu déroulant responsive

 

Sujets relatifs
responsive scroll pas quand je glisse l'image[PYTHON] revenir "menu principal"
Soucis avec un menu HTML et JS.besoin d'aide sur blogger et menu deroulant a plusieurs niveaux
Ombre portée sur menu déroulantMenu en MVVM C#
Menu css décentré à gaucherevenier au 1 er onglet des sous menu et sousmenu
Plus de sujets relatifs à : Menu déroulant responsive

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.093 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR