Ver Mensaje Individual
  #12 (permalink)  
Antiguo 13/06/2009, 14:44
Avatar de juaniquillo
juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 19 años, 3 meses
Puntos: 281
Respuesta: Cambiar Piel de Spry Nav

Hola de nuevo. Por fin he vuelto (después de bastante tiempo) a terminar este tutorial.

Para que el hover de los enlaces principales pones la imagen de fondo en el estado hover:

Código css:
Ver original
  1. ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
  2. {
  3.     background:url(imag/botonon.png);
  4.     color:#000
  5. }

Lo próximo sería especificar que los enlaces dentro de las segunda listas tengan un color azul y que el hover sea amarillo. Aprovechas y pones 'reseteas' la altura de los enlaces y le das un padding. En este caso yo le he dado 5px. Para eso necesitas crear dos nuevas reglas:

Código css:
Ver original
  1. ul.MenuBarHorizontal ul li a{
  2.     background:#3A4F6C;
  3.     height: auto;
  4.     padding:5px;
  5. }
  6. ul.MenuBarHorizontal ul li a:hover{
  7.     background:#F9D50D;
  8. }

y lo unico que faltaría sería centrar las letras de los enlaces. Para eso lo único que se me ocurre es agregar unos spans dentro de los enlaces principales:


By juaniquillo

y entonces agregas otra regla nueva donde le das display block al span, lo pones horizontal y le das padding-top para centrarlo verticalmente:

Código css:
Ver original
  1. ul.MenuBarHorizontal a span{
  2.     display:block;
  3.     text-align:center;
  4.     padding-top:8px;
  5. }

Este es el resultado final:


By juaniquillo


Aquí dejo el código css completo:

Código css:
Ver original
  1. @charset "UTF-8";
  2.  
  3. /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
  4.  
  5. /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
  6.  
  7. /*******************************************************************************
  8.  
  9.  LAYOUT INFORMATION: describes box model, positioning, z-order
  10.  
  11.  *******************************************************************************/
  12.  
  13. /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
  14. ul.MenuBarHorizontal
  15. {
  16.     margin: 0;
  17.     padding: 0;
  18.     list-style-type: none;
  19.     font-size: 100%;
  20.     cursor: default;
  21.     width: auto;
  22. }
  23. /* 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 */
  24. ul.MenuBarActive
  25. {
  26.     z-index: 1000;
  27. }
  28. /* Menu item containers, position children relative to this container and are a fixed width */
  29. ul.MenuBarHorizontal li
  30. {
  31.     margin: 0;
  32.     padding: 0;
  33.     list-style-type: none;
  34.     font-size: 100%;
  35.     position: relative;
  36.     text-align: left;
  37.     cursor: pointer;
  38.     float: left;
  39. }
  40. /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
  41. ul.MenuBarHorizontal ul
  42. {
  43.     margin: 0;
  44.     padding: 0;
  45.     list-style-type: none;
  46.     font-size: 100%;
  47.     z-index: 1020;
  48.     cursor: default;
  49.     position: absolute;
  50.     left: -1000em;
  51. }
  52. /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
  53. ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
  54. {
  55.     left: auto;
  56. }
  57. /* Menu item containers are same fixed width as parent */
  58. ul.MenuBarHorizontal ul li
  59. {
  60.     width: 8.2em;
  61. }
  62. /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
  63. ul.MenuBarHorizontal ul ul
  64. {
  65.     position: absolute;
  66.     margin: -5% 0 0 95%;
  67. }
  68. /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
  69. ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
  70. {
  71.     left: auto;
  72.     top: 0;
  73. }
  74.  
  75. /*******************************************************************************
  76.  
  77.  DESIGN INFORMATION: describes color scheme, borders, fonts
  78.  
  79.  *******************************************************************************/
  80.  
  81. /* Submenu containers have borders on all sides */
  82. ul.MenuBarHorizontal ul
  83. {
  84.     border: 1px solid #CCC;
  85. }
  86. /* Menu items are a light gray block with padding and no text decoration */
  87. ul.MenuBarHorizontal a
  88. {
  89.     display: block;
  90.     cursor: pointer;
  91.     color: #FFF;
  92.     text-decoration: none;
  93.     background: url(imag/botonoff.png);
  94.     height: 45px;
  95.     width: 136px;
  96. }
  97. ul.MenuBarItemSubmenu a{
  98.     background: #3A4F6C;
  99. }
  100.  
  101. /* Menu items that have mouse over or focus have a blue background and white text */
  102. ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
  103. {
  104.     color: #FFF;
  105. }
  106. /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
  107. ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
  108. {
  109.     background:url(imag/botonon.png);
  110.     color:#000
  111. }
  112. ul.MenuBarHorizontal a span{
  113.     display:block;
  114.     text-align:center;
  115.     padding-top:8px;
  116. }
  117.  
  118. ul.MenuBarHorizontal ul li a{
  119.     background:#3A4F6C;
  120.     height: auto;
  121.     padding:5px;
  122. }
  123. ul.MenuBarHorizontal ul li a:hover{
  124.     background:#F9D50D;
  125. }
  126.  
  127. /*******************************************************************************
  128.  
  129.  BROWSER HACKS: the hacks below should not be changed unless you are an expert
  130.  
  131.  *******************************************************************************/
  132.  
  133. /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
  134. ul.MenuBarHorizontal iframe
  135. {
  136.     position: absolute;
  137.     z-index: 1010;
  138.     filter:alpha(opacity:0.1);
  139. }
  140. /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
  141. @media screen, projection
  142. {
  143.     ul.MenuBarHorizontal li.MenuBarItemIE
  144.     {
  145.         display: inline;
  146.         f\loat: left;
  147.         background: #FFF;
  148.     }
  149. }


Espero que te haya servido. Saludos.
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...