Post_75aПривіт сьогоднішня публікація буде стосуватись створення такого елементу для сайту як кнопки. Кнопки які мають бути розташовані в зоні горизонтального меню.

В попередніх публікаціях які розміщені в категорії “Все про html” говорилось як створити горизонтальне меню, як створити посилання на кожну сторінку, проте назва сторінки в меню виводилась звичайним написом.

В даній публікації написано як напис посилання на сторінку розташувати не просто в зоні горизонтального меню а в середині кнопки. Сама кнопка звісно що буде розміщена в зоні для меню. 

Я довгий час шукав яким способом можливо створити подібне меню для сайту. Адже такий вигляд який ви бачите на фото тяжко назвати горизонтальним меню, звичайно натиснувши на напис з підкресленим словом, відбудеться перехід на потрібну сторінку, але  якщо братися створювати хоча би більш менш нормальний дизайн, то меню у вигляді кнопок просто необхідне.

batton1

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

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

Взяті дані з бібліотеки стилів CSS. Власне з папки де розміщені всі стилі я витягнув один файл і прописав посилання на нього. В результаті получилось меню з красиво оформленими кнопкам.  

Далі дії які потрібно зробити для того щоб додати кнопки в меню.

1 — Для початку відкриваємо текстовий редактор, не в кожного присутній Dreamweaver, але кожен може встановити собі Notepad++, також дуже хороши редактор, редактор який я не раз рекомендував в попередніх постах, який зможе відновити такий самий код, який був до того коли ви відкрили його в редакторі.

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

2 — Що потрібно зробити в текстовому редакторі це скопіювати спочатку даний код який  знаходиться за тут і помістити рядки коду в редактор, далі дати імя файлу і розширення CSS. Як ви бачите код великий склаждається з 292 рядків.

3 — після того як ми скопіювали код, і зберегли в файл з розширенням  CSS, поміщаємо цей файл в кореневий каталог папки сайту. Не потрібно файл вставляти в папку CSS.

4 — тепер потрібно підключити файл до html–сторінки, для цього прописуємо лінк

 <link rel=”stylesheet” type=”text/css” href=”buttonize.min.css”>

batton2

підключити файл до 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.

batton3

⇒”#” class=

Які підійдуть зображення, це іконки 16х16 пікселів в форматі .png

Наприклад

<a href=”href.html””#” class=”button heart”>Посилання</a> — в середині кнопки появиться сердечко.

<a href=”video.html””#” class=”button star”>Мої відео</a> — в середині кнопки появиться зірочка.

meniu3

⇑Все кнопки за умови виконання всіх дій появляться на екрані

Все кнопки за умови виконання всіх дій появляться на екрані при відкриванні сторінки сайту, або просто html–сторінки, нічого складного в тому щоб додати до меню кнопки не має, звичайно для цього потрібно практикуватись.

В принципі нижче я розміщу посилання з якого ресурсу код кнопок.

http://css3framework.co.uk/v3/

На цьому все до зустрічі, власне якщо бажає дізнатись як створити сайт на мові html і css тоді можити перейти за посиланням нижче і прочитата публікації “Як створити сайт на html”