CSS - горизонтальне меню для верстальників-початківців

CSS - горизонтальне меню для верстальників-початківців

HTML і CSS - це мови веб-програмування, необхідні для верстання сайтів. Початківцю-верстальнику, який вирішив освоїти ази цієї професії, слід почати саме з їх вивчення, тому що на їх основі можливо створити простий сайт.

На HTML і CSS горизонтальне меню для сайту будується легко, почати слід з написання каркаса.

Будуємо каркас

Для початку слід зробити html-розмітку. Меню найпростіше робити маркірованим за допомогою теґу < ul >. Тег парний, тому вимагає закриття в кінці списку </ul >. До нього краще відразу додати клас для подальшої стилізації. До тегу додають парні елементи < li > за кількістю пунктів з увімкненими посиланнями.

Приклад:

<ul class=""menu"">

< li > < a href = "" # html "" > Будуємо каркас </a > </li >

< li > < a href = "" # menu "" > Горизонтальне меню </a > </li >

< li > < a href = "" # sub-menu "" > Спадне меню </a > </li >

< li > < a href = "" # fixed "" > Фіксоване меню </a > </li >

</ul>

Так виходить основа, яка потім оформляється в CSS в горизонтальне меню, фіксоване або випадаюче.

Горизонтальне меню

Після того як код був розмічений, саме час приступити до роботи зі стилем. Слід зауважити, що парні теги, використані для типового каркаса, є блочними, а отже, для створення як звичайного, так і випадаючого горизонтального меню в CSS необхідно змінити тип елемента на рядковий. Це можна зробити за допомогою властивості display. Воно додається до елемента:

.menu li {

display: inline;

}

Так воно перетворюється на горизонтальне. Якщо підпунктів багато, вони можуть переміститися на новий рядок без додаткових властивостей. У цьому випадку застосовуються властивості для відображення пробілів та перенесення тексту. Nowrap зберігає текст повністю, без переносів, а pre-wrap зберігає пробіли з HTML і додає автоматичні.

.menu li {

display: inline;

white-space: nowrap;

}

Щоб не забивати рядок суцільним текстом, інформацію можна оформити за групами і створити додаткове підменю, яке вже точно буде відображати все необхідне. Підменю може бути випадковим або відкритим.

Спадне меню

Після освоєння азів побудови горизонтального меню на CSS спадне з нього підменю можна оформити вертикальним списком. Список у розмітці потрібно зробити багаторівневим, додати додаткові теги для маркірованих списків всередину потрібного елемента. У тег слід долучити такі елементи списку:

<ul class=""menu"">

<li><a href="/"#html"">1</a></li>

<ul class=""second"">

<li><a href="/"basic"">1.1</a></li>

<li><a href="/"intensive"">1.2</a></li>

</ul>

<li><a href="/"#menu"">2</a></li>

<li><a href="/"#sub-menu"">3</a></li>

<li><a href="/"#fixed"">4</a></li>

</ul>

У css .menu li замінюється на "" .menu > li "", щоб внутрішні елементи стали вертикальними. До батьківського селектору додають відносне позиціонування, при якому елемент зсувається від меж батьківського блоку, а до дочірнього - абсолютне (повністю прибирається з потоку і координується від найближчого елемента, а якщо таких немає, то від меж браузера). Елементи з відносним позиціонуванням можуть містити в собі дочірні елементи з абсолютним позиціонуванням. Це означає, що при русі блоку з position: relative закріплені частини залишаться на своїх місцях всередині нього.

Стандартно спадна частина завжди залишається відкритою, якщо не додати до елемента відображення тільки при наведенні курсора. Для цього додатковий список ховається за замовчуванням:

.menu > li {

display: inline;

position: relative;

}

.menu .second {

position: absolute; (прив 'язка підменю до батьківського блоку)

display: none; (Сховати показ)

}

.menu > li:hover .second {(застосовується псевдоклас hover для появи списку за наведенням)

display: block;

}

Результатом буде невелике, акуратне меню.

Фіксоване меню

Для того, щоб відобразити створену у відкритому вигляді, застосовується властивість display зі значенням block за аналогією до спадного меню, але без приховування відображення. При бажанні зафіксувати можна не тільки відкритий список, а й рядок меню при прокрутці сторінки. Коли користувач пролистуватиме текст вниз, меню може завжди залишатися зверху, полегшуючи навігацію по сайту. Подібний елемент має ряд особливостей. Він дуже схожий на абсолютний, але прив 'язується тільки до браузера, випадаючи з потоку. Координувати цей елемент зручно за допомогою звичайних властивостей top/bottom, left/right. Приклад горизонтального меню зі спадними елементами, зафіксованими у переглядачі:

.menu > li {

display: inline;

position: fixed;

}

.menu .second {

position: absolute;

display: none;

}

.menu > li:hover .second {

display: block;

}

Додається властивість position зі значенням fixed, після чого меню залишається на місці під час прокрутки. З створенням такого меню впорається навіть новачок. HTML-розмітка списком - проста і зручна. Для коректного відображення стилів CSS у переглядачі рекомендується пам 'ятати про вигляд пунктів у блочний вигляд, додавання меж і координації елементів, внутрішніх і зовнішніх відступів, щоб описані пункти не були накладені один на одного. Часто забувають про додавання ширини та висоти елемента. Щоб відобразити потрібний елемент за межами видимої частини для подальшого вигляду, можна використовувати властивість float, "прибиваючи" "його до правої або лівої сторони (float: right;).