subrayar menu

[raherlo]

Hola forer@s:

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

[sivadmp]

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

Código Javascript:

$('#accueil').addClass("active");
 

saludos

[kseso?]

Iniciado por sivadmp

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

Código Javascript:

$('#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).

[raherlo]

gracias sivamdp

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

en mi index.php puse:

Código HTML:

<script type="text/javascript" src="js/subrayar.js"></script>
 

y en dicho javascript:

Código Javascript:

$('#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!!!

[mtreik]

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

[raherlo]

este es el css

Código CSS:

/* CSS Document */
body, html{
padding:0px;
margin:0px;
}
#contenedor {
    background: #a5bc61;
    width: 925px;
    margin-left: auto;
    margin-right:auto;
    padding-left:35px;  
    margin-top:0px;
} 
 
#menu{
    float:left;
    width: 175px;
    margin-top: 0px;
    
}
#menu li, #menu ul{
    display:block;
    margin:0px;
    padding:0px;
}
#menu li a {
    margin-left: 18px !important;
    color: #FFF;
    text-decoration:none;
}
#principal{
    margin-left: 238px;
}
#menu li.principal{
    width:172px;
    line-height: 37px;
    background-image:url(/imagenes/fondo_boton1.jpg);
    background-repeat:no-repeat;
    padding: 2px;
    
    
}
#menu ul{
    background: #cbe798;
    margin-top:  5px !important;
    margin-bottom: 5px  !important;
    padding-top:15px !important;
    padding-bottom: 15px !important;
    line-height:20px !important;
}
#menu ul li{
    margin-left: 20px;
}
 
#menu li.principal li {
    background-image:none;
}
#menu li ul a{
    color: #2d498a;
}
#pie {
    clear:both;
    bottom:0px;
    
}
#contenido {
    margin-top: -23px;
    
}
#menu {
    margin-top: 2px;
    
}
#contenido{
    width: 925px;
    margin-left: auto;
    margin-right:auto;
    padding-left:35px;  
}
#principal{
    background: #ecf0d3;
    width: 600px;
    height: 480px;
}
#principal h1 {
    margin-left:18px;
    padding-top: 33px;
    color:#d80a31;
    font-size: 24px;
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
}
#principal .foto {
    margin-left:40px;
    background:#FFFFFF;
    padding:5px;
    display:inline-block;
    
}
#principal .duende {
    width:117px;
    height:214px;
    margin-left:575px;
    background-image:url(/imagenes/duende.gif);
    position:absolute;
}
#principal .cuerpo {
    color:#172444;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;  
    padding: 25px;
    text-align: justify;
}
 

y este es el menu

Código PHP:

<ul id="menu">
    <li class="principal"><a href="index.php">Empresa</a>
        <ul>
            <li><a href="nosotros.php">Sobre nosotros</a></li>
            <li><a href="instalaciones.php">Instalaciones</a></li>
            <li><a href="localizar.php">Localización</a></li>
            <li><a href="contacto.php">Contacto</a></li>
        </ul>
    </li>
    <li class="principal"><a href="servicios.php">Servicios</a></li>
    <li class="principal"><a href="#">Novedades</a></li>    
    <li class="principal"><a href="galeria.php">Galería Fotos</a></li>
 
 </ul>
 

muchas gracias...