Некоторое время я имел в виду этот пример и, увидев нечто подобное в дикой природе , заставил меня захотеть написать эту статью.
Итак, в этой статье вы узнаете, как создать интерактивное меню с использованием CSS3 и возможностей jQuery.
Идея
Идея этого примера заключалась в том, чтобы иметь несколько хорошо организованных блоков, и как только вы нажмете на один из них, блок начнет показывать скрытое содержимое, начиная с его текущей позиции.
Помимо того, что это меню, этот пример также может служить идеальным одностраничным веб-сайтом. Например, просто подумайте, что блок может называться «Контакт» и может содержать красивую форму контакта.
HTML
Здесь нет ничего сложного, каждый блок имеет заголовок, который скрыт после запуска смежного контента. Относительно tabindex расскажу чуть позже.
<ul class="menu">
<li tabindex="1">
<span class="title">One</span>
<div class="content">Lorem ipsum dolor sit amet...</div>
</li>
...
<li tabindex="1">
<span class="title">Nine</span>
<div class="content">Lorem ipsum dolor sit amet...</div>
</li>
</ul>
CSS
В следующих строках я попытаюсь немного объяснить стили, которые использовались для создания этого примера.
обертка
Прежде всего, мы собираемся добавить несколько основных стилей для нашей обертки списка, включая очистку поплавков. Также вы могли заметить сброс счетчика: li; Декларация, вы видели это раньше, и мы будем использовать его еще раз, чтобы создать хороший контр-эффект.
.menu{
width: 620px;
margin: 100px auto; padding: 15px;
list-style: none;
counter-reset: li;
background: #eee;
box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
border-radius: 10px;
}
.menu:before,
.menu:after {
content: "";
display: table;
}
.menu:after {
clear: both;
}
.menu {
zoom:1;
}
Элемент списка
Ниже вы можете найти правила CSS, используемые для добавления некоторых основных стилей для элементов списка.
Что следует отметить:
- На: focus мы будем использовать тот же стиль, что и на: hover. Это необходимо при использовании клавиши на клавиатуре.
- Класс CSS .cover динамически добавляется (с помощью jQuery) к элементу li при его запуске.
- Если триггер выполнен с помощью клавиши ENTER, используя контур: 0; Декларация поможет снять фокусировку.
- Система нумерации, похожая на упорядоченные списки CSS3 .
.menu li {
position: relative;
float: left;
cursor: pointer;
height: 120px; width: 200px;
margin: 10px 0 0 10px;
color: #fff;
}
.menu li:hover, .menu li:focus{
background-image: linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
}
.menu .cover{
z-index: 2;
}
.menu .cover:focus{
outline: 0;
}
/* -------------------------------- */
.menu li::after{
content: counter(li);
counter-increment: li;
font: italic bold 10px serif, georgia;
position: absolute;
color: rgba(255,255,255,.1);
opacity: 0;
transition: all .2s ease-out;
}
.menu li:hover::after, .menu li:focus::after{
font-size: 100px;
opacity: 1;
}
.menu .cover::after{
z-index: -1;
}
Очистите поля li и раскрасьте их
Выше мы используем маржу: 10px 0 0 10px; чтобы добавить расстояние между элементами, теперь мы должны очистить некоторые из них. Также мы раскрасим элементы li вместе с окном контента и кнопкой закрытия.
В этом случае, чтобы раскрасить .content и .close для каждого li, было бы здорово просто использовать background: наследовать; декларация. Но из-за несовместимости браузера мы будем использовать «сложный» способ, как вы можете видеть ниже:
.menu li:nth-child(1),
.menu li:nth-child(2),
.menu li:nth-child(3){
margin-top: 0;
}
.menu li:nth-child(1),
.menu li:nth-child(4),
.menu li:nth-child(7){
margin-left: 0;
}
/* -------------------------------- */
.menu li:nth-child(1),
.menu li:nth-child(1) .content,
.menu li:nth-child(1) .close{
background-color: #2c618f;
}
.menu li:nth-child(2),
.menu li:nth-child(2) .content,
.menu li:nth-child(2) .close{
background-color: #91ab31;
}
.menu li:nth-child(3),
.menu li:nth-child(3) .content,
.menu li:nth-child(3) .close{
background-color: #714a28;
}
.menu li:nth-child(4),
.menu li:nth-child(4) .content,
.menu li:nth-child(4) .close{
background-color: #e58600;
}
.menu li:nth-child(5),
.menu li:nth-child(5) .content,
.menu li:nth-child(5) .close{
background-color: #c33a00;
}
.menu li:nth-child(6),
.menu li:nth-child(6) .content,
.menu li:nth-child(6) .close{
background-color: #7f5dac;
}
.menu li:nth-child(7),
.menu li:nth-child(7) .content,
.menu li:nth-child(7) .close{
background-color: #5672b7;
}
.menu li:nth-child(8),
.menu li:nth-child(8) .content,
.menu li:nth-child(8) .close{
background-color: #69003f;
}
.menu li:nth-child(9),
.menu li:nth-child(9) .content,
.menu li:nth-child(9) .close{
background-color: #393043;
}
Заголовок, Содержание и Закрытие
Относительно стилей для окна .content:
- Когда к нему добавляется класс .expanded, его высота и ширина переходят, чтобы охватить весь список.
- Обратите внимание на комментарии, чтобы увидеть, как элементы в сетке «реагируют», как только они будут запущены.
На этом скриншоте вы можете увидеть пятый блок завис.
.menu .content{
opacity: 0; display: none\9;
overflow: hidden;
font: 12px Arial, Helvetica;
position: absolute;
height: 120px; width: 200px;
transition: all .3s ease-out;
}
.menu .expanded{
opacity: .95; display: block\9;
overflow: visible;
padding: 40px;
height: 300px; width: 540px; /* Cover the entire area */
}
.menu li:nth-child(3n) .content{ /* 3,6,9 */
right: 0;
}
.menu li:nth-child(3n-1) .expanded{ /* 2,5,8 */
left: 50%;
margin-left: -310px;
}
.menu li:nth-child(7) .content, /* 7,8,9 */
.menu li:nth-child(8) .content,
.menu li:nth-child(9) .content{
bottom: 0;
}
.menu li:nth-child(4) .expanded, /* 4,5,6 */
.menu li:nth-child(5) .expanded,
.menu li:nth-child(6) .expanded{
margin-top: -190px;
top: 50%;
}
/* -------------------------------- */
.menu .title{
position: absolute;
height: 100%; width: 100%;
text-align: center;
font: italic bold 1em/120px 'trebuchet MS', Arial, helvetica;
opacity: .2;
}
.menu li:hover .title{
opacity: .7;
}
/* -------------------------------- */
.menu .close {
/*background: inherit;*/
display: none;
border: 5px solid #fff;
color: #fff;
cursor: pointer;
height: 40px; width: 40px;
font: bold 20px/40px arial, helvetica;
position: absolute;
text-align: center;
top: -20px; right: -20px;
border-radius: 40px;
}
.menu .cover .close{
display: block;
}
JQuery
Ниже у вас есть код JQuery, я думаю, что это довольно легко понять и понять:
(function(){
// Append a close trigger for each block
$('.menu .content').append('x');
// Show window
function showContent(elem){
hideContent();
elem.find('.content').addClass('expanded');
elem.addClass('cover');
}
// Reset all
function hideContent(){
$('.menu .content').removeClass('expanded');
$('.menu li').removeClass('cover');
}
// When a li is clicked, show its content window and position it above all
$('.menu li').click(function() {
showContent($(this));
});
// When tabbing, show its content window using ENTER key
$('.menu li').keypress(function(e) {
if (e.keyCode == 13) {
showContent($(this));
}
});
// When right upper close element is clicked - reset all
$('.menu .close').click(function(e) {
e.stopPropagation();
hideContent();
});
// Also, when ESC key is pressed - reset all
$(document).keyup(function(e) {
if (e.keyCode == 27) {
hideContent();
}
});
})();
Видимое окно контента для пятого элемента.
Изящная деградация
Что касается непрозрачности, из-за отсутствия поддержки старых браузеров, вам нужно использовать переключатель отображения для IE Trident:
opacity: 0; display: none\9; /* Initially hidden */ opacity: .95; display: block\9; /* Expanded */
Другие существующие CSS3 вещи, такие как переходы и градиенты, и просто играйте там, где это позволяет поддержка.
Селекторы
Как вы уже заметили, мы использовали некоторые селекторы CSS3, которые старые браузеры, такие как IE8 и ниже , не поддерживают.
Итак, нам нужно решение, которое исправляет пример для этих браузеров. На мой взгляд, лучшим решением в этом случае является использование инструмента Selectivizr , так как мы уже включили jQuery в наш проект. Это потому, что для работы Selectivzr требуется одна из этих библиотек JavaScript: jQuery, MooTools, Prototype и т. Д.
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="selectivizr.js"></script>
<![endif]-->
Мысли о доступности
Самое интересное, что наряду с HTML5 атрибут tabindex можно использовать с любым элементом HTML. Мы будем использовать это в нашем примере для включения навигации по вкладкам: <li tabindex = «1»>.
Я действительно хотел, чтобы этот пример был доступен через клавиатуру, и я сделал это. Во вкладках у вас есть возможность вызвать окно, нажав клавишу ВВОД, а затем закрыть его, нажав клавишу ESC:
// ENTER
$('.menu li').keypress(function(e) {
if (e.keyCode == 13) {
showContent($(this));
}
});
// ESC
$(document).keyup(function(e) {
if (e.keyCode == 27) {
hideContent();
}
});
Это оно!
Надеюсь, вам понравилась эта статья, и я с нетерпением жду ваших мыслей по этому поводу. Спасибо за чтение!
Если вам понравилась эта статья, вам также может понравиться: