2013-11-12 2 views
1

Есть ли альтернатива выпадающему меню на iphones/ios, это реализация мобильного сайта, а не родное приложение, ища простую альтернативу с html/css/javascript.html выпадающий вариант выбора выглядит настолько уродливым на iphones

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scaleable=no, width=device-width" /> 
</head> 
<body> 
<font size=+1> 
<select> 
<option disabled selected value="select">Select a category</option> 
<option value="saab">Saab</option> 
<option value="mercedes">Mercedes</option> 
<option value="audi">Audi</option> 
</select> 
</font> 
</body> 
</html> 
+1

вы можете использовать JQuery мобильный телефон для this..http: //jquerymobile.com/demos/1.0.1/docs/forms/selects/index.html – shemy

ответ

1
<html> 
<head> 
/* reza jafari*/ 
<style> 
ul#menu, ul#menu ul.sub-menu { 
    padding:0; 
    margin: 0; 
} 
ul#menu li, ul#menu ul.sub-menu li { 
    list-style-type: none; 
    display: inline-block; 
} 
/*Link Appearance*/ 
ul#menu li a, ul#menu li ul.sub-menu li a { 
    text-decoration: none; 
    color: #fff; 
    background: #666; 
    padding: 5px; 
    display:inline-block; 
} 
/*Make the parent of sub-menu relative*/ 
ul#menu li { 
    position: relative; 
} 
/*sub menu*/ 
ul#menu li ul.sub-menu { 
    display:none; 
    position: absolute; 
    top: 30px; 
    left: 0; 
    width: 100px; 
} 
ul#menu li:hover ul.sub-menu { 
    display:block; 
} 
</style> 
</head> 
<body> 
<ul id="menu"> 
    <li> 
     <a href="#">Menu 1</a> 
    </li> 
    <li><a href="#">Menu 2</a> 

     <ul class="sub-menu"> 
      <li> 
       <a href="#">Sub Menu 1</a> 
      </li> 
      <li> 
       <a href="#">Sub Menu 2</a> 
      </li> 
      <li> 
       <a href="#">Sub Menu 3</a> 
      </li> 
      <li> 
       <a href="#">Sub Menu 4</a> 
      </li> 
     </ul> 
    </li> 
    <li><a href="#">Menu 3</a> 

    </li> 
    <li><a href="#">Menu 4</a> 

     <ul class="sub-menu"> 
      <li> 
       <a href="#">Sub Menu 1</a> 
      </li> 
      <li> 
       <a href="#">Sub Menu 2</a> 
      </li> 
      <li> 
       <a href="#">Sub Menu 3</a> 
      </li> 
      <li> 
       <a href="#">Sub Menu 4</a> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">Menu 5</a> 
    </li> 
</ul> 
</body> 
</html> 
Смежные вопросы