Как сделать простую навигацию на HTML5 и CSS3.
Всем привет! Сегодня мы рассмотрим, как сделать простую навигацию на HTML5 и CSS3, используя псевдокласс :target.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 & CSS3 Navigation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
(section[id="section-&"]>h1>lipsum10^p*2>lipsum150)*10
</body>
</html>
Здесь будет очень много текста, поэтому я не стал вставлять уже готовый код, а прописал команду для плагина Emmet. Если вы не знаете, что это такое, то вы можете прочитать об этом здесь.
После выполнения команды, вы получите несколько секций, у каждой из которых свой уникальный id. Внутри каждой секции будет заголовок и текст.
Теперь пропишем стили для каждой секции.
@keyframes flash {
0% {
background-color: yellow;
}
50% {
background-color: transparent;
}
}
section:target {
animation: flash 3s 1 ease-in-out;
}
Все! Теперь попробуйте ввести в адресной строке, к примеру, #section-10, и вы перейдете к данной секции, которая подсветится желтым цветом в течение 3 секунд и затем плавно погаснет.
Вам осталось лишь сделать ссылки, где указать id каждой секции в атрибуте href.
Итак, а у меня на этом все. Спасибо за внимание и удачи!
-
Создано 14.09.2014 20:19:56
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.