Ver Mensaje Individual
  #2 (permalink)  
Antiguo 24/01/2017, 15:30
Avatar de emilio_viguri
emilio_viguri
 
Fecha de Ingreso: junio-2011
Ubicación: Mexico
Mensajes: 116
Antigüedad: 12 años, 10 meses
Puntos: 3
Pregunta Respuesta: spry barra menu pagina activa

Disculpa ando en lo mismo pero pues como que les falta ver el código, para que sepan de lo que hablamos este es el menu básico.

Yo cree una nueva clase que pues la mando a llamar para ponerla en mi código cuando esta activo, pero pues no logro saber que esta mal mi clase es esta, también menciono que mi entendimiento de CSS es limitado no se donde se tiene que poner algo en las ramificaciones esta mal pero no se que sea.

Código CSS:
Ver original
  1. /* ACTIVAR MENU CON UNA CLASE PARA PONER CUANDO LE DES CLIC */
  2. ul.MenBarHorizontal.ActivaMenu{
  3.     background-color: #33C;
  4.     color: #FFF;
  5. }
Codigo CSS que te da herramientas spry dreamweaver
Código CSS:
Ver original
  1. Submenu containers have borders on all sides */
  2. ul.MenuBarHorizontal ul
  3. {
  4.     border: 1px solid #CCC;
  5. }
  6. /* ACTIVAR MENU CON UNA CLASE PARA PONER CUANDO LE DES CLIC */
  7. ul.MenBarHorizontal.ActivaMenu{
  8.     background-color: #33C;
  9.     color: #FFF;
  10. }
  11.  
  12.  
  13. /* Menu items are a light gray block with padding and no text decoration */
  14. ul.MenuBarHorizontal a
  15. {
  16.     display: block;
  17.     cursor: pointer;
  18.     background-color: #EEE;
  19.     padding: 0.5em 0.75em;
  20.     color: #333;
  21.     text-decoration: none;
  22. }
  23. /* Menu items that have mouse over or focus have a blue background and white text */
  24. ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
  25. {
  26.     background-color: #33C;
  27.     color: #FFF;
  28. }
  29. /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
  30. ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
  31. {
  32.     background-color: #33C;
  33.     color: #FFF;
  34. }
  35.  
  36. /*******************************************************************************
  37.  
  38.  SUBMENU INDICATION: styles if there is a submenu under a given menu item
  39.  
  40.  *******************************************************************************/
  41.  
  42. /* 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%) */
  43. ul.MenuBarHorizontal a.MenuBarItemSubmenu
  44. {
  45.     background-image: url(SpryMenuBarDown.gif);
  46.     background-repeat: no-repeat;
  47.     background-position: 95% 50%;
  48. }
  49. /* 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%) */
  50. ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
  51. {
  52.     background-image: url(SpryMenuBarRight.gif);
  53.     background-repeat: no-repeat;
  54.     background-position: 95% 50%;
  55. }
  56. /* 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%) */
  57. ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
  58. {
  59.     background-image: url(SpryMenuBarDownHover.gif);
  60.     background-repeat: no-repeat;
  61.     background-position: 95% 50%;
  62. }
  63. /* 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%) */
  64. ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
  65. {
  66.     background-image: url(SpryMenuBarRightHover.gif);
  67.     background-repeat: no-repeat;
  68.     background-position: 95% 50%;
  69. }
  70.  
  71. /*******************************************************************************
  72.  
  73.  BROWSER HACKS: the hacks below should not be changed unless you are an expert
  74.  
  75.  *******************************************************************************/
  76.  
  77. /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
  78. ul.MenuBarHorizontal iframe
  79. {
  80.     position: absolute;
  81.     z-index: 1010;
  82.     filter:alpha(opacity:0.1);
  83. }
  84. /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
  85. @media screen, projection
  86. {
  87.     ul.MenuBarHorizontal li.MenuBarItemIE
  88.     {
  89.         display: inline;
  90.         f\loat: left;
  91.         background: #FFF;
  92.     }
  93. }

Este seria mi menu que pues le puse varias opciones a ver donde lo logro activar

Código HTML:
Ver original
  1. <ul id="MenuBar1" class="MenuBarHorizontal">
  2.       <li class="ActivaMenu"><a href="antecedentes.php >Antecedente</a></li>
  3.       <li><a href="antecedentes.php" class="ActivaMenu" >Antecedente</a></li>
  4.       <li><a href="antecedentes.php">Antecedente</a></li>
  5. </ul>

1. lo pongo en el li
2. lo pongo en el a href
3. no pongo nada para ver la diferencia

Como ven ?