ID #gimme-code-2013-0004.html#

Convert ul to Drop Down menu for Mobile Devices

HTML + CSS source code:


<!DOCTYPE html>
<html>
<!-- Don't Break My b***s - Gimme Code! Project                                              -->
<!-- Author: Andrea Tonin - http://blog.lucedigitale.com                                     -->
<!-- This code come with absolutely no warranty                                              -->
<!-- If you use this code in your project please give a link to http://blog.lucedigitale.com -->
<!-- Thanks in advance                                                                       -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title</title>
<style type="text/css"> 

nav select {
  display: none; /* By default hide the - select - element */
}

/* Breakpoint, invert visibility of - ul - select - */
@media (max-width: 960px) {
  nav ul     { display: none; }
  nav select { display: inline-block; }
}

</style>
</head>

<body>
<p><h2>Resize the browser window under 960px</h2></p>
<nav> 

  <ul> <!-- Big Screen, - ul - element -->
    <li><a href="/" class="active">Menu1</a></li> 
    <li><a href="/collections/all">Menu2</a></li> 
    <li><a href="/blogs/five-simple-steps-blog">Menu3</a></li> 
    <li><a href="/pages/about-us">Menu4</a></li> 
    <li><a href="/pages/support">Menu5</a></li> 
  </ul> 
  
  <select> <!-- Small Screen, - select - element -->
    <option value="" selected="selected">Select</option> 
    
    <option value="/">Menu1</option> 
    <option value="/collections/all">Menu2</option> 
    <option value="/blogs/five-simple-steps-blog">Menu3</option> 
    <option value="/pages/about-us">Menu4</option> 
    <option value="/pages/support">Menu5</option> 
  </select> 

</nav>  

</body>
</html>

Breakpoint setup at @media all and (min-width: xxem).
Breakpoint invert visibility of – ul – select – elements.

DEMO

Distanziatore bianco

My official WebSite >