Foros del Web » Creando para Internet » CSS »

subrayar menu

Estas en el tema de subrayar menu en el foro de CSS en Foros del Web. Hola [email protected]: Tengo un menú, con submenus, ¿como puedo hacer para que al pinchar sobre uno de ellos, se subraye el menú, de manera que ...
  #1 (permalink)  
Antiguo 15/03/2011, 15:20
 
Fecha de Ingreso: marzo-2010
Ubicación: España
Mensajes: 25
Antigüedad: 7 años, 8 meses
Puntos: 0
subrayar menu

Hola [email protected]:

Tengo un menú, con submenus, ¿como puedo hacer para que al pinchar sobre uno de ellos, se subraye el menú, de manera que nos indique en que sección estas en cada momento?

¿Se puede hacer con css o hace falta javascript o jquery?

gracias
  #2 (permalink)  
Antiguo 15/03/2011, 15:54
Avatar de sivadmp  
Fecha de Ingreso: febrero-2011
Ubicación: La Paz - Bolivia
Mensajes: 293
Antigüedad: 6 años, 9 meses
Puntos: 20
Respuesta: subrayar menu

tienes que utilizar JavaScript o Jquery para adicionarle un estilo CSS a tu menu, el estilo puede ser activado

Código Javascript:
Ver original
  1. $('#accueil').addClass("active");

saludos
  #3 (permalink)  
Antiguo 15/03/2011, 16:21
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: subrayar menu

Cita:
Iniciado por sivadmp Ver Mensaje
tienes que Puedes utilizar JavaScript o Jquery para adicionarle un estilo CSS a tu menu, el estilo puede ser activado

Código Javascript:
Ver original
  1. $('#accueil').addClass("active");

saludos
Con css también se podría logar, pero para indicarle alguna posible solucción debería facilitar un enlace a su página, y si no es posible, publicar los códigos implicados (html generado y css que aplique).
  #4 (permalink)  
Antiguo 15/03/2011, 16:37
 
Fecha de Ingreso: marzo-2010
Ubicación: España
Mensajes: 25
Antigüedad: 7 años, 8 meses
Puntos: 0
Respuesta: subrayar menu

gracias sivamdp

lo que pasa que ando muy verde con el javascript, a ver.

en mi index.php puse:

Código HTML:
Ver original
  1. <script type="text/javascript" src="js/subrayar.js"></script>

y en dicho javascript:

Código Javascript:
Ver original
  1. $('#principal').addClass("active")
;

Siendo principal, el nombre de la clase, donde englobo las diferentes partes del menu, y con las que trabajo su css, pero no me sale nada,...

No se que hago mal, ah y perdona si la duda es de muy novato, eh!!!
  #5 (permalink)  
Antiguo 15/03/2011, 18:55
Avatar de mtreik  
Fecha de Ingreso: marzo-2011
Ubicación: Yecla (Murcia)
Mensajes: 41
Antigüedad: 6 años, 9 meses
Puntos: 7
Respuesta: subrayar menu

Si pones el código de como tienes implementado el menú te podría indicar la solución utilizando CSS que siempre es mejor que utilizar Javascript para eso.

Con CSS se puede hacer prácticamente todo lo que se nos ocurra, solo hay que encontrar el como
__________________
Marcelo López Santa
------------------------
Diseñador y programador web
www.sixtudio.com
  #6 (permalink)  
Antiguo 16/03/2011, 14:40
 
Fecha de Ingreso: marzo-2010
Ubicación: España
Mensajes: 25
Antigüedad: 7 años, 8 meses
Puntos: 0
Respuesta: subrayar menu

este es el css

Código CSS:
Ver original
  1. /* CSS Document */
  2. body, html{
  3. padding:0px;
  4. margin:0px;
  5. }
  6. #contenedor {
  7.     background: #a5bc61;
  8.     width: 925px;
  9.     margin-left: auto;
  10.     margin-right:auto;
  11.     padding-left:35px; 
  12.     margin-top:0px;
  13. }
  14.  
  15. #menu{
  16.     float:left;
  17.     width: 175px;
  18.     margin-top: 0px;
  19.    
  20. }
  21. #menu li, #menu ul{
  22.     display:block;
  23.     margin:0px;
  24.     padding:0px;
  25. }
  26. #menu li a {
  27.     margin-left: 18px !important;
  28.     color: #FFF;
  29.     text-decoration:none;
  30. }
  31. #principal{
  32.     margin-left: 238px;
  33. }
  34. #menu li.principal{
  35.     width:172px;
  36.     line-height: 37px;
  37.     background-image:url(/imagenes/fondo_boton1.jpg);
  38.     background-repeat:no-repeat;
  39.     padding: 2px;
  40.    
  41.    
  42. }
  43. #menu ul{
  44.     background: #cbe798;
  45.     margin-top:  5px !important;
  46.     margin-bottom: 5px  !important;
  47.     padding-top:15px !important;
  48.     padding-bottom: 15px !important;
  49.     line-height:20px !important;
  50. }
  51. #menu ul li{
  52.     margin-left: 20px;
  53. }
  54.  
  55. #menu li.principal li {
  56.     background-image:none;
  57. }
  58. #menu li ul a{
  59.     color: #2d498a;
  60. }
  61. #pie {
  62.     clear:both;
  63.     bottom:0px;
  64.    
  65. }
  66. #contenido {
  67.     margin-top: -23px;
  68.    
  69. }
  70. #menu {
  71.     margin-top: 2px;
  72.    
  73. }
  74. #contenido{
  75.     width: 925px;
  76.     margin-left: auto;
  77.     margin-right:auto;
  78.     padding-left:35px; 
  79. }
  80. #principal{
  81.     background: #ecf0d3;
  82.     width: 600px;
  83.     height: 480px;
  84. }
  85. #principal h1 {
  86.     margin-left:18px;
  87.     padding-top: 33px;
  88.     color:#d80a31;
  89.     font-size: 24px;
  90.     font-weight: normal;
  91.     font-family: Arial, Helvetica, sans-serif;
  92. }
  93. #principal .foto {
  94.     margin-left:40px;
  95.     background:#FFFFFF;
  96.     padding:5px;
  97.     display:inline-block;
  98.    
  99. }
  100. #principal .duende {
  101.     width:117px;
  102.     height:214px;
  103.     margin-left:575px;
  104.     background-image:url(/imagenes/duende.gif);
  105.     position:absolute;
  106. }
  107. #principal .cuerpo {
  108.     color:#172444;
  109.     font-size: 13px;
  110.     font-family: Arial, Helvetica, sans-serif; 
  111.     padding: 25px;
  112.     text-align: justify;
  113. }


y este es el menu

Código PHP:
Ver original
  1. <ul id="menu">
  2.     <li class="principal"><a href="index.php">Empresa</a>
  3.         <ul>
  4.             <li><a href="nosotros.php">Sobre nosotros</a></li>
  5.             <li><a href="instalaciones.php">Instalaciones</a></li>
  6.             <li><a href="localizar.php">Localización</a></li>
  7.             <li><a href="contacto.php">Contacto</a></li>
  8.         </ul>
  9.     </li>
  10.     <li class="principal"><a href="servicios.php">Servicios</a></li>
  11.     <li class="principal"><a href="#">Novedades</a></li>   
  12.     <li class="principal"><a href="galeria.php">Galería Fotos</a></li>
  13.  
  14.  </ul>

muchas gracias...

Última edición por raherlo; 17/03/2011 a las 17:42

Etiquetas: Ninguno
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




La zona horaria es GMT -6. Ahora son las 12:11.