Listy rozwijane oparte na CSS nie wyświetlające urządzeń z systemem iOS

Mam menu rozwijane dla witryny, która działa doskonale w przeglądarce na komputerze, ale nie działa na urządzeniach iPad ani iPhone. Jednak działa, ale działa na urządzeniach z Androidem. Mam podobną stronę z tą samą strukturą nawigacyjną i działa idealnie na tej stronie.Listy rozwijane oparte na CSS nie wyświetlające urządzeń z systemem iOS

Adres URL to www.aiimconference.org. A oto przykład struktury nav i CSS. Również tutaj jest strona, która działa idealnie. Używam tej samej dokładnej struktury na tej stronie. 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;}

Źródło

2012-10-01 Wayne

Dopóki się nie zestarzeję, nic nie spowoduje wyskoczenia menu, więc albo jest więcej CSS i/lub JS. –

@RyanB yup kinda hover styles etc .. –

Przepraszamy, ale wiem, że brakuje mi jakiegoś kodu dla tego meuna. Pracujesz nad tym, żebyście mogli zobaczyć to wszystko. Jeśli chcesz zajrzeć na stronę www.aiimconference.com i użyć narzędzi do tworzenia firebug lub Chrome, zapoznaj się ze wszystkimi stylami i strukturą. – Wayne

nie mogę tego potwierdzić, ale podejrzewam, że jeśli zamiast używać lewej pozycjonowanie ukryć nawigacji rozwijanej zamiast tego użyć

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

to ukryć i

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

pokazać to powinno działać z mobilnym safari i mobilnym chromem.

Źródło

2012-10-02 12:13:54

Magnus ma rację, że ten przełącznik sprawi, że będzie działał na "iOS". Możesz także przejść od 'display: none;' do 'display: cokolwiek;'. Spójrz na [ten artykuł] (http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/), aby uzyskać pełniejsze wyjaśnienie tego, co się dzieje. – jmeas

Jedyny problem z używaniem wyświetlacza: brak/blok; Tak jak sugeruje to @jmeas, to że przejścia CSS lub animacje JS nie będą działać. Poza tym powinien działać idealnie. –

O ile mi wiadomo, nie należy używać "selekcji" selektora CSS na urządzeniach mobilnych, ponieważ jest on uruchamiany przez kursor, którego nie masz, ponieważ nie masz myszy. Możesz spróbować dotknąć i przytrzymać, ale nie jestem tego pewien.

Lepszym sposobem na rozwiązanie tego problemu jest używanie zapytań o media do wyświetlania i sprawiania, aby działały w określony sposób tylko na urządzeniach mobilnych. Polecam albo wyzwolić menu, klikając element nadrzędny, albo wyświetlić menu inaczej (z podmenu już otwarte lub coś podobnego).

Źródło

2012-10-15 20:35:53

Listy rozwijane oparte na CSS nie wyświetlające urządzeń z systemem iOS

Odpowiedz

Powiązane problemy