275

Красиве бокове меню на CSS

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

І так, бувши лиш у планах фіглі навіть не підозрювали, що стануть блогом, і використовувались у якості експеременту. Писалися вони з нуля, але до одиниці так і не дойшли. З того часу єдине, що залишилося, то це – меню. Сайт на той час був статичний, тому потрібно було зробити красиве і не обов’язково під розширення меню. Головне щоб не настільки просте як – просто список і не на стільки складне як роблять на java скриптах.

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

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

Ну а тепер детальніше і з кодом. Меню можна розділити на дві гілки, це буде – CSS код, друге – html розмітка + картинка яка використовується. У цьому прикладі таке мальовидло:

красиве цсс меню

Перш за все, пишу CSS інструкції, а далі поясню що й до чого:

На перший погляд – багато буков і нічого не зрозуміло, але все насправді дуже легко. І я зараз все розпишу:

<style type = “text / css”> – власне відкриваємо наш CSS код.

#navigation – задаємо назву для прікруткі.

border-right:0px solid#999; padding: 10px 0px; width: 143px; – тут параметри відображуваного блоку.

#navigation a – параметри тегів а, тобто посилань.

display: block; – відображення блоками.

background: url(menu_2.gif) no-repeat; – задаємо шлях до графічного файлу і забороняємо дублювати.

height: 57px; – висота блоків.

А тепер увага, найскладніше в цьому меню, але дуже просто і логічно.
#navigation a.link1: hover {background-position:-143px 0px;} – Як видно, ми задаємо свою назву кожному лінку, в фігурних дужках пишемо позицію в пікселях якою з малюнка відображатиме браузер і якою замінювати при наведенні курсору. Це можна дізнатися за допомогою фотошопу або будь-якою іншою програмкою. Якщо з цим труднощі, можна використовувати кустарний спосіб –  метод тику, або ж – пальцем в небо, але не раджу, тому що легко заплутатися.

Тепер же код html, для браузерів:

Ну тут вже нічого складного, одне лише <ul id=”navigation”> – прикрутка CSS і class = “link1” – назви лінка який використовуємо. Готовий файл меню, для експериментування можна скачати тут.

Це все, до наступних публікацій 🙂

Читайте також: