下拉菜單爲ipad攻

我使用基於css3的下拉菜單。它的工作原理基於css中提到的懸停。但我需要做這個ipad的工作，因爲我墊不考慮懸停下拉將無法在iPad上工作。下拉菜單爲ipad攻

是否有任何財產提及ipad。如果我們只能改變現有的CSS，那將會很棒。

 <!DOCTYPE html> 
    <html> 
     <head> 
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
      <title>menu</title> 
<style> 
/* Main menu */ 
.menu 
{ 
    width: 100%; 
    margin: 0; 
    padding: 10px 0 0 0; 
    list-style: none; 
    background: #111; 
    background: -moz-linear-gradient(#444, #111); 
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); 
    background: -webkit-linear-gradient(#444, #111);  
    background: -o-linear-gradient(#444, #111); 
    background: -ms-linear-gradient(#444, #111); 
    background: linear-gradient(#444, #111); 
    -moz-border-radius: 50px; 
    border-radius: 50px; 
    -moz-box-shadow: 0 2px 1px #9c9c9c; 
    -webkit-box-shadow: 0 2px 1px #9c9c9c; 
    box-shadow: 0 2px 1px #9c9c9c; 
} 
.menu li 
{ 
    float: left; 
    padding: 0 0 10px 0; 
    position: relative; 
    line-height: 0; 
} 
.menu a 
{ 
    float: left; 
    height: 25px; 
    padding: 0 25px; 
    color: #999; 
    text-transform: uppercase; 
    font: bold 12px/25px Arial, Helvetica; 
    text-decoration: none; 
    text-shadow: 0 1px 0 #000; 
} 
.menu li:hover > a 
{ 
    color: #fafafa; 
} 
.menu li:hover > ul 
{ 
    display: block; 
} 

/* Sub-menu */ 
.menu ul 
{ 
    list-style: none; 
    margin: 0; 
    padding: 0;  
    display: none; 
    position: absolute; 
    top: 35px; 
    left: 0; 
    z-index: 99999;  
    background: #444; 
    background: -moz-linear-gradient(#444, #111); 
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); 
    background: -webkit-linear-gradient(#444, #111);  
    background: -o-linear-gradient(#444, #111); 
    background: -ms-linear-gradient(#444, #111);  
    background: linear-gradient(#444, #111); 
    -moz-box-shadow: 0 0 2px rgba(255,255,255,.5); 
    -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5); 
    box-shadow: 0 0 2px rgba(255,255,255,.5); 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
} 
.menu ul ul 
{ 
    top: 0; 
    left: 150px; 
} 

.menu ul li 
{ 
    float: none; 
    margin: 0; 
    padding: 0; 
    display: block; 
} 
.menu ul li:last-child 
{ 
    -moz-box-shadow: none; 
    -webkit-box-shadow: none; 
    box-shadow: none;  
} 
.menu ul a 
{  
    padding: 10px; 
    height: 10px; 
    width: auto; 
    height: auto; 
    line-height: 1; 
    display: block; 
    white-space: nowrap; 
    float: none; 
    text-transform: none; 
} 
.menu ul a:hover 
{ 
    background: #0186ba; 
    background: -moz-linear-gradient(#04acec, #0186ba);  
    background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)); 
    background: -webkit-linear-gradient(#04acec, #0186ba); 
    background: -o-linear-gradient(#04acec, #0186ba); 
    background: -ms-linear-gradient(#04acec, #0186ba); 
    background: linear-gradient(#04acec, #0186ba); 
} 

.menu ul li:first-child > a 
{ 
    -moz-border-radius: 5px 5px 0 0; 
    border-radius: 5px 5px 0 0; 
} 

.menu ul li:first-child a:hover 
{ 
    border-bottom-color: #04acec; 
} 

.menu ul ul li:first-child a:hover 
{ 
    border-right-color: #04acec; 
    border-bottom-color: transparent; 
} 


.menu ul li:last-child > a 
{ 
    -moz-border-radius: 0 0 5px 5px; 
    border-radius: 0 0 5px 5px; 
} 

/* Clear floated elements */ 
.menu:after 
{ 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
} 

</style> 
     </head> 
     <body> 
     <ul class="menu"> 
       <li><a href="#">Home</a></li> 
       <li> 
        <a href="#">Categories</a> 
         <ul> 
         <li><a href="#">CSS</a></li> 
         <li><a href="#">menu2</a></li> 
         <li><a href="#">menu 3</a></li> 
         <li><a href="#">menu 4menu2menu2menu2menu2</a></li> 
         </ul> 
       </li> 
       <li><a href="#">Work</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Contact</a></li> 
     </ul> 

    </body> 
    </html>

來源

2012-05-17 Sowmya

嘗試應用類的李當touchstart和touchend事件被觸發。並使用（.hover）還有：在你的CSS

例如，在你的js hover僞事件：

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) { 
    $(".menu li a").bind('touchstart', function(){ 
     $(this).addClass('hover'); 
    }); 

    $(".menu li a").bind('touchend', function(){ 
     $(this).removeClass('hover'); 
    }); 
}

來源

2012-05-17 13:22:46

你可以做'navigator.userAgent.match（/ IP（磨練| OD | ad）/）'在if語句中，而不是你所做的。 –

下拉菜單爲ipad攻

回答

相關問題