На моем сайте я использую только динамическое меню CSS. Это нормально для настольных браузеров, но не для iOS (iphone, ipad и т. Д.), Потому что сенсорный интерфейс не поддерживает селектор : hover
.
У меня вопрос: как лучше всего поддерживать это на iOS? (В идеале, исправляя некоторый CSS, или Javascript, который заставит существующий код работать, а не делать все это только для поддержки iOS)
Мой html выглядит так
<ul id="nav">
<li>
Item 1
<ul>
<li><a href=''>sub nav 1.1</a></li>
<li><a href=''>sub nav 1.2</a></li>
</ul>
</li>
<li>
Item 2
<ul>
<li><a href=''>sub nav 2.1</a></li>
<li><a href=''>sub nav 2.2</a></li>
</ul>
</li>
<li>
Item 3
<ul>
<li><a href=''>sub nav 3.1</a></li>
<li><a href=''>sub nav 3.2</a></li>
</ul>
</li>
</ul>
А CSS это
#nav li {
float:left;
padding:0 15px;
}
#nav li ul {
position: absolute;
width: 10em;
left: -999em;
margin-left: -10px;
}
#nav li:hover ul {
left: auto;
}
Я сделал это здесь: http://jsfiddle.net/NuTz4/
Посмотрите эту статью, возможно, это решение для вас;)
http://www.usabilitypost.com/2010/05/12/css-hover-controls-on-iphone/
Также решение JS , взято из: http://www.evotech.net/blog/2008/12/hover-pseudoclass-for-the-iphone/
var nav = document.getElementById('nav');
var els= nav.getElementsByTagName('li');
for(var i = 0; i < els.length; i++){
els[i].addEventListener('touchstart', function(){this.className = "hover";}, false);
els[i].addEventListener('touchend', function(){this.className = "";}, false);
}
В jQuery:
$('#nav li').bind('touchstart', function(){
$(this).addClass('hover');
}).bind('touchend', function(){
$(this).removeClass('hover');
});
css:
li:hover, li.hover { /* whatever your hover effect is */ }