Как создать меню для сайта?

Добрый день мои друзья! На связи как обычно Серега, кто ж еще то? В этой статье мы разберем следующую тему:

Как создать меню для сайта?

Но для начала – давай немного предыстории.

Дело было вечером, делать было нечего – сидел я и маялся от скуки. Резко меня посетила одна светлая мысль:

– С хули ж ты сидишь без дела? Возьми и сделай, что-нибудь красивое, а заодно и людям добрым покажи, как сотворить оную фигню!

И тут меня проперло создать на своем сайте красивое меню. Кто еще не знает – эта хрень называется МУЗА!

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

Получилось действительно оригинально. Вот, что значит – действовать под Музой! Пишу именно с большой буквы, так как это настоящее чудо!

Да, кстати, недавно нарвался на один прикольный сайтик. Мне его меню ну просто зверски понравилось

Да и сам сайт отлично смотрится. И не удивительно, ведь ребята делают качественные сайты. Спектр работы - от сайта визитки и до разработки интернет-магазина. И работы у них приличные.

Да елки палки, на этот сайт стоит взглянуть только ради менюшки - офигенно оригинальная!

Муза у них тоже что надо, я еще и позавидую...

Ладно, давайте вернемся к нашему хитрому плану создания меню для сайта.

Результат ты можешь посмотреть в сайдбаре моего сайта – самый верх, либо нажав ниже на кнопку демо:

Ну как? Понравилось тебе мое меню?

Надеюсь что да. И если я прав – читаем дальше!

Эта статья условно разделена на две части:

1. Для лентяев или как УСТАНОВИТЬ меню на сайт?

2. Для учеников или как СОЗДАТЬ меню для сайта?

В первой части я обойдусь текстом и кодом, так как там нет ничего тяжелого. А для второй части я записал видео урок, в котором мы будем создавать меню из демки!

Шаг 1. Для начала скачиваем файл-исходник меню: скачать rg_menu.rar

Шаг 2. Извлекаем все из архива в отдельную папку!

Шаг 3. Там будет папка image и файл стилей menu_master_css.css - создаем на своем хостинге отдельную папку и копируем их туда!

Шаг 4. Открываем в редакторе файл index.html - это файл из моего архива! И там копируем строчки кода находящиеся между комментариями «Начало/конец кода меню»:

<!-- Начало кода меню -->	
	<div id="main_menu_master">
		<div class="top_button"><a href="#">Первый пункт меню</a></div>
		<div class="mid_button"><a href="#">Второй пункт меню</a></div>
		<div class="mid_button"><a href="#">Третий пункт меню</a></div>
		<div class="bot_button"><a href="#">Четвертый пункт меню</a></div>
	</div>
<!-- Конец кода меню -->

Шаг 5. Вставляем эти строчки в то место, где надо создать меню на сайте!

Шаг 6. Меняем названия пунктов меню на свои и прописываем ссылки. Ссылки прописываем вместо знака #. Если надо больше пунктов, или меньше, добавляете/удаляете строчки:

<div class="mid_button"><a href="…">…</a></div>

Шаг 7. Прописываете путь к файлу стилей - menu_master_css.css при помощи следующего кода:

<link rel="stylesheet" href="https://ваш_сайт/путь/menu_master_css.css" type="text/css">

Где https://ваш_сайт/путь/ - путь до файла menu_master_css.css

Этот код можно вставить перед кодом из шага 4.

Опять таки, дорогой друг, давай пойдем по шагам! Сразу хочу предупредить, что если ты не знаешь HTML и CSS – тебе будет много чего не понятно.

И так поехали:

1 Шаг. Скачиваем исходные файлы для работы: скачать files_rg_menu.rar

2 Шаг. Для работы с кодом необходим редактор. Поэтому если у вас его нет – можете посмотреть в статье «Что такое редактор кода?». В конце статьи есть ссылки на скачивание!

3 Шаг. После того как архив скачан, редактор кода есть – самое время смотреть обучающий видео урок: