Volver al Foro de Diseño de páginas Web

HTML Menu Rollover

  • brittagyrl
  • Novice
  • Novice
  • Avatar de Usuario
  • Registrado: Nov 21, 2008
  • Mensajes: 32
  • Loc: Ogden, Utah
  • Status: Offline

Nota Diciembre 15th, 2008, 12:13 pm

Hola,

Mi equipo de sistemas en la biblioteca seguir teniendo problemas en IE con nuestro HTML Menu. Las fichas están saliendo bien y donde se supone que, sin embargo, cuando usted va a rodar el MOUE abajo, las fichas desaparecen.

Alguien tiene alguna idea de cómo podríamos solucionar este problema? Si lo hace, yo estaría eternamente agradecido. Esta página ha sido un dolor de cabeza:

http://library.weber.edu/

Gracias,

Britt
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Diciembre 15th, 2008, 12:13 pm

  • prateekshawebdesign
  • Newbie
  • Newbie
  • No Avatar
  • Registrado: Nov 26, 2008
  • Mensajes: 10
  • Loc: India
  • Status: Offline

Nota Diciembre 17th, 2008, 11:47 am

funciona bien en IE 8...
  • graphixboy
  • Control + Z
  • Mastermind
  • Avatar de Usuario
  • Registrado: Jul 11, 2005
  • Mensajes: 1828
  • Loc: In the Great White North
  • Status: Offline

Nota Diciembre 17th, 2008, 12:20 pm

Bueno después de mirar en la página de Im un poco confuso por qué funciona en Firefox, pero heres el problema. Su usando el enlace <a> para crear el vuelco y no hay clases asociadas con los elementos individuales de modo que no puede apuntar sólo uno (de su hacer la misma acción para cada <a> </ a> en el menú lateral y el menú principal ). Así que, básicamente, si se puede mover el ratón lo suficientemente rápido como se puede llegar a otro, un antes de que el menú se cierra.

Así que la solución es utilizar el <li> como el disparador hover. Desde el submenú está dentro de la <li> podrás permanecer en un estado oscilaba incluso si el ratón está sobre los elementos del submenú.

Ejemplo de HTML (observe el uso de clases adicionales como ganchos)
Código: [ Select ]
<ul class="mainMenu">
    <li class="mainMenuItem">
        <a>Main Item Name 1</a>
        <!-- Sub menu for item 1 -->
        <ul class="subMenu">
            <li class="subMenuItem"><a>Sub Menu Link</a></li>
            <li class="subMenuItem"><a>Sub Menu Link</a></li>
            <li class="subMenuItem"><a>Sub Menu Link</a></li>
            <li class="subMenuItem"><a>Sub Menu Link</a></li>
        </ul>
    </li>
    <li class="mainMenuItem">
        <a>Main Item Name 2</a>
        <!-- Sub menu for item 2 -->
        <ul class="subMenu">
            <li class="subMenuItem"><a>Sub Menu Link</a></li>
            <li class="subMenuItem"><a>Sub Menu Link</a></li>
            <li class="subMenuItem"><a>Sub Menu Link</a></li>
            <li class="subMenuItem"><a>Sub Menu Link</a></li>
        </ul>
    </li>
</ul>
  1. <ul class="mainMenu">
  2.     <li class="mainMenuItem">
  3.         <a>Main Item Name 1</a>
  4.         <!-- Sub menu for item 1 -->
  5.         <ul class="subMenu">
  6.             <li class="subMenuItem"><a>Sub Menu Link</a></li>
  7.             <li class="subMenuItem"><a>Sub Menu Link</a></li>
  8.             <li class="subMenuItem"><a>Sub Menu Link</a></li>
  9.             <li class="subMenuItem"><a>Sub Menu Link</a></li>
  10.         </ul>
  11.     </li>
  12.     <li class="mainMenuItem">
  13.         <a>Main Item Name 2</a>
  14.         <!-- Sub menu for item 2 -->
  15.         <ul class="subMenu">
  16.             <li class="subMenuItem"><a>Sub Menu Link</a></li>
  17.             <li class="subMenuItem"><a>Sub Menu Link</a></li>
  18.             <li class="subMenuItem"><a>Sub Menu Link</a></li>
  19.             <li class="subMenuItem"><a>Sub Menu Link</a></li>
  20.         </ul>
  21.     </li>
  22. </ul>

y el CSS
Código: [ Select ]
/* hide sub menu items - you'll have to add other styles for position etc */
ul.mainMenu li.mainMenuItem ul.subMenu{
    display:none;
}
/* set hover to display subnav */
ul.mainMenu li.mainMenuItem:hover ul.subMenu{
    display:block;
}
  1. /* hide sub menu items - you'll have to add other styles for position etc */
  2. ul.mainMenu li.mainMenuItem ul.subMenu{
  3.     display:none;
  4. }
  5. /* set hover to display subnav */
  6. ul.mainMenu li.mainMenuItem:hover ul.subMenu{
  7.     display:block;
  8. }


Ahora bien, una cosa a tener en cuenta es que IE6 no soporta el: hover en otra cosa que un <a> así desde que su uso de una batería de Li: flotar en el CSS que tendrá que utilizar Javascript para apoyar IE6
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com
  • brittagyrl
  • Novice
  • Novice
  • Avatar de Usuario
  • Registrado: Nov 21, 2008
  • Mensajes: 32
  • Loc: Ogden, Utah
  • Status: Offline

Nota Diciembre 18th, 2008, 2:25 pm

Gracias, Ill dar a este un tiro; 0)
  • brittagyrl
  • Novice
  • Novice
  • Avatar de Usuario
  • Registrado: Nov 21, 2008
  • Mensajes: 32
  • Loc: Ogden, Utah
  • Status: Offline

Nota Diciembre 19th, 2008, 3:17 pm

Bueno, por lo que he intentado utilizar la secuencia de comandos de submenú y no sugiere tal suerte. ¿Alguien sabe por qué ha IE7 tales horribles problemas con este tipo de cosas, pero no IE8?

¿Cree usted que añadir un iframe podría ayudar?

Página 1 de 1

Publicar Información

  • Total de mensajes en este tema: 5 mensajes
  • Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 217 invitados
  • No puede abrir nuevos temas en este Foro
  • No puede responder a temas en este Foro
  • No puede editar sus mensajes en este Foro
  • No puede borrar sus mensajes en este Foro
  • No puede enviar adjuntos en este Foro
 
 

© 2011 Unmelted, LLC. Ozzu® es una marca registrada de Unmelted, LLC