Mobile Menu

Αντιγραφή τον παρακάτω κώδικα:

<style>
/* www.foulscode.com */
-
nav[role="navigation"] a {font-size:2em; color: #fff; text-decoration: none; padding: 0 15px; line-height: 35px;}
nav[role="navigation"] li {width: 100%; height: auto; text-align: center; background: #bdc3c7; border: 1px solid #fff;padding: 10px 0;}
nav[role="navigation"] span {font-size: 35px;}
.menu {display: none;}

nav.second {
  width: 320px;
  background: #2980b9;
  height: 40px;
  display: block;
  margin: auto;
  font-family: 'Lato', sans-serif;
}

select {
   background: #2980b9;
   border: none;
   width: 100%;
   font-size: 30px;
   color: #fff;
}

@media only screen
and (max-width : 320px) {
body {background: #000;}
}
.clearfix {clear:both;}
.block {width: 100%; height: 300px; display: block;}
/* www.foulscode.com */
</style>

<br class="clearfix" />
<div class="block"></div>
<nav class="second">
  <form>
<select>
<option value="" onchange="if (this.value) window.location.href = this.value;">Menu
<option value="URL">Home
<option value="URL">About
<option value="URL">Portfolio
<option value="http://www.foulscode.com">Foulscode.com
<option value="URL">Navigation
<option value="URL">Contact
</select>
</form>
</nav>




DEMO
Σχόλια