Як створити меню на сайті

Відео: CSS меню - для новачка, вчимо швидко і просто

Красиве, зручне і функціональне меню - запорука популярності і привабливості сайту для відвідувачів. Без зрозумілого і стильного меню сайт не буде володіти гідною навігацією, інтуїтивно зрозумілою навіть тій людині, яка вперше відвідав вашу сторінку.
Як створити меню на сайті
Відкрийте програму і перегляньте список стилів кнопок в нижньому лівому кутку вікна. Виберіть для себе відповідний стиль, клікнувши на нього лівою кнопкою миші. Скопіюйте з`явився код в окремий текстовий файл, а потім клацніть на пункт Add Item, щоб активувати кнопку.
2
Тепер займіться її настройками - в правій панелі відкрийте вкладку Button і вкажіть бажаний шрифт для тексту кнопки, його колір і розмір. Потім дайте посилання в розділі Link на ту сторінку, на яку веде натискання кнопки (наприклад, index.php).
3
Якщо ви хочете, щоб при наведенні на кнопку курсору, з`являвся спливаючий текст-підказка, у вкладці Hint введіть потрібний текст для прояву. У вкладці Icon вкажіть іконку, яка повинна бути поруч з текстом- налаштуйте вирівнювання (наприклад, по лівому краю екрану) і зніміть галочку у вкладці Stick to text.
4
Після цього відкрийте розділ Button style і зніміть галочку з пункту Auto size. Вкажіть фіксовані розміри ваших кнопок. Після цього відредагуйте стиль меню - вкажіть колір контуру, і в розділі Misc відзначте бажані ефекти (прозорість, плавне прояв, тінь, і так далі).
5
Повторюючи всі вищевказані дії, створюйте всі інші пункти меню, налаштовуючи кнопки. Щоб зробити на кожну кнопку додаткове підменю, натисніть Add Subitem. Кожен створений пункт і кожну створену кнопку налаштуйте аналогічно першої.
6
Після того як меню - горизонтальне або вертикальне - створено, зайдіть в меню програми та натисніть на пункт "Вставити в веб-сторінку", Зазначивши, що ви хочете тільки згенерувати код. Вкажіть шлях до папки menu images, в якій будуть збережені графічні елементи меню в форматі png.
7
Для того щоб встановити створене меню на ваш сайт, скопіюйте в кореневий каталог папку з зображеннями, а збережений на початку код встановіть на головну сторінку.



Увага, тільки СЬОГОДНІ!
Оцініть, будь ласка статтю
Всього голосів: 200