Ver Mensaje Individual
  #4 (permalink)  
Antiguo 10/06/2015, 11:43
fersosa
 
Fecha de Ingreso: mayo-2014
Mensajes: 64
Antigüedad: 10 años
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. });