CSS導航菜單IPad和IPhone

我有一個css菜單，在大多數桌面瀏覽器中都能正常工作，但我遇到了問題，我的下拉菜單可用於iPad和Iphone。這裏是有問題的網站：http://bakersfield.kernhigh.org/CSS導航菜單IPad和IPhone

我是相當新的CSS和JavaScript，所以任何幫助將是偉大的。

謝謝

來源

2012-10-08 user1604254

一般來說，這樣的下拉菜單通常不適用於移動網站。這是因爲您無法用手指真正懸停在導航項目上，並且在沒有放大菜單的情況下按下某個項目可能會很困難。

在移動設備上查看時，解決方案具有不同的CSS樣式以供導航。下面是幫助您將您的導航更加適合移動設備的重要資源：

http://css-tricks.com/convert-menu-to-dropdown/

來源

2012-10-08 03:13:14 phoffman

目前，iOS不支持:hover，使您的導航功能就無法在iOS中展開，因爲它做了桌面上。

你考慮過jQuery Mobile嗎？不過，我只會建議如果你正在開發一個單獨的移動版本。

否則，你可以使用這個jQuery（你還必須包括jQuery的當時）：

$('nav li').bind('touchstart', function(){ 
    $(this).addClass('hover'); 
}).bind('touchend', function(){ 
    $(this).removeClass('hover'); 
});

這將在觸摸加個班（懸停），並刪除它在去除手指。您當然必須根據您的需要進行編輯。我只是這樣說，因爲你說你是JavaScript新手，我不想混淆你。

來源

2012-10-08 03:46:43 ndugger

下拉菜單可能會吸吮，特別是使它們與觸摸屏設備一起工作，因爲您無法將其懸停在觸摸屏上。這是我如何做下拉菜單，它是純CSS，我已經在Chrome，ff，ie7 +，safari，iPhone和多個Android上進行了測試（當然，您需要調整顏色和大小）：

HTML

<div id="navigation"> 
    <ul id="nav"> 
     <li><a href="index.html>Home</a></li> 
     <li><a href="#">Drop Down</a> <!--Notice didn't close the li yet-> 
      <ul> 
      <li><a href="link">Drop Down Item</a></li> 
      <li...../li> 
      etc... 
      </ul> 
     </li> 
     <li><a href="#">Another Drop Down</a></li> 
      <ul> 
      ... 
      </ul 
     </li> 
    </ul> 
</div>

CSS：

#nav { 
    display: block; 
    text-align: center; 
    font-size: 1em; 
    position: relative; 
    height: 3em; 
    width: 950px; 
    margin-right: auto; 
    margin-left: auto; 
    list-style-type: none; 
} 

#nav li { 
    float: left; 
    display: block; 
    width: 75px; 
    height: 3em; 
    position: relative; 
} 
#nav li a { 
    text-decoration: none; 
    display: block; 
    height: 1em; 
    padding-top: 1em; 
    padding-bottom: 1em; 
} 
#nav li a:hover { 
    color: #990000; 
    background-color: #999999; 
} 
#nav li ul { 
    width: 100%; 
    display: none; 
    z-index: 9999; 
    position: absolute; 
} 

#nav li ul li { 
    display: block; 
    clear: both; 
    width: 100%; 
    height: 100%; 
    background-color: #B5BDC8; 
} 
#nav li:hover ul { 
    display: block; 
}

背後所有這一切的想法是創建一個列表，那麼其他名單內創建下拉元素....

然後，從它e，只顯示開始的主要列表項目，然後顯示懸停時的下拉菜單（或者在移動設備點擊的情況下，通過使主列表項目鏈接到「＃」，從而創建和主動/懸停狀態）...

唯一的問題是，通過使用顯示器：沒有它不是屏幕閱讀器友好，但我總是包括網站導航在屏幕閱讀器友好的底部和SEO友好以及。

你可以在這個網站上看到這個實例在我的工作here

來源

2012-10-08 05:50:45

CSS導航菜單IPad和IPhone

回答

相關問題