Горизонтальное меню со спойлером - Форум о сайтостроении


  • Страница 1 из 1
  • 1
Форум о сайтостроении » Форум аниме клона » Яваскрипты - Фреймворки - Слайдеры и прочие фени » Горизонтальное меню со спойлером
Горизонтальное меню со спойлером
Alexiya Дата: Понедельник, 06.04.2015, 23:11 | Сообщение # 1
Группа: Администраторы
Сообщений: 179
Репутация: 11
Статус: Offline
В данной теме я буду конструировать горизонтальное адаптивное меню со спойлером для сайта. Спойлер в меню мы возьмём из темы спойлер для 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]-->


аниме топ сайтов + статья о вашем сайте
Оставь на форуме 50 сообщений и получи анкорную ссылку в подписи!
 
Alexiya Дата: Вторник, 07.04.2015, 09:54 | Сообщение # 2
Группа: Администраторы
Сообщений: 179
Репутация: 11
Статус: Offline
3. Создание стилей и интегрирование спойлера 

3.1 Пропишем стили  @media для нашего меню, привяжем шрифт и выведем в отдельный файл стилей

Код
<link type="text/css" rel="StyleSheet" href="http://anime-clone.my1.ru/html/clon_menu_add.css" />

Из css кода стилей мы сделали привязку разрешений экрана на:
1280px
1024px
930px
860px
734px
700px
640px
580px
546px
512px

И теперь посмотрим на результат с разрешением экрана 1024*768

Далее посмотрим как выглядит наше меню на разрешении 512

Чтобы наше меню можно было посмотреть воочию я выкладываю наш пример меню со спойлером


аниме топ сайтов + статья о вашем сайте
Оставь на форуме 50 сообщений и получи анкорную ссылку в подписи!
 
Форум о сайтостроении » Форум аниме клона » Яваскрипты - Фреймворки - Слайдеры и прочие фени » Горизонтальное меню со спойлером
  • Страница 1 из 1
  • 1
Поиск:



Copyright Аниме Клон © 2020

Привет!
Меню пользователя
Суббота, 15.08.2020, 08:34

Приветствую Вас Гость

Главная | Регистрация | Вход | RSS