poner efecto css a enlace que se está visitando

crashbashIV · #1 (**permalink**) 15/08/2012, 20:22

Hola expertos en programación, estoy ponchado en lo siguiente, necesito que aparezca la barra roja de los items del menú solo en el item qué se está visitando, les dejo la página pata que me ayuden más rapido xD

[URL="http://aja.netai.net/innova/"]http://aja.netai.net/innova/[/URL]

esta es la hoja:

Cita:

#nav>li>a{
display: block;
overflow: hidden;
padding: 5px 10px 0px 10px;
color: #8e1713;
background: rgba(0,0,0,.0);

text-shadow: 0 -1px rgba(0, 0, 0, 0.5);

-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}

#nav>li>a:hover,

#nav>li.current_page_item>a{
background: #303232;
background: #ffffff;
border-bottom: solid #8b1612 5px;
}

#nav>li.current-menu-item>a,
#nav>li.current_page_item>a{
color: #8e1713;
}

#nav>li>a>.subheader{
color: #666666;
display: block;
font-size: 11px;
margin-top: -8px;
font-weight: lighter;
}

Este es el HTML

Cita:

<nav>
<ul id="nav" class="sf-menu">
<li class="current-menu-item"><a href="index.html">Iniciobienvenido</a></li>
<li><a href="nosotros.html">Nosotrosunidad</a></li>
<li><a href="blog.html">Blogartículos</a>

</li>
<li><a href="media.html">Mediacomparte</a></li>
<li><a href="contacto.html">Contactocomunica</a></li>

</ul>
</nav>

jomaruro · #2 (**permalink**) 17/08/2012, 07:16

Hola:

Por ejemplo, sería:

Código HTML:

Ver original<body>
    <ul id="menu">
            <li class="inicio"><a href="inicio.html">Inicio</a></li>
            <li class="contacto"><a href="inicio.html">contacto</a></li>
            <li class="historia"><a href="inicio.html">historia</a></li>
            <li class="productos"><a href="inicio.html">productos</a></li>
         </ul>
...
</body>

Actuando sobre la etiqueta body.

Deberá asignar en cada html su id a esa etiqueta:

en "inicio.html" quedaría: <body id="inicio">
en "contacto.html" sería: <body id="contacto">
y así sucesivamente.

Y ahora en el css debería crear la regla correspondiente:

Código CSS:

Ver original#inicio ul#menu li.inicio,
      #contacto ul#menu li.contacto,
      #historia ul#menu li.historia,
      #productos ul#menu li.productos
      {/*propiedad:valor;*/}

Saludos.

crashbashIV · #3 (**permalink**) 18/08/2012, 13:22

Mil gracias ya lo solucioné

xD