Комментарий: я часто сталкиваюсь с раскрывающейся навигацией при просмотре веб-страниц. Я помню, что я использовал его с помощью JS. Тем не менее, то, что я хочу представить в этой статье, это реализовать его с помощью CSS3+HTML5. Если вы заинтересованы, не пропустите это. Я надеюсь, что вам будет полезно изучить CSS3 после прочтения.
Рендеринги следующие:Код заключается в следующем:
<! Doctype html>
<html>
<голова>
<meta charset = "utf-8" />
<Title> Pure HTML+CSS Navigation </title>
<!-Малдер->
<!-QQ: 10221408->
<!-только поддержка Chrome Firefox->
<style>
*{
поля: 0;
Заполнение: 0;
}
.clear: после {
ясно: оба;
содержание: ".";
дисплей: блок;
высота: 0;
видимость: скрыта;
}
Нави
дисплей: встроенный блок;
Граница: 1PX SOLI #505255;
Пограничный подъем: 1PX SOLID #282C2F;
-Моз-грамотный радий: 5px;
-Вебкит-грамотный радий: 5px;
Полевая: 50px;
-Webkit-box-shadow: 1px 1px 3px #292929;
-Моз-бокс-тень: 1px 1px 3px #292929;
}
li {
Список стиля: нет;
Плавание: осталось;
граница правая: 1PX SOLID #2E3235;
позиция: относительно;
/*Фон: -моз-линейр-градиент (вверху, #FFF, #555D5F 2%, #555D5F 50%, #3E4245 100%);
Фон: -Webkit-Gradient (линейный, 0 0, 0 100%, от (#ffff), цветовой стойки (2%, #555d5f), цветовой стой
Фон:#555D5F;
}
li: Hover {
/*Фон: -моз-линейр-градиент (вверху, #FFF, #3E4245 2%, #555D5F 80%, #555D5F 100%);
Фон: -Webkit-Gradient (линейный, 0 0, 0 100%, от (#ffff), цветовой стойки (2%, #3E4245), цветовой стоп (80%, #3E4245), до ( #555D5F));*/
Фон:#3E4245;
-Моз-трансляция: фоновая легкость 1S;
-Вобкит-трансляция: фон 1S Easy-Out;
}
li a {
дисплей: блок;
Высота: 40px;
высота линии: 40px;
Надо: 0 30px;
размер шрифта: 12px;
Цвет: #ffff;
Текстовая тень: 0px -1px 0px #000;
Текстовое декорация: нет;
Белое пространство: Nowrap;
РЕМЖА СЛЕДУ: 1PX SOLID #999E9F;
Пограничная топ: 1PX SOLID #999E9F;
-Моз-графин-вершина лево-радиус: 2px;
-Вебкит-графин-вершина лево-радиуса: 2px;
Z-Index: 100;
}
li> a {
позиция: относительно;
}
li.first a {
-Моз-грамотр-радиус-topleft: 4px;
-Моз-грамотный радий-ботемлефт: 4px;
-Вебкит-графин-топ-левый радий: 4px;
-Вебкит-графин-дюймовый левый радий: 4px;
}
li.last {
граница правая: 0 нет;
}
dl {
позиция: абсолютно;
дисплей: блок;
Верх: 40px;
Слева: -25px;
Ширина: 165px;
Фон:#222222;
-Моз-грамотный радий: 5px;
-Вебкит-грамотный радий: 5px;
-Webkit-box-shadow: 1px 1px 3px #292929;
-Моз-бокс-тень: 1px 1px 3px #292929;
z-index: 10;
}
li: Hover dl {
Верх: 50px;
дисплей: блок;
Ширина: 145px;
Заполнение: 10px;
}
dl a {
Фон: прозрачный;
граница: 0 нет;
-Моз-грамотный радий: 5px;
-Вебкит-грамотный радий: 5px;
-Моз-трансляция: фоновая сумма 0,5 с легкостью;
-Вобкит-трансляция: фоновая сумма 0,5 с легкостью;
Z-Index: 50;
}
DL A: Hover {
Цвет: #fff;
Фон:#999E9F;
-Моз-трансляция: фон 0,3 с легкость, цвет 0,3 с легкостью;
-Вобкит-трансляция: фон 0,3 с, цвет 0,3 с легкостью;
}
dd {
маржинальная версия: -40px;
непрозрачность: 0;
Ширина: 145px;
-Вебкит-транс-пропертиза: все;
/*-Webkit-Transition-timing-функция: Cubic-Bezier (5,0,5,0);*/
-Моз-транс-пропертиза: все;
/*-MOZ-Transition-Timing-функция: Cubic-Bezier (5,0,5,0);*/
/*-Webkit-Transition-Delay: 5S;
-Моз-трансляция: 5 с;*/
}
li: Hover dd {
маржа-вершина: 0;
непрозрачность: 1;
}
Li DD: Nth-Child (1) {
-Вебкит-трансляция Продолжительность: 0,1S;
-Моз-трансляция: 0,1 с;
}
Li DD: Nth-Child (2) {
-Вобкит-трансляция Продолжительность: 0,2S;
-Моз-трансляция: 0,2 с;
}
Li DD: Nth-Child (3) {
-Вобкит-трансляция Продолжительность: 0,3 с;
-Моз-трансляция: 0,3 с;
}
Li DD: Nth-Child (4) {
-Вобкит-трансляция Продолжительность: 0,4 с;
-Моз-трансляция: 0,4 с;
}
dt {
дисплей: нет;
маржинальная версия: -25px;
надоеволок: 15px;
Высота: 10px;
}
li: Hover dt {
дисплей: блок;
}
.Darrow {
Поплавок: верно;
Запас: 18px 10px 0 0;
ширина границы: 5px;
Пограничный цвет: #FFF прозрачный прозрачный прозрачный;
пограничный стиль: твердый;
Ширина: 0;
высота: 0;
высота линии: 0;
переполнение: скрыто;
курсор: указатель;
Текстовая тень: 0px -1px 0px #000;
-Webkit-box-shadow: 0px -1px 0px #000;
-moz-box-shadow: 0px -1px 0px #000;
}
.стрелка{
Поле: 0 Авто;
маржинальная версия: -5px;
дисплей: блок;
Ширина: 10px;
Высота: 10px;
Фон:#222222;
-Вебкит-трансформ: вращение (45deg);
-Моз-трансформ: вращение (45deg);
}
</style>
</head>
<тело>
<av>
<ul>
<li> <a href = "#"> Menu One </a> </li>
<li>
<pran> </span>
<a href = "#"> Меню два </a>
<dl>
<dt> <pan> </span> </dt>
<dd> <a href = "#"> подмену один </a> </dd>
<dd> <a href = "#"> Submenu 2 </a> </dd>
<dd> <a href = "#"> подменю три подменю три </a> </dd>
</dl>
</li>
<li>
<pran> </span>
<a href = "#"> Меню три </a>
<dl>
<dt> <pan> </span> </dt>
<dd> <a href = "#"> подмену один </a> </dd>
<dd> <a href = "#"> Submenu 2 </a> </dd>
<dd> <a href = "#"> подменю три подменю три </a> </dd>
</dl>
</li>
<li>
<pran> </span>
<a href = "#"> Меню Четыре </a>
<dl>
<dt> <pan> </span> </dt>
<dd> <a href = "#"> подмену один </a> </dd>
<dd> <a href = "#"> Submenu 2 </a> </dd>
<dd> <a href = "#"> подменю три </a> </dd>
<dd> <a href = "#"> подменю четыре </a> </dd>
</dl>
</li>
<li> <a href = "#"> меню пять </a> </li>
<li> <a href = "#"> men vi </a> </li>
<li> <a href = "#"> меню семь </a> </li>
<li> <a href = "#"> меню 8 </a> </li>
</ul>
</nav>
</body>
</html>