— Привет, меня зовут Максим Покровский. Вы находитесь в моем рабочем кабинете. Поскольку я фрилансер, будем считать, что именно так он и выглядит. Здесь я пишу много интересных вещей, и если вы почувствовали, что я именно тот человек, который вам нужен, то я всегда открыт для контакта.
Сделал за последнее время:
|
Заказать мне работу |
| 27.07 | Всплывающее гибридное меню на CSS |
Мы собираемся создать гибридное меню, которое работает горизонтально - поперек окна. Оно имеет два уровня навигации (в нашем примере это главные разделы и связанные с ними страницы). Наше меню учтет всплывающий доступ ко всем страницам в обоих навигационных уровнях, отобразит текущие изменения в выбранной области пункта меню, чтобы пользователь знал, где он находится, и будет иметь легкий и чистый код.
Хорошо звучит? Давайте начнем. В итоге может получиться вот так
Создадим горизонтальное всплывающие меню с двумя уровнями навигации (в нашем примере это главные разделы и связанные с ними страницы).
Сначала, мы нуждаемся в списке
Давайте начнем с создания структуры списков и некоторых из их главных представителей. Мы прикрепим ID к ul и классы “off” и “on” для главных элементов списка (способ, вероятно, является не лучшим решением, но он соответствует цели этой статьи):
<li class="off"><a href="#">Renaissance</a>
<ul>
<li><a href="#">Brunelleschi</a></li>
<li><a href="#">Alberti</a></li>
<li><a href="#">Palladio</a></li>
<li><a href="#">Michelangelo</a></li>
<li><a href="#">Bramante</a></li>
</ul>
</li>
<li class="off"><a href="#">Art Nouveau</a>
<ul>
<li><a href="#">Mackintosh</a></li>
<li><a href="#">Guimard</a></li>
<li><a href="#">Horta</a></li>
<li><a href="#">van de Velde</a></li>
</ul>
</li>
<li class="on"><a href="#">Modern</a>
<ul>
<li><a href="#">Sullivan</a></li>
<li><a href="#">Le Corbusier</a></li>
<li><a href="#">Mies</a></li>
<li><a href="#">Gropius</a></li>
<li><a href="#">Yamasaki</a></li>
</ul>
</li>
<li class="off"><a href="#">Postmodern</a>
<ul>
<li><a href="#">Venturi</a></li>
<li><a href="#">Eisenman</a></li>
<li><a href="#">Stern</a></li>
<li><a href="#">Graves</a></li>
<li><a href="#">Gehry</a></li>
</ul>
</li>
<li class="off"><a href="#">Digital</a>
<ul>
<li><a href="#">Xenakis</a></li>
<li><a href="#">Lynn</a></li>
<li><a href="#">Diller+Scofidio</a></li>
<li><a href="#">Zellner</a></li>
<li><a href="#">Hadid</a></li>
</ul>
</li>
</ul>
Добавим стиль
Итак, мы имеем простую семантическую разметку, которая легко поддерживать. Вот как это выглядит сейчас
Первая вещь, которую мы собираемся сделать с нашим CSS - это отобразить первый уровень меню горизонтально (используя float) и скрыть все поднавигационые списки. Также мы сделаем ссылки в списке полужирными, цветными, и добавим границу.
/*флоатим основные пункты списка*/
margin: 0;
float: left;
display: block;
padding-right: 15px;
}
#nav li.off ul, #nav li.on ul {
/*скрываем подменю*/
display: none;
}
#nav li a {
/*для всех ссылок в списке*/
color: #f90;
font-weight: bold;
display: block;
height: 15px;
width: 100px;
border: 1px solid #29497b;
padding: 5px;
}
<p>Теперь давайте установим второй уровень меню ниже главного списка.</p>
#nav li.off ul, #nav li.on ul {
/*помещаем подменю ниже и скрываем их*/
display: none;
position: absolute;
top: 33px;
height: 15px;
left: 0;
padding-top: 10px;
}
Наконец, мы покажем подменю для активного раздела “Modern”. Лучший способ сделать это, если только Вы хотите один центральный, законченный файл меню, это указание для тела класса, скажем, “Modern”, и соответствующих селекторов. Здесь же мы установили класс “on” активной теме и “off” на неактивных темах
/*изменяем цвет границы для активных элементов*/
border: 1px solid #f90;
}
#nav li.on ul a, #nav li.off ul a {
/* отменяем наследование границ*/
border: 0;
}
#nav li.on ul {
/*отображаем подменю*/
display: block;
}
После добавления пары границ мы видим то, что имеем здесь.
Создание Роловера
Теперь, мы активизируем роловер. Процесс ничем не отличается от любого другого всплывающего меню на CSS, когда hover вешается на элемент li. Однако IE будет душить его из-за своей убогой реализацией псевдо класса :hover. Мы займемся этим через минуту. Следующий CSS удаляет границу на подменю, заставляет активное подменю отображаться всегда, и скрывает неактивное, чтобы отобразить их, когда мы задействуем hover. Установим z-index чтобы убедиться в том, что hover всегда имеет приоритет над текущей областью
float: left;
/*ie не наследует float*/
border: 0;
color: #f90;
width: auto;
margin-right: 15px;
}
#nav li.on ul {
/*отображаем текущий топик*/
display: block;
}
#nav li.off:hover ul {
/* отображаем другие элементы когда задействуем hover */
display: block;
z-index: 6000;
}
<p>Сделаем меню немного более дружественным установив фон.</p>
#nav li.off a:hover, #nav li.off:hover a {
background: #29497b;
color: #f90;
}
Решаем проблему IE
Поскольку IE не поддерживает :hover не на чем кроме как на <a>, то у нас есть два варианта дейтсвий: оставить меню так как есть, зная, что это будет работать красиво через несколько лет, когда все браузеры начнут поддерживают :hover (стучим по дереву) или добавить немного JavaScript и перезаписать селекторы CSS на языке понятном для IE.
Скорректируем позиционирование в IE при мощи хака со звездочкой
/*помещаем подменю ниже*/
top: 33px;
*top: 44px; /*поправим для IE*/
}
А вот и JavaScript, который эмулирует работу :hover через onmouseover и заменю класса.
if (document.all && document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navroot .childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace
(" over", "");
}
}
}
}
}
window.onload=startList;
Добавим эти строчки в СSS
display: block;
z-index: 6000;
}
#nav li.off a:hover,
#nav li:hover a,
#nav li.over a {
background: #29497b;
color: #f90;
}
Вот так это может выглядеть, если добавить графики.
По материалу статьи Eric Shepherd Hybrid CSS Dropdowns
| ! | Самое обсуждаемое |
- 16 признаков крутого верстальщика - 49
- Bundles для e-texeditor - 34
- Переходим на em - 30
- Семантика или как же лучше - 28
- Веб-дизайнер. Кто такой? - 26
- Контейнер для float - блоков - 21
- Убираем отступ у последнего элемента списка. - 20
- Меняем лицо - 20
- Как сделать upload в комментариях - 19
- Пиксельмания. Ату его, ату! - 19
Vladimir
Сергей
Yvelious
Ilya V. Azarov
Dimox
Zigzag
Ант
Миша Квакин
Evgeniy
Георгий Тудоси— Люди делятся на заказчиков и тех, кто может ими стать.
(девиз успешного фрилансера)
Комментарии
Оставить комментарий