Foros del Web » Creando para Internet » Diseño web »

menu horizontal

 Estas en el tema de menu horizontal en el foro de Diseño web en Foros del Web. Hola amigos nuevamente, estoy creando un menu personalizado 100% use dreamweaver pero como siempre andan los exploradores dando dolores de cabezas mi problemita es que ...
  #1 (permalink)  
Antiguo 11/12/2012, 10:51
delvisgrlln
Invitado
  
Mensajes: n/a
Puntos:
menu horizontal
Hola amigos nuevamente, estoy creando un menu personalizado 100% use dreamweaver pero como siempre andan los exploradores dando dolores de cabezas mi problemita es que cree una parte desplegable para el menu de usuario pero en firefox no me anda bien aqui les dejo un gif de que hace el menu y por favor si tienen alguno por ahi haganme el favor de pasarmelo. Gracias de ante mano.




Código HTML: 
Ver original
  1. <ul id="MenuBar1" class="MenuBarHorizontal">
  2.   <li <?php if(is_home()){?>id="fmenu-current"<?php } ?>><a class="MenuBarItemSubmenu" href="<?php bloginfo('url'); ?>">Inicio</a></li>
  3.   <li><a href="#">Elemento 2</a></li>
  4.   <?php if ( is_user_logged_in() ) { ?>
  5.   <li style="float:right;height:40px;padding-right:5px;"><?php if ( is_user_logged_in() ) { // Tomamos la información del usuario
  6. global $current_user;
  7.  get_currentuserinfo();
  8.  ?><?php echo get_avatar($current_user->ID, 40); ?><?php } ?><div style="float:right;margin: 11px 0 0 10px;color:#fff;"><strong><?php echo 'Hola ' . $current_user->user_login . "\n";?></strong></div>
  9.     <ul style="margin-top:-4px;width:138px;box-shadow:0 1px 5px 0 #000;border-radius: 0 0 5px 5px; ">
  10.       <li style="background:#CCCCCC;width:138px;text-align:right;"><a href="<?php bloginfo('url'); ?>/wp-admin/profile.php">Perfil</a></li>
  11.       <li style="background:#CCCCCC;width:138px;text-align:right;border-top: 1px solid #e7e7e7;"><a href="<?php bloginfo('url'); ?>/wp-admin/post-new.php">Publicar</a></li>
  12.       <li style="background:#CCCCCC;width:138px;text-align:right;border-top: 1px solid #e7e7e7;border-radius: 0 0 5px 5px;"><a href="<?php echo esc_url( wp_logout_url( $_SERVER['REQUEST_URI'] ) ); ?>">Salir</a></li>
  13.       
  14.    
  15.        </ul>
  16.   </li>
  17.   <?php } ?>
  18.   
  19. </ul>
  20. <script type="text/javascript">
  21. var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
  22. </script>

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 auto;
  17.     padding: 0;
  18.     list-style-type: none;
  19.     font-size: 100%;
  20.     cursor: default;
  21.     width: 850px;
  22.     
  23. }
  24. /* 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 */
  25. ul.MenuBarActive
  26. {
  27.     z-index: 1000;
  28. }
  29. /* Menu item containers, position children relative to this container and are a fixed width */
  30. ul.MenuBarHorizontal li
  31. {
  32.     margin: 0;
  33.     padding: 0;
  34.     list-style-type: none;
  35.     font-size: 100%;
  36.     position: relative;
  37.     text-align: center;
  38.     cursor: pointer;
  39.     float: left;
  40. }
  41. /* 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) */
  42. ul.MenuBarHorizontal ul
  43. {
  44.     margin: 0;
  45.     padding: 0;
  46.     list-style-type: none;
  47.     font-size: 100%;
  48.     z-index: 1020;
  49.     cursor: default;
  50.     width: 8.2em;
  51.     position: absolute;
  52.     left: -1000em;
  53. }
  54. /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
  55. ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
  56. {
  57.     left: auto;
  58. }
  59. /* Menu item containers are same fixed width as parent */
  60. ul.MenuBarHorizontal ul li
  61. {
  62.     width: 8.2em;
  63. }
  64. /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
  65. ul.MenuBarHorizontal ul ul
  66. {
  67.     position: absolute;
  68.     margin: -5% 0 0 95%;
  69. }
  70. /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
  71. ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
  72. {
  73.     left: auto;
  74.     top: 0;
  75. }
  76.  
  77. /*******************************************************************************
  78.  
  79.  DESIGN INFORMATION: describes color scheme, borders, fonts
  80.  
  81.  *******************************************************************************/
  82.  
  83. /* Submenu containers have borders on all sides */
  84. ul.MenuBarHorizontal ul
  85. {
  86.     
  87. }
  88. /* Menu items are a light gray block with padding and no text decoration */
  89. ul.MenuBarHorizontal a
  90. {
  91.     font-size:13px;
  92.     font-weight:bold;
  93.     line-height:18px;
  94.     color:#b0b0b0;
  95.     display: block;
  96.     cursor: pointer;
  97.     padding: 11px;
  98.     text-decoration: none;
  99. }
  100. /* Menu items that have mouse over or focus have a blue background and white text */
  101. ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
  102. {
  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.     color: #FFF;
  110. }
  111.  
  112. /*******************************************************************************
  113.  
  114.  SUBMENU INDICATION: styles if there is a submenu under a given menu item
  115.  
  116.  *******************************************************************************/
  117.  
  118. /* 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%) */
  119. ul.MenuBarHorizontal a.MenuBarItemSubmenu
  120. {
  121.     background-image: url(SpryMenuBarDown.gif);
  122.     background-repeat: no-repeat;
  123.     background-position: 95% 50%;
  124. }
  125. /* 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%) */
  126. ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
  127. {
  128.     background-image: url(SpryMenuBarRight.gif);
  129.     background-repeat: no-repeat;
  130.     background-position: 95% 50%;
  131. }
  132. /* 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%) */
  133. ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
  134. {
  135.     background-image: url(SpryMenuBarDownHover.gif);
  136.     background-repeat: no-repeat;
  137.     background-position: 95% 50%;
  138. }
  139. /* 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%) */
  140. ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
  141. {
  142.     background-image: url(SpryMenuBarRightHover.gif);
  143.     background-repeat: no-repeat;
  144.     background-position: 95% 50%;
  145. }
  146.  
  147. /*******************************************************************************
  148.  
  149.  BROWSER HACKS: the hacks below should not be changed unless you are an expert
  150.  
  151.  *******************************************************************************/
  152.  
  153. /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
  154. ul.MenuBarHorizontal iframe
  155. {
  156.     position: absolute;
  157.     z-index: 1010;
  158.     filter:alpha(opacity:0.1);
  159. }
  160. /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
  161. @media screen, projection
  162. {
  163.     ul.MenuBarHorizontal li.MenuBarItemIE
  164.     {
  165.         display: inline;
  166.         f\loat: left;
  167.         background: #FFF;
  168.     }
  169. }

Etiquetas: css, dreamweaver, horizontal, html, php
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 17:33.