Курс HTML5, CSS3, SEO, Wordpress и Photoshop

Адаптивное меню

Чтобы сделать сайт адаптивным, нужно чтобы и меню на сайте было адаптивным. В этом уроке мы создадим простое адаптивное меню для сайта.
Наше меню, будет на экранах позволяющих вместить все меню целиком, смотреться как обычное меню, а на экранах в которых меню не будет вмещаться полностью, будет в виде выпадающего списка.

Пример адаптивного меню

Для начала посмотрите реальный пример адаптивного меню здесь (если размер окна менее 620 пикселей, то появится выпадающий список).

Код этого примера довольно прост.

index.html:

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
</head>
<body>
<div id='center'>
<nav>
<div id='mymenu'>
<menu>
<li><a href='http://almatysite.kz/html'>HTML5</a></li>
<li><a href='http://almatysite.kz/css3'>CSS3</a></li>
<li><a href='http://almatysite.kz/chto-takoe-photoshop/'>Photoshop</a></li>
<li><a href='http://almatysite.kz/cms-wordpress/'>Wordpress</a></li>
<li><a href='http://almatysite.kz/chto-takoe-prodvizhenie-sayta/'>SEO</a></li>
</menu>
</div>
</nav>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(function() {
$("<select />").appendTo("nav");
$("<option />", {
"selected": "selected",
"value" : "",
"text" : "Страницы..."
}).appendTo("nav select");
$("nav a").each(function() {
var el = $(this);
$("<option />", {
"value" : el.attr("href"),
"text" : el.text()
}).appendTo("nav select");
});
$("nav select").change(function() {
window.location = $(this).find("option:selected").val();
});
});
</script>
</body>
</html>
HTML код имеет простой вид, за исключением тэга menu и js кода. Тэг menu является аналогом тэга ul для создания списков, за исключением того что тэг menu применяется только для списков меню. Что касается js скрипта, то его нужно просто скопировать и вставить на сайт.
style.css:

* {
margin:0;
padding: 0;
}

#center {
width: 70%;
margin: 0 auto;
padding-top: 30px;
}

nav {
display:block;
float:none;
width:100%;
height:37px;
background:#009fea;
}

menu li {
display:inline-block;
color:white;
font-weight:bold;
margin-right:27px;
font-size:13px;
font-family:arial;
list-style:none;
}

menu li a {
color:white;
text-decoration:none;
}

nav select {
display:none;
}

#mymenu {
margin:0 auto;
width:100%;
padding-left:15px;
padding-top:7px;
}

@media(max-width:620px)
{
nav menu{
display:none;
}
nav select{
display:inline-block;
}
}
В стилевом файле style.css нет ничего особенного, за исключением последнего медиа запроса, смысл этого запроса в том что при размерах экрана менее 620 пикселей, меню будет в виде выпадающего списка. Естественно вы можете поставить вместо 620 любое значение.