Безплатно! Онлайн събитие: От претоварване с информация до фокус и структура с Gemini & NotebookLM Регистрация тук.

Responsive меню

Пълен достъп до курса: Не

За пълен достъп или безплатна проба (2 модула), моля влезте или се регистрирайте.

HTML5 и CSS3 В курса ще се научите как да създавате съвременни уеб страници с помощта на HTML и CSS. Това обучение е подходящо за напълно начинаещи и ще ви помогне да усвоите основите на уеб разработката, като научите как да създавате структура и стил на уеб страници.

Най-важното за responsive менюто

Responsive дизайнът не означава рязка промяна, а плавно адаптиране на елементите според ширината на екрана. Вместо менюто да преминава директно от голям към прекалено малък вид, добавяме междинни стъпки с медийни заявки. Така запазваме четимостта и използваемостта му при различни размери.

Стъпка по стъпка: адаптиране на менюто

Добавете медийна заявка за екрани с максимална ширина 800px.
В нея изберете всички линкове в навигацията на хедъра.
Намалете разстоянието отляво и отдясно чрез padding-left и padding-right на 5px.
Запазете и тествайте чрез смаляване на прозореца – ще видите как елементите се сгъстяват.
Добавете втора медийна заявка за максимална ширина 500px.
В нея намалете размера на шрифта на менюто, за да освободите допълнително място.

Така създавате двустепенна адаптация – първо намалявате разстоянията, после и шрифта.

Използвани CSS правила

@media (max-width: 800px) – прилага стилове при ширина до 800px.
@media (max-width: 500px) – втора стъпка за още по-малки екрани.
padding-left – задава вътрешно отстояние отляво.
padding-right – задава вътрешно отстояние отдясно.
font-size – контролира размера на текста в менюто.

Практическа задача

Добавете още една междинна медийна заявка (по избор, например между 800px и 500px), в която да коригирате допълнително визията на менюто. Целта е менюто да изглежда добре и да остане четимо при всяка ширина на екрана.