Dropdown basado en CSS que no muestra dispositivos iOS

Tengo el menú desplegable para un sitio web que funciona muy bien en el navegador de escritorio pero no funciona en dispositivos iPad o iPhone. Sin embargo, funciona pero funciona en dispositivos Android. Tengo un sitio similar con la misma estructura de navegación y funciona perfectamente en ese sitio.Dropdown basado en CSS que no muestra dispositivos iOS

La URL es www.aiimconference.org. Y aquí hay una muestra de la estructura de navegación y CSS. También aquí está el sitio que funciona perfecto. He estado usando la misma estructura exacta en este sitio. www.aiim.org.

<ul> 
<li><a href="/conference">Home</a></il> 
<li class="expandable"><a href="/conference">Program</a> 
    <ul> 
     <li class="expandable"><a href="/conference">Program</a></il> 
     <li class="expandable"><a href="/conference">Program</a></il> 
    </ul> 
</il> 
<li class="expandable"><a href="/conference">Connect</a></il> 
<li class="expandable"><a href="/conference">Register</a></il> 
<li class="expandable"><a href="/conference">Sponsors</a></il> 
<li class="expandable"><a href="/conference">Venue</a></il> 
</ul> 


.mainNav li.expandable > a /* dropdown */{ 
    background: url("/assets/sites/aiimconference/www/conf2013/styles/css_img/layout/dropdown.jpg") no-repeat center right; 
    padding-right: 16px; 
    padding-bottom: 4px;} 

.mainNav ul li.expandable li.expandable > a /* flyout */ { 
    background-image: url("/assets/sites/aiimconference/www/conf2013/styles/css_img/layout/flyout.png") !important; 
    background-repeat: no-repeat; 
    background-position: 95% 50%; 

. mainNav{ 
    margin: 0 auto; 
    text-align: center; 
    background: #007287 url(/assets/sites/aiimconference/www/conf2013/images/layout/main- nav-bkgd.jpg) repeat-x bottom; 
    font-family: franklin-gothic-urw-condensed, arial, sans-serif; 
    font-size: 20px; 
    line-height: 20px; 
    text-transform: uppercase; 
    margin-top: 30px; 

.mainNav ul ul li:hover > a { 
    background-color:#006372;} 

.mainNav span { 
    display:block; 
    position:absolute; 
    right:9999px; 
    top:-35px;} 

.mainNav ul li:hover > ul { 
    left:-1px; 
    top:30px; 
    z-index:-1;} 
.mainNav ul ul li:hover > ul { 
    left:100%; 
    top:auto; 
    margin-top:-31px; /*margin-left:-10px;*/ 
    z-index:10;}

Fuente

2012-10-01 Wayne

A menos que me esté haciendo viejo, nada hará que el menú vuele, por lo que hay más CSS y/o JS para esto. –

@RyanB yup kunder hover styles etc. –

Lo siento, sé que me falta un código para ese meun. Trabajando en conseguir eso para que ustedes puedan verlo todo. Si desea echar un vistazo al sitio web www.aiimconference.com y usar Firebug o las herramientas de desarrollo de Chrome, vea todos los estilos y la estructura. – Wayne

no puedo confirmar esto, pero sospecho que si en lugar de utilizar el posicionamiento izquierda para ocultar la barra de navegación desplegable que en lugar de utilizar

visibility: hidden; 
height: 0; 
opacity: 0;

de ocultarlo y

visibility: visible; 
height: auto; 
opacity: 1;

para mostrar debería funcionar con safari móvil y Chrome para dispositivos móviles.

Fuente

2012-10-02 12:13:54

Magnus tiene razón en que este modificador lo hará funcionar en 'iOS'. También puede pasar de 'display: none;' a 'display: whatever;'. Eche un vistazo a [este artículo] (http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/) para una explicación más completa de lo que está sucediendo. – jmeas

El único problema con el uso de display: none/block; como @jmeas sugiere es que las transiciones CSS o las animaciones JS no funcionarán. Aparte de eso, debería funcionar perfectamente. –

Por lo que yo sé, no debe usar el selector "hover" de CSS en los dispositivos móviles, porque eso se desencadena por el cursor, que no tiene, ya que tampoco tiene mouse. Podrías tratar de mantener pulsado, pero no estoy seguro de eso.

Una mejor manera de lidiar con eso, es usar consultas de medios para mostrar y hacerlo actuar de cierta manera solo en dispositivos móviles. Le recomiendo que active el menú desplegable haciendo clic en el elemento principal o que se muestre el menú de forma diferente (con el submenú ya abierto o algo así).

Fuente

2012-10-15 20:35:53

Dropdown basado en CSS que no muestra dispositivos iOS

Respuesta

Cuestiones relacionadas