В теме адаптивный дизайн на базе div блоков мы ознакомились с примером адаптивного дизайна и теперь переходим на следующую ступень и знакомимся с адаптивным меню.
И начнём постигать меню с разметки кода
Код
<nav tabindex="0"><div tabindex="0">
<a href="#">1 меню</a>
<a href="#">2 меню</a>
<a href="#">3 меню</a>
<a href="#">4 меню</a>
</div></nav>
<div style="clear:both; padding-bottom:0.25em"></div>
После разметки мы переходим к стилям нашего меню и размечаем css
Код
<style>
nav a, nav:before, nav div:before {
display: inline-block;
padding: 10px 0;
color: #fff;
text-align: center;
cursor: pointer; /* курсор для Opera Mini */
background: rgb(196,151,245); /* цвет фона */
}
nav a {
width: 24.2%; /* почти 1/4 часть */
background: rgb(224,220,228); /* фон пунктов */
text-decoration: none;
}
nav a:hover {
background: rgb(215,185,248); /* фон при наведении */
}
@media (max-width: 500px)
{ /* для устройств, меньше 500px */
nav a, nav:before, nav div:before {
width: 100%; /* Растяжение пунктов на всю ширину */
}
nav:before {
content: "меню";
}
nav:focus:before {
content: none;
}
nav:focus div:before {
content: "свернуть меню";
}
nav:not(:focus) div:not(:active){
display: none;
}
}
#raz {
padding: 0.3em;
background: #f8f1ff;
}
#raz div {
background: #f8f1ff;
}
#raz:focus {
background: #a078ca;
}
</style>
Добавляем скрипт для корректного отображения на мобильном телефоне
Код
<script>
var nav = document.getElementsByTagName('nav');
mynav();
function mynav() {
if (500 >= document.documentElement.clientWidth) {
nav[0].children[0].style.display = 'none';
nav[0].onclick = function(e) {
if (e.target != this) { return true; }
this.children[0].style.display = this.children[0].style.display === 'none' ? 'block' : 'none';
}
}
}
window.onresize = function() {
mynav();
if (500 < document.documentElement.clientWidth) {
nav[0].children[0].style.display = 'block';
}
}
</script>
Теперь осталось всё соединить и посмотреть что же у нас получилось
Пример
p/s
Если вы интересуетесь интеграцией адаптивного меню себе на сайт, то я рекомендую вам ознакомиться с темой горизонтальное адаптивное меню с чекбоксом 
