Problema con Menú Spry Vertical

He incluido un menú spry vertical en mi página ( http://www.acuanova.com ), está insertado y configurado en un template y todas las páginas del site están basadas en el.

He podido configurarlo sin problemas, excepto el tema del resaltado de botones cuando una página en concreto está activa, p.e. si me encuentro en la página "Tienda" quiero que el botón correspondiente del menú quede resaltado fijo hasta q cambie a otra página.
Al principio antes de vincular el menú e incluir las páginas de destino, funcionaba sin problema, incluso puedo verlo cuando la págima tarda en cargar, pero en cuanto completa la carga desaparece. Si insisto y dejo pulsado el botón, si aparece (Azul).

¿Alguna sujerencia?

Gracias.

Preguntado hace 1617 dias

0 votos

vextrema

3 mensajes

+ Amigo

Re: Problema con Menú Spry Vertical

Aunque no pones nada de código supongo que tenes algo parecido a esto:


<p class="tumenu">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#" class="current">Recursos</a></li>
<li><a href="#">Foros</a></li>
<li><a href="#">Nosotros</a></li>
</ul></p>


		
  Maximizar 


Seleccionar 
 XML

Y aplicando algo de estilo quedaría algo como esto:


<style type="text/css">
 .tumenu{
 font: bold 13px Arial;
 width: 100%;
 }
 
.tumenu ul{
width: 80%;
border: 1px solid #564c66;
margin: 0;
padding: 0;
float: left;
border-width: 1px 0;
background: black url(img/tuimagen1.gif) center center repeat-x;
}
 
 
.tumenu ul li a{
padding: 5px 11px;
float: left;
color: white;
text-decoration: none;
border-right: 1px solid #564c66;
}
 
.tumenu ul li a:visited{
 color: white;
 }
 
.tumenu ul li a:hover, .tumenu ul li .current{
padding-top: 6px;
color: white !important;
padding-bottom: 4px;
background: black url(img/tuimagen2.gif) center center repeat-x;
}
</style>


		
  Maximizar 


Seleccionar 
 CSS,XML

No hay mucho para comentar mas que cambiar tuimagen1.gif y tuimagen2.gif en estas linea:



background: black url(img/tuimagen1.gif) center center repeat-x;

background: black url(img/tuimagen2.gif) center center repeat-x;

Maximizar

Seleccionar

CSS

donde la imagen que queda cuando presionas es tuimagen2.gif.

Espero te ayude. Saludos.

Desarrollar tu propio codigo es mas gratificante que usar las convinaciones Ctr+C Ctr+V
micodigobeta.com.ar
Seguime en twitter

Respuesto hace 1616 dias

0 votos

wgerez

196 mensajes

+ Amigo

Re: Problema con Menú Spry Vertical

ESTA ES LA HOJA DE ESTILO


@charset "UTF-8";
 
/* SpryMenuBarVertical.css - Revision: Spry Preview Release 1.4 */
 
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
 
/*******************************************************************************
 
 LAYOUT INFORMATION: describes box model, positioning, z-order
 
 *******************************************************************************/
 
/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
ul.MenuBarVertical
{
    margin: 0;
    padding: 0px;
    list-style-type: none;
    font-size: 9pt;
    cursor: default;
    width: 200px;
    font-family: Arial, Helvetica, sans-serif;
    color: #EAEAEA;
    background-color: #FFFFFF;
    height: auto;
    border: thin;
    background-repeat: no-repeat;
    background-position: center center;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
    z-index: 1000;
}
/* Menu item containers, position children relative to this container and are same fixed width as parent */
ul.MenuBarVertical li
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 95%;
    position: relative;
    text-align: left;
    cursor: #FFFFFF;
    width: 200px;
    background-color: #709AA1;
    visibility: visible;
    overflow: visible;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
{
    margin: -5% 0 0 100%;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: absolute;
    z-index: 1020;
    cursor: default;
    width: 150px;
    left: -1000em;
    top: 0;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
{
    left: 0px;
    top: 10px;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
{
    width: 150px;
}
 
/*******************************************************************************
 
 DESIGN INFORMATION: describes color scheme, borders, fonts
 
 *******************************************************************************/
 
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
{
    border-top-width: none;
    border-right-width: none;
    border-bottom-width: none;
    border-left-width: none;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
{
    border: none;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
{
    display: block;
    cursor: inherit;
    background-color: #FFFFFF;
    padding: 4px;
    color: #797979;
    text-decoration: none;
    border: thin solid #eaeaea;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
{
    background-color: #709AA1;
    color: #FFFFFF;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
{
    background-color: #97BF32;
    color: #FFF;
}
 
/*******************************************************************************
 
 SUBMENU INDICATION: styles if there is a submenu under a given menu item
 
 *******************************************************************************/
 
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu
{
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
}
 
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
{
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
}
 
/*******************************************************************************
 
 BROWSER HACKS: the hacks below should not be changed unless you are an expert
 
 *******************************************************************************/
 
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarVertical iframe
{
    position: absolute;
    z-index: 1010;
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
    ul.MenuBarVertical li.MenuBarItemIE
    {
    display: inline;
    f\loat: left;
    background: #FFFFFF;
    }
}

Maximizar

Seleccionar

Y ESTE EL CÓDIGO DEL MENÚ


<ul id="MenuBar1" class="MenuBarVertical">
  <li><a href="../index.html" class="Estilo7"><strong>INICIO</strong></a></li>
  <li><a href="../A_NOSOTROS.html" class="Estilo7"><strong>NOSOTROS</strong></a> </li>
  <div align="left"></div>
  <li><a href="../A_PADI_COMIENZA.html" class="Estilo7 MenuBarItemSubmenu"><strong>CURSOS DE BUCEO PADI</strong></a>
      <ul>
        <li><a href="../A_PADI_COMIENZA.html"><strong>COMIENZA TU AVENTURA</strong></a></li>
        <li><a href="../A_PADI_CONTINUA.html"><strong>CONTINUA TU AVENTURA</strong></a></li>
        <li><a href="../A_PADI_ESPECIALIZATE.html"><strong>ESPECIAL&Iacute;ZATE</strong></a></li>
      </ul>
  </li>
  <li><a href="../A_SDI_COMIENZA.html" class="MenuBarItemSubmenu"><strong>CURSOS DE BUCEO SDI</strong></a>
      <ul>
        <li><a href="../A_SDI_COMIENZA.html"><strong>COMIENZA TU AVENTURA</strong></a></li>
        <li><a href="../A_SDI_CONTINUA.html"><strong>CONTINUA TU AVENTURA</strong></a></li>
        <li><a href="../A_SDI_ESPECIALIZATE.html"><strong>ESPECIAL&Iacute;ZATE</strong></a></li>
      </ul>
  </li>
  <li><a href="../A_KIDS.html"><strong>KIDS CORNER</strong></a> </li>
  <li><a href="../A_PRIMEROS AUXILIOS_EFR.html" class="MenuBarItemSubmenu Estilo7"><strong>PRIMEROS AUXILIOS</strong></a>
      <ul>
        <li class="Estilo41"><a href="../A_PRIMEROS AUXILIOS_EFR.html" class="Estilo7"><strong>EFR</strong></a></li>
        <li class="Estilo7"><a href="../A_PRIMEROS AUXILIOS_DAN.html"><strong>DAN</strong></a> </li>
      </ul>
  </li>
  <li><a href="../A_NIVEL_PRO.html"><strong>NIVEL PROFESIONAL</strong></a> </li>
  <li><a href="../A_TIENDA.html"><strong>TIENDA</strong></a></li>
  <li><a href="../A_VIAJES.html"><strong>VIAJES</strong></a></li>
  <li><a href="../A_CALENDARIO.html"><strong>CALENDARIO</strong></a></li>
  <li><a href="../A_REBREATHER.html"><strong>REBREATHER</strong></a></li>
  <li><a href="../A_TEC_DSAT.html" class="MenuBarItemSubmenu"><strong>BUCEO T&Eacute;CNICO</strong></a>
      <ul>
        <li class="Estilo7"><a href="../A_TEC_DSAT.html"><strong>DSAT</strong></a> </li>
        <li class="Estilo7"><a href="../A_TEC_TDI.html"><strong>TDI</strong></a> </li>
      </ul>
  </li>
  <li><a href="../A_PRECIOS.html"><strong>PRECIOS</strong></a></li>
  <li><a href="../A_GALERIA.html"><strong>GALERIA</strong></a></li>
  <a href="../A_ENLACES.html"><strong><span class="MenuBarVertical Estilo51">ENLACES</span></strong></a>
  <li><a href="http://acuanova.wordpress.com"><strong>BLOG</strong></a></li>
</ul>


		
  Maximizar 


Seleccionar 
 XML

Comentado hace 1612 dias

0 votos

vextrema

3 mensajes

+ Amigo

Re: Problema con Menú Spry Vertical

proba cambiar esto:

ul.MenuBarVertical a:hover, ul.MenuBarVertical a:active

{

    background-color:#709AA1;

    color: #FFFFFF;

}

Maximizar

Seleccionar

CSS

lo que modifique en esta linea es a:focus por a:active probalo y me contas como te fue.

Saludos.

Desarrollar tu propio codigo es mas gratificante que usar las convinaciones Ctr+C Ctr+V
micodigobeta.com.ar
Seguime en twitter

Respuesto hace 1612 dias

0 votos

wgerez

196 mensajes

+ Amigo

Re: Problema con Menú Spry Vertical

En cuanto lo pruebe te cuento.

Gracias!

[d]

Respuesto hace 1611 dias

0 votos

vextrema

3 mensajes

+ Amigo

Nueva pregunta >>

Páginas: 1

Responder

No puedes responder, mensaje cerrado por inactividad