Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] menú responsive marcar activo

 Estas en el tema de menú responsive marcar activo en el foro de CSS en Foros del Web. Hola. Estoy entrando en el mundo de responsive y de menúes fuera de los clásicos. opté por usar un menú en el cual al estar ...
  #1 (permalink)  
Antiguo 09/06/2015, 15:17
 
Fecha de Ingreso: mayo-2014
Mensajes: 64
Antigüedad: 10 años, 7 meses
Puntos: 1
menú responsive marcar activo
Hola.
Estoy entrando en el mundo de responsive y de menúes fuera de los clásicos.
opté por usar un menú en el cual al estar en el home deja abajo una marca. quisiera que al estar en otra sección la dejara donde corresponde y no siempre en el home.
dejo de donde la saqué.
muchas gracias!
https://www.freshdesignweb.com/drop-...s3-jquery.html
  #2 (permalink)  
Antiguo 09/06/2015, 18:41
Avatar de fede5426  
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 446
Antigüedad: 10 años
Puntos: 208
Respuesta: menú responsive marcar activo
Para que la linea de abajo y el color se muevan al menu clickeado, necesitas jquery..

Creas en CSS una clase donde vas a indicar los estilos que va a tener tu menu activo (en mi caso, en el ejemplo, la clase se llama "activo"), despues con jquery haces que cuando se clickee uno de los enlaces del menu, le quite la clase "activo" a todos los enlaces, y se la agregue solo al que clickeaste.

Te dejo un codepen funcionando y el ejemplo del codigo por aca:

http://codepen.io/fede5426/pen/ZGyEBb

Código HTML: 
Ver original
  1. <ul>
  2.     <li><a href="#" class="activo">Home</a></li>
  3.     <li><a href="#">About</a></li>
  4.     <li><a href="#">Services</a></li>
  5.     <li><a href="#">Portfolio</a></li>
  6.     <li><a href="#">Blog</a></li>
  7.     <li><a href="#">Contacto</a></li>
  8. </ul>

Código CSS: 
Ver original
  1. li{
  2.     display:inline-block;
  3.     padding:1em;
  4. }
  5.  
  6. a{
  7.     text-decoration:none;
  8.     color:#161616;
  9.     font-weight:bold;
  10.     padding:1em;
  11. }
  12.  
  13. a:hover{
  14.     color: orange;
  15. }
  16.  
  17. .activo{
  18.     color: orange;
  19.     border-bottom: 3px solid orange;
  20. }

Código Javascript: 
Ver original
  1. $(document).ready(function(){
  2.     
  3.     $("a").click(function(){
  4.         
  5.         $("a").removeClass("activo");
  6.         $(this).addClass("activo")
  7.         
  8.     });
  9.     
  10.     
  11. });

Espero te sirva, si no entendes algo del codigo pregunta sin miedo..

Saludos
  #3 (permalink)  
Antiguo 10/06/2015, 09:03
Avatar de ArturoGallegos
Moderador
  
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 9 meses
Puntos: 1146
Respuesta: menú responsive marcar activo
?¿ es un menú que carga contenido con ajax?

si te va mandar a otra pagina solo debes cambiar la clase que indica que esta activo y colocarlo al nuevo elemento, ni siquiera necesitas javascript.
  #4 (permalink)  
Antiguo 10/06/2015, 11:43
 
Fecha de Ingreso: mayo-2014
Mensajes: 64
Antigüedad: 10 años, 7 meses
Puntos: 1
Respuesta: menú responsive marcar activo
Hola! voy entendiendo más. pero no logro que suceda.
En donde pones un class "activo", tengo "current", supongo que no se puede poner dos class. así que en el javascript cambié activo por current. pero sigue igual.
dejo mi código para ver si me pueden ayudar.
mial gracias!
Código HTML: 
Ver original
  1. <div id="cuadromenu">
  2.         <div id="fdw">
  3.                 <!--nav-->
  4.                     <nav>
  5.                         <ul>
  6.                             <li class="current"><a href="#">Inicio</a></li>
  7.                             <li><a href="#">Libros<span class="arrow"></span></a>
  8.                                 <ul style="display: none;" class="sub_menu">
  9.                                     <li class="arrow_top"></li>
  10.                                     <li><a href="#">Infantil</a></li>
  11.                                     <li><a href="#">Poesía</a></li>
  12.                                     <li><a href="#">Narrativa</a></li>
  13.                                 </ul>
  14.                             </li>
  15.                             <li><a href="#">Reseñas</a></li>
  16.                             <li><a href="#">Contacto</a></li>
  17.                             
  18.                         </ul>
  19.                     </nav>
  20.         </div>
  21. </div>
