Привіт сьогоднішня публікація буде стосуватись створення такого елементу для сайту як кнопки. Кнопки які мають бути розташовані в зоні горизонтального меню.
В попередніх публікаціях які розміщені в категорії “Все про html” говорилось як створити горизонтальне меню, як створити посилання на кожну сторінку, проте назва сторінки в меню виводилась звичайним написом.
В даній публікації написано як напис посилання на сторінку розташувати не просто в зоні горизонтального меню а в середині кнопки. Сама кнопка звісно що буде розміщена в зоні для меню.
Я довгий час шукав яким способом можливо створити подібне меню для сайту. Адже такий вигляд який ви бачите на фото тяжко назвати горизонтальним меню, звичайно натиснувши на напис з підкресленим словом, відбудеться перехід на потрібну сторінку, але якщо братися створювати хоча би більш менш нормальний дизайн, то меню у вигляді кнопок просто необхідне.
⇑горизонтальне меню
Власне створите подібне меню не тяжко, тяжче було знайти спосіб як його створити. Для того щоб створити меню у вигляді кнопок потрібно лише зробити декілька дій, але перш ніж перейти до опису саме цих дій, хочу ознайомити вас про сам спосіб, звідки я його взяв.
Взяті дані з бібліотеки стилів CSS. Власне з папки де розміщені всі стилі я витягнув один файл і прописав посилання на нього. В результаті получилось меню з красиво оформленими кнопкам.
1 — Для початку відкриваємо текстовий редактор, не в кожного присутній Dreamweaver, але кожен може встановити собі Notepad++, також дуже хороши редактор, редактор який я не раз рекомендував в попередніх постах, який зможе відновити такий самий код, який був до того коли ви відкрили його в редакторі.
Дуже вигідно якщо ви вносили якісь зміни, і в вас в кінцевому підсумку після змін код перестане працювати, тоді ви спокійно собі зможите повернути попередній стан коду.
2 — Що потрібно зробити в текстовому редакторі це скопіювати спочатку даний код який знаходиться за тут і помістити рядки коду в редактор, далі дати імя файлу і розширення CSS. Як ви бачите код великий склаждається з 292 рядків.
3 — після того як ми скопіювали код, і зберегли в файл з розширенням CSS, поміщаємо цей файл в кореневий каталог папки сайту. Не потрібно файл вставляти в папку CSS.
4 — тепер потрібно підключити файл до html–сторінки, для цього прописуємо лінк
<link rel=”stylesheet” type=”text/css” href=”buttonize.min.css”>
⇑
підключити файл до html–сторінки
buttonize.min.css — як ви здогадались мабуть, це є назва файлу, ви можите дати любу іншу назву, але розширення повинно бути css , ну і прописуєте звісно не buttonize.min.css а вашу назву.
href= далі пишите назву вашого файлу.
Де прописується лінк в області між тегами <head></head> я стараюсь завжди прописувати перед закриваючим тегом </head>.
5 —З алишилось лише додати кнопку до вашого меню
<a href=”#” class=”button”>Кнопка</a>
розміщуємо цей код в то місце на сайті де ви плануєте розмістити кнопки для меню, після чого у вас появиться звичайна кнопка. Якщо у вас уже створені посилання для переходу сторінок, тоді додаєте тільки частинку до посилання.
Наприклад
до
<a href=”index.html”><strong>Головна</strong></a>
додаєтться
“#” class=”button”
<a href=”index.html””#” class=”button blue”><strong>Головна</strong></a>
де
<a href= — означає прописуємо посилання.
“index.html”— головна сторінка сайту
“#” class=”button blue” — додаємо код кнопки, якщо видалити “blue” кнопка буде сірою.
Якщо маєте бажання щоб всередині кнопки крім назви відображалась іконка, тоді замість “blue” прописуєте назву іконки, наприклад “star” або “heart” а іконку зберігаємо в папці images.
⇒”#” class=
Які підійдуть зображення, це іконки 16х16 пікселів в форматі .png
Наприклад
<a href=”href.html””#” class=”button heart”>Посилання</a> — в середині кнопки появиться сердечко.
<a href=”video.html””#” class=”button star”>Мої відео</a> — в середині кнопки появиться зірочка.
⇑Все кнопки за умови виконання всіх дій появляться на екрані
Все кнопки за умови виконання всіх дій появляться на екрані при відкриванні сторінки сайту, або просто html–сторінки, нічого складного в тому щоб додати до меню кнопки не має, звичайно для цього потрібно практикуватись.
В принципі нижче я розміщу посилання з якого ресурсу код кнопок.
http://css3framework.co.uk/v3/
На цьому все до зустрічі, власне якщо бажає дізнатись як створити сайт на мові html і css тоді можити перейти за посиланням нижче і прочитата публікації “Як створити сайт на html”