Прескочи към основното съдържание Прескочи към навигацията
Допълнения към урока
Учебна програма HTML5 и CSS3
HTML5 и CSS3
6. Линкове, навигация и меню

Решение: Меню

Курсове HTML5 и CSS3 Седмица 6 - Линкове, навигация и меню
-51,13 € за ВЕЛИКДЕН: Вземи курс "HTML5 и CSS3" за    127,31 € 76,18 €  ВИЖ ТУК

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

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

Предишен Следващ

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

Фиксирано меню с коректна вътрешна навигация

Основната идея е да създадете фиксирано меню, което навигира към различни секции в страницата чрез вътрешни линкове с хешове. За да не се “скрива” съдържанието под менюто при скрол, се използват празни target елементи с височина и отрицателен margin. Това осигурява правилно отстояние и по-добра четимост. Менюто остава винаги най-отгоре благодарение на фиксирано позициониране и висок z-index.

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

  1. Създайте nav елемент и добавете 6 линка, сочещи към вътрешни хешове: #Profile, #Experience, #Education, #Languages, #Software, #Interests.
  2. В съответните секции добавете празни target елементи с id, съвпадащи с хешовете (без да променяте структурата на заглавията).
  3. Задайте на тези елементи височина 80px и отрицателен margin-top: -80px, за да компенсирате височината на менюто.
  4. Направете менюто фиксирано в горната част на страницата, с ширина 100%, позиция горе вляво и подходящ z-index.
  5. Добавете padding-left: 10%, за да съвпада с отстоянието на съдържанието.
  6. Стилизирайте линковете – hover с 3px син border и active състояние със син цвят на текста.

Използвани HTML и CSS свойства

  • nav – семантичен елемент за навигация
  • position: fixed; – фиксира менюто при скрол
  • z-index – контролира подреждането по дълбочина
  • margin-top: -80px; – компенсира височината на менюто
  • :hover и :active – стилове при взаимодействие с линковете

Дискусия към урока