В данной теме я буду конструировать горизонтальное адаптивное меню со спойлером для сайта. Спойлер в меню мы возьмём из темы спойлер для ucoz.
Идеи меню: Я хочу чтобы при маленьких разрешениях экрана наше меню открывалось при помощи спойлера и имело высокую кроссбраузерность, простыми словами выглядело везде хорошо.
Разобьём наше конструирование на шаги:
1. Создание иконки меню
2. Создание разметки меню
3. Создание стилей и интегрирование спойлера
1. Создание иконки меню
Для начала мы изготовим иконку кнопочки спойлера и уже затем продолжим конструировать меню, применяя стили @media.
1.1 И мы открываем программу Photoshop и создаём исходный документ с размерами 50*50 пикселей.
1.2 Выбираем инструмент "линия", его цвет и толщину
далее чертим линию, растрируем слой и дублируем его со смещением вниз
далее выключаем слой - задний план и сохраняем нашу иконку в формате png
Вот наша иконка для меню.
2. Создание разметки меню
Я готовлю меню для одного проекта, в котором зарезервировано 5 ссылок-слов и поэтому наше меню будет без под меню.
2.1 Код разметки
Код
<div class="manmenu">
<!--dle_spoiler-->
<div class="menu_spoiler">
<a href="javascript:ShowOrHide('m01')">
<!--spoiler_title-->
<div class="menuTd1">
<img style="visibility: visible;" class="new_ts" src="http://anime-clone.my1.ru/html/slad_menu.png">
</div>
<!--spoiler_title_end-->
</a>
</div>
<div id="m01" class="text_spoiler" style="">
<!--spoiler_text-->
<div class="ie">
<ul id="topnav">
<li><a href="#">Ссылка меню №1</a></li>
<li><a href="#">Ссылка меню №2</a></li>
<li><a href="#">Ссылка меню №3</a></li>
<li><a href="#">Ссылка меню №4</a></li>
<li><a href="#">Ссылка меню №5</a></li>
</ul>
</div>
</div></div>
<!--spoiler_text_end--><!--/dle_spoiler-->
</div>
Допишем стили для IE
Код
<!--[if lte IE 9]>
<style type="text/css">
.text_spoiler{display:inline; position:relative;margin:0; align:left;height:50px;width: 100%;overflow:hidden !important;}
.ie{margin-left:50px;margin-top:-50px;height:50px;width: 100%;overflow:hidden !important;}
ul#topnav li{max-width: 100%;min-width:10%;}
</style>
<![endif]-->
