Mobile Menu
Αντιγραφή τον παρακάτω κώδικα:
DEMO
<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
Κατηγορίες:
Σχόλια