Як зробити просту навігацію на html5 і css3.

Відео: Адаптивна верстка # 4 | адаптивне меню

Всім привіт! Сьогодні ми розглянемо, як зробити просту навігацію на HTML5 та CSS3, використовуючи псевдоклас : target.

 
lang="En"gt; 
 
charset="UTF-8"gt; 
HTML5 CSS3 Navigation 
rel="Stylesheet"href="Style.css"gt; 
 
 
 (Section [id = "section ;"] gt; h1gt; lipsum10 ^ p * 2gt; lipsum150) * 10

Тут буде дуже багато тексту, тому я не став вставляти вже готовий код, а прописав команду для плагіна Emmet. Якщо ви не знаєте, що це таке, то ви можете прочитати про це тут.

Після виконання команди, ви отримаєте кілька секцій, у кожній з яких свій унікальний id. Усередині кожної секції буде заголовок і текст.

Тепер пропишемо стилі для кожної секції.

Відео: CSS3 для початківців | # 10 Створення горизонтального меню

@keyframes flash { 
0%{ 
 background-color: yellow- 
} 
50%{ 
 background-color: transparent- 
} 
} 
 
section:target { 
 animation: flash 3s1 ease-in-out- 
}

Усе! Тепер спробуйте ввести в адресному рядку, наприклад, # Section-10, і ви перейдете до даної секції, яка підсвітить жовтим кольором протягом 3 секунд і потім плавно згасне.

Вам залишилося лише зробити посилання, де вказати id кожної секції в атрибуті href.

Отже, а у мене на цьому все. Дякую за увагу і удачі!

Поділися в соціальних мережах:

Схожі