Código CSS: 
Ver original
  1. body {
  2.   background: black
  3. }
  4. /* Slider
  5. http://www.freshdesignweb.com/drop-down-responsive-menu-with-css3-and-jquery.html
  6. */
  7. @import url(http://fonts.googleapis.com/css?family=Gentium+Basic:400,700|Yanone+Kaffeesatz);
  8. /*===== nav style ======*/
  9. #fdw nav select {
  10.     display:none; /* this is just for the mobile display */
  11. }
  12. #fdw nav ul {
  13.     display:block;
  14.     z-index:999999;
  15. }
  16. #fdw nav ul li {
  17.     display:inline-block;
  18.     padding:50px 3px 30px;
  19.     margin-left:30px;
  20.     position:relative;
  21. }
  22. #fdw nav ul li a:link, #fdw nav ul li a:visited {
  23.     color:#444;
  24.     font:normal 20px 'Yanone Kaffeesatz', sans-serif;
  25.     text-transform:uppercase;
  26.     display:inline-block;
  27.     position:relative;
  28. }
  29. #fdw nav ul li a:hover, #fdw nav ul li a:active {
  30.     color:white;
  31.     text-decoration:none;
  32. }
  33. #fdw nav ul li span {
  34.     position:absolute;
  35.     right:-12px;
  36.     bottom:6px;
  37.     width:7px;
  38.     height:8px;
  39.     margin:0 0 0 3px;
  40.     float:right;
  41.     display:block;
  42.     background:url('images/nav_arrow.png') no-repeat left -8px;
  43.     font:0/0 a;
  44. }
  45. #fdw nav ul li.current {
  46.     border-bottom:2px solid white;
  47. }
  48. #fdw nav ul li.current a {
  49.     color:white;
  50.     cursor: default;
  51. }
  52. #fdw nav ul li.current a span {
  53.     background:url('../images/nav_arrow.png') no-repeat left 0;
  54. }
  55. #fdw nav ul li.current ul li a {
  56.     cursor:pointer;
  57. }
  58.  
  59. /*===== sub_menu Style =======*/
  60. #fdw nav ul li ul.sub_menu {
  61.     position:absolute;
  62.     top:90px;
  63.     left:0;
  64.     margin:0;
  65.     padding:0;
  66.     background:#fff;
  67.     border:1px solid #ececec;
  68.     border-top:5px solid #e25d29;
  69.     display:none;
  70.     z-index:999999;
  71.     -moz-box-shadow: 0px 6px 7px #121012;
  72.     -webkit-box-shadow: 0px 6px 7px #121012;
  73.     box-shadow: 0px 6px 7px #121012;
  74. }
  75. #fdw nav ul li ul.sub_menu li.arrow_top {
  76.     position:absolute;
  77.     top:-12px;
  78.     left:12px;
  79.     width:13px;
  80.     height:8px;
  81.     display:block;
  82.     border:none;
  83.     background:url('images/arrow_top.png') no-repeat left top;
  84. }
  85. #fdw nav ul li ul.sub_menu li {
  86.     float:none;
  87.     margin:0;
  88.     padding:0;
  89.     border-bottom:1px solid #ececec;
  90. }
  91. #fdw nav ul li ul.sub_menu li a {
  92.     white-space: nowrap;
  93.     width: 150px;
  94.     padding:12px;
  95.     font:13px Arial, tahoma, sans-serif;
  96.     text-transform:capitalize;
  97.     color:#777;
  98. }
  99. #fdw nav ul li ul.sub_menu li a:hover {
  100.     background:#f9f9f9;
  101.     color:#333;
  102. }
  103. #fdw nav ul li ul.sub_menu li a.subCurrent {
  104.     color:#e25d29;
  105.     cursor:default;
  106. }
  107. #fdw nav ul li ul.sub_menu li a.subCurrent:hover {
  108.     background:none;
  109. }
  110. /*===================== end Header style ======================*/
  111.  
  112.  
  113. @media only screen and (min-width: 768px) and (max-width: 959px) {
  114.         /* nav */
  115.         #fdw nav ul li{
  116.             margin-left:12px;
  117.         }
  118. }
  119.  
  120.     /* All Mobile Sizes (devices and browser) */
  121. @media only screen and (max-width: 767px) {
  122.  
  123.         /* nav menu ul & select */
  124.         #fdw nav ul {
  125.             display:none;
  126.         }
  127.         #fdw nav select {
  128.             width:100%;
  129.             display:block;
  130.             margin-bottom:30px;
  131.             cursor:pointer;
  132.             padding:6px;
  133.             background:#f9f9f9;
  134.             border:1px solid #e3e3e3;
  135.             color:#777;
  136.         }
  137. }
  138. a{
  139.         text-decoration:none;
  140.         color:#161616;
  141.         font-weight:bold;
  142.         padding:1em;
  143. }
  144.  
  145. a:hover{
  146.         color: orange;
  147. }
  148.  
  149. current{
  150.         color: orange;
  151.         border-bottom: 3px solid orange;
  152. }
