Простое горизонтальное адаптивное меню для изучения - Форум о сайтостроении


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


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



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

Привет!
Меню пользователя
Пятница, 15.12.2017, 16:48

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

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