Código Javascript: 
Ver original
  1. $(document).ready(function(){
  2.  
  3.         $("a").click(function(){
  4.  
  5.                 $("a").removeClass("current");
  6.                 $(this).addClass("current")
  7.  
  8.         });
  9.  
  10.  
  11. });
  #5 (permalink)  
Antiguo 12/06/2015, 11:04
Avatar de fede5426  
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 446
Antigüedad: 10 años
Puntos: 208
Respuesta: menú responsive marcar activo
No funciona porque el javascript esta dirigido a los enlaces.. donde dice $("a") estas señalando que se le agregue o se le quite la clase a los enlaces.

Tu javascript deberia ser asi:

Código Javascript: 
Ver original
  1. $(document).ready(function(){
  2.  
  3.         $("nav > ul > li").click(function(){
  4.  
  5.                 $("nav > ul > li").removeClass("current");
  6.                 $(this).addClass("current")
  7.  
  8.         });
  9.  
  10.  
  11. });

Acá está con tu código HTML y CSS, pero con el JS que te acabo de pasar:

http://codepen.io/fede5426/pen/zGzyJa
  #6 (permalink)  
Antiguo 19/06/2015, 12:52
 
Fecha de Ingreso: mayo-2014
Mensajes: 64
Antigüedad: 10 años, 7 meses
Puntos: 1
Respuesta: menú responsive marcar activo
Hola. sigo intentando con este menú.
Anda bien tal como dicen ustedes, pero al cambiar el # por el link en href no funciona y aparte no me despliega el menú.
dejo tal como lo tengo en este momento.
espero me puedan ayudar.
gracias
Código HTML: 
Ver original
  1. <!-- SECCION MENU -->     
  2. <div id="cuadromenu">
  3.         <div id="fdw">
  4.                 <!--nav-->
  5.                     <nav>
  6.                         <ul>
  7.                             <li class="current"><a href="#">Inicio</a></li>
  8.                             <li><a href="#">Libros<span class="arrow"></span></a>
  9.                                 <ul style="display: none;" class="sub_menu">
  10.                                     <li class="arrow_top"></li>
  11.                                     <li><a href="infantil.html">Infantil</a></li>
  12.                                     <li><a href="poesia.hrml">Poesía</a></li>
  13.                                     <li><a href="narrativa.html">Narrativa</a></li>
  14.                                 </ul>
  15.                             </li>
  16.                             <li><a href="rese.html">Reseñas</a></li>
  17.                             <li><a href="#">Contacto</a></li>
  18.                             
  19.                         </ul>
  20.                     </nav>
  21.         </div>
  22. </div>
  23. <!-- FIN SECCION MENU -->
Código CSS: 
Ver original
  1. /* Slider
  2. http://www.freshdesignweb.com/drop-down-responsive-menu-with-css3-and-jquery.html
  3. */
  4. @import url(http://fonts.googleapis.com/css?family=Gentium+Basic:400,700|Yanone+Kaffeesatz);
  5. /*===== nav style ======*/
  6. #fdw nav select {
  7.     display:none; /* this is just for the mobile display */
  8. }
  9. #fdw nav ul {
  10.     display:block;
  11.     z-index:999999;
  12. }
  13. #fdw nav ul li {
  14.     display:inline-block;
  15.     padding:50px 3px 30px;
  16.     margin-left:30px;
  17.     position:relative;
  18. }
  19. #fdw nav ul li a:link, #fdw nav ul li a:visited {
  20.     color:#444;
  21.     font:normal 20px 'Yanone Kaffeesatz', sans-serif;
  22.     text-transform:uppercase;
  23.     display:inline-block;
  24.     position:relative;
  25. }
  26. #fdw nav ul li a:hover, #fdw nav ul li a:active {
  27.     color:white;
  28.     text-decoration:none;
  29. }
  30. #fdw nav ul li span {
  31.     position:absolute;
  32.     right:-12px;
  33.     bottom:6px;
  34.     width:7px;
  35.     height:8px;
  36.     margin:0 0 0 3px;
  37.     float:right;
  38.     display:block;
  39.     background:url('images/nav_arrow.png') no-repeat left -8px;
  40.     font:0/0 a;
  41. }
  42. #fdw nav ul li.current {
  43.     border-bottom:2px solid white;
  44. }
  45. #fdw nav ul li.current a {
  46.     color:white;
  47.     cursor: default;
  48. }
  49. #fdw nav ul li.current a span {
  50.     background:url('../images/nav_arrow.png') no-repeat left 0;
  51. }
  52. #fdw nav ul li.current ul li a {
  53.     cursor:pointer;
  54. }
  55.  
  56. /*===== sub_menu Style =======*/
  57. #fdw nav ul li ul.sub_menu {
  58.     position:absolute;
  59.     top:90px;
  60.     left:0;
  61.     margin:0;
  62.     padding:0;
  63.     background:#fff;
  64.     border:1px solid #ececec;
  65.     border-top:5px solid #e25d29;
  66.     display:none;
  67.     z-index:999999;
  68.     -moz-box-shadow: 0px 6px 7px #121012;
  69.     -webkit-box-shadow: 0px 6px 7px #121012;
  70.     box-shadow: 0px 6px 7px #121012;
  71. }
  72. #fdw nav ul li ul.sub_menu li.arrow_top {
  73.     position:absolute;
  74.     top:-12px;
  75.     left:12px;
  76.     width:13px;
  77.     height:8px;
  78.     display:block;
  79.     border:none;
  80.     background:url('images/arrow_top.png') no-repeat left top;
  81. }
  82. #fdw nav ul li ul.sub_menu li {
  83.     float:none;
  84.     margin:0;
  85.     padding:0;
  86.     border-bottom:1px solid #ececec;
  87. }
  88. #fdw nav ul li ul.sub_menu li a {
  89.     white-space: nowrap;
  90.     width: 150px;
  91.     padding:12px;
  92.     font:13px Arial, tahoma, sans-serif;
  93.     text-transform:capitalize;
  94.     color:#777;
  95. }
  96. #fdw nav ul li ul.sub_menu li a:hover {
  97.     background:#f9f9f9;
  98.     color:#333;
  99. }
  100. #fdw nav ul li ul.sub_menu li a.subCurrent {
  101.     color:#e25d29;
  102.     cursor:default;
  103. }
  104. #fdw nav ul li ul.sub_menu li a.subCurrent:hover {
  105.     background:none;
  106. }
  107. /*===================== end Header style ======================*/
  108.  
  109.  
  110. @media only screen and (min-width: 768px) and (max-width: 959px) {
  111.         /* nav */
  112.         #fdw nav ul li{
  113.             margin-left:12px;
  114.         }
  115. }
  116.  
  117.     /* All Mobile Sizes (devices and browser) */
  118. @media only screen and (max-width: 767px) {
  119.  
  120.         /* nav menu ul & select */
  121.         #fdw nav ul {
  122.             display:none;
  123.         }
  124.         #fdw nav select {
  125.             width:100%;
  126.             display:block;
  127.             margin-bottom:30px;
  128.             cursor:pointer;
  129.             padding:6px;
  130.             background:#f9f9f9;
  131.             border:1px solid #e3e3e3;
  132.             color:#777;
  133.         }
  134. }
Código Javascript: 
Ver original
  1. <!--  javaScript -->
  2.  
  3.     <script> 
  4.  
  5.     <!--  // building select nav for mobile width only -->
  6.     $(function(){
  7.         // building select menu
  8.         $('<select />').appendTo('nav');
  9.      
  10.  
  11.         // building an option for select menu
  12.         $('<option />', {
  13.             'selected': 'selected',
  14.             'value' : '',
  15.             'text': 'Contenido...'
  16.         }).appendTo('nav select');
  17.      
  18.  
  19.         $('nav ul li a').each(function(){
  20.             var target = $(this);
  21.      
  22.  
  23.             $('<option />', {
  24.                 'value' : target.attr('href'),
  25.                 'text': target.text()
  26.             }).appendTo('nav select');
  27.  
  28.  
  29.  
  30.         });
  31.  
  32.      
  33.         // on clicking on link
  34.         $('nav select').on('change',function(){
  35.             window.location = $(this).find('option:selected').val();
  36.         });
  37.     });
  38.     // show and hide sub menu
  39.     $(function(){
  40.         $('nav ul li').hover(
  41.             function () {
  42.                 //show its submenu
  43.                 $('ul', this).slideDown(150);
  44.             },
  45.             function () {
  46.                 //hide its submenu
  47.                 $('ul', this).slideUp(150);        
  48.             }
  49.         );
  50.     });
  51.     //end
  52.     </script>
  #7 (permalink)  
Antiguo 20/06/2015, 11:36
 
Fecha de Ingreso: mayo-2014
Mensajes: 64
Antigüedad: 10 años, 7 meses
Puntos: 1
Respuesta: menú responsive marcar activo
Hola.
Bueno al final era simple.
hay que poner el class="current" en el <li> a cambiar, o sea que en cada página hay que hacerlo manualmente, yo suponía que se hacía automáticamente.
Doy como solucionado.
mil gracias por su tiempo!

Etiquetas: activo, html, marcar, responsive
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 19:22.