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

Рубрика: Секреты верстки;
Метки:

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

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

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

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

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


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


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

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

Тренинг по вёрстке сайта на HTML5 и CSS3

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

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

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

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

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

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

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

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

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


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

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

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

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


Как установить меню на сайт?


Шаг 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="http://ваш_сайт/путь/menu_master_css.css" type="text/css">

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

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

    • папка image и файл стилей menu_master_css.css должны находиться в одном каталоге!

    • Ширина меню составляет 268px – не больше не меньше!

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

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

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

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

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

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

Видео урок по созданию меню для сайта!

Так же можно скачать это видео к себе на компьютер:

Скачать с народа в высоком качестве.

    • Если показывает кракозяблы – проверяй кодировку файла – должен быть в utf-8.

если материал понравился – нажми на любую кнопку +1 (желательно на все)!
Комментариев: 37 RSS

Тренинг по вёрстке сайта на HTML5 и CSS3
Оставьте комментарий!

Вы можете войти под своим логином или зарегистрироваться на сайте.

(обязательно)

Комментариев: 37
  •  Серёга | 8 августа 2011 в 17:21:35

    Если кому надо будет другая расцветка кнопок - стучите в комменты.

    PSD-шник я нечаянно снес, но на фотошопе смогу качественно заменить цвет без проблем!

  •  Серёга | 9 августа 2011 в 10:31:34

    Что то они точно хотели grin

  •  Vladimir Sorokin | 9 августа 2011 в 21:41:50

    Менюшка и правда очень даже очень!!! Спасибо, взял на заметку.

  •  Серёга | 9 августа 2011 в 23:36:51

    Пожалуйста smile

  •  Александр | 11 августа 2011 в 20:33:55

    Супер мне очень нравится!!!

  •  Серёга | 11 августа 2011 в 20:50:57

    Спасибо Саша!

  •  Наталья | 17 августа 2011 в 23:50:21

    Спасибо Сережа!!!как всегда, нужный урок!еще и на почту сообщаете...мол "на тебе человек, смотри, пробуй"

  •  Сергей | 19 августа 2011 в 21:26:21

    Здравствуйте, Сергей! А могли бы Вы подсказать, как на этом движке можно прикреплять новости к отдельным страницам, которые можно создать в шапке ( на примере с Вашим сайтом - Шаблоны для Макссайт ЦМС. Когда ее открываешь, то в нем по-порядку следуют новости). У меня получается только для рубрик, но допустим для более удобной навигации хотелось бы, чтобы в шапке было страница. Пример: у меня на сайте, посвященному автомобилям присутствуют рубрики моделей автомобилей, но я хотел бы создать в шапке такие страницы, как - Технич характеристики, новости и т.д. Подскажите, пожалуйста, как это сделать. Спасибо!

  •  Серёга | 20 августа 2011 в 00:24:40

    Привет. НЕ совсем понятно что надо???

    Карусель постов?

    •  nika50 | 20 августа 2011 в 07:54:47

      Нет, не карусель постов, я просто хотела у тебя проконсультироваться по поводу плагинов по безопасности сайта. в последнее время у меня стали появляться комменты и ссылки на английском с непереводимой абракадаброй, причем все только на 1 статью "Сбор денег на свадьбе",(причем это даже не статья, а сценка шуточная в стихах), я их удаляю, появляются снова, запретила ссылки и комменты к этой статье - так теперь регистрируются пользователи с вымышленными адресами - при попытке отправить им письмо сервис отвечает - невозможно, такого адреса нет. Вот я и думаю - что это? Атака спама? или что-то еще неприятное? Спасибо!

  •  Владимир | 27 марта 2012 в 14:10:12

    Привет, Серега! Замута хорошая про меню. Я хочу вынести стандартное меню, которое по горизонтали распологается в дефолтовом шаблоне в правую сторону сайта. Чтобы меню было вертикальным и висело справа от текста статей. Это можно сделать без плясок с бубнами? В общем сейчас мучаю сам smile Попробую без помощи сделать!

  •  Серёга | 29 марта 2012 в 09:31:49

    Там в принципе ничего сложного нету, попробую записать урок на эту тему.

  •  Євген | 20 сентября 2012 в 15:50:09

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

    Бажаю подальших успіхів.

    З повагою, Сугоняко Євген Олександрович.

    Дякую.

  •  Серёга | 20 сентября 2012 в 23:20:54

    Спасибо smile

  •  Артём Порубов | 30 октября 2012 в 03:46:25

    Спасибо огромное, я неделю как поставил Махsite, почти прописался здесь!

    Менюшка получилась, я её нарисовал и уменьшил под сайтбарsmile

  •  dieseliii | 8 февраля 2013 в 13:40:42

    картинки шаблон положил в паку (meny_saita)

    вот что получилось ошибка гдето а где не найду менюшка не работает помогите исправить

    #main_menu_master {width: 268px; margin: 0px; padding: 0px; font-family:Verdana; font-size: 16px; text-align: center; line-height: 30px;}

    #main_menu_master a { display: block; color: white; text-decoration: none;}

    .top_buttom a {background: url(http://www.bv2000.ho.ua/meny saita/image/bt.png); height:30px; width: 238px; padding: 10px 15px 6px 15px;}

    .mid_buttom a {background: url(http://www.bv2000.ho.ua/meny saita/image/bm.png); height:30px; width: 238px; padding: 7px 15px;}

    .bot_buttom a {background: url(http://www.bv2000.ho.ua/meny saita/image/bb.png); height:30px; width: 238px; padding: 6px 15px 10px 15px;}

    .top_buttom a:hover{background: bottom;}

    .mid_buttom a:hover{background: bottom;}

    .bot_buttom a:hover{background: bottom;}

    #main_menu_master {width: 268px; margin: 0px; padding: 0px; font-family:Verdana; font-size: 16px; text-align: center; line-height: 30px;}

    #main_menu_master a { display: block; color: white; text-decoration: none;}

    .top_buttom a {background: url(http://www.bv2000.ho.ua/meny saita/image/bt.png); height:30px; width: 238px; padding: 10px 15px 6px 15px;}

    .mid_buttom a {background: url(http://www.bv2000.ho.ua/meny saita/image/bm.png); height:30px; width: 238px; padding: 7px 15px;}

    .bot_buttom a {background: url(http://www.bv2000.ho.ua/meny saita/image/bb.png); height:30px; width: 238px; padding: 6px 15px 10px 15px;}

    .top_buttom a:hover{background: bottom;}

    .mid_buttom a:hover{background: bottom;}

    .bot_buttom a:hover{background: bottom;}

    меню сайта

  •  dieseliii | 8 февраля 2013 в 14:05:32

    Отсутствуют сами кнопки надписи кнопок и фон есть

  •  Серёга | 8 февраля 2013 в 14:14:18

    Если отсутствуют картинки - значит неправильный путь прописали.

    И вообще - у вас в пути папка с пробелом... meny saita, а должна быть meny_saita

  •  dieseliii | 8 февраля 2013 в 17:35:16

    да все нашол спасибо в примере на сайте

    Первый пункт меню

    а на видео

    Первый пункт меню

  •  dieseliii | 8 февраля 2013 в 17:46:17

    Да еще подскажите ка вставить созданное меню в сайт,что прописать .Заранее благодарю!!!

  •  dieseliii | 8 февраля 2013 в 20:44:08

    Все втулил СПС

  •  dieseliii | 8 февраля 2013 в 20:51:44

    Да не все так просто менюшка прилипла к верху сайта и опустить не удется в чем причина ?

  •  dieseliii | 9 февраля 2013 в 14:19:28

    Серега подскажи плиз меня отображается в верхху сайта а не там где я его вставил подскажи как исправить.Заранее благодарен.

  •  Серёга | 9 февраля 2013 в 14:40:55

    я так не подскажу.

    Мне необходимо видеть страницу с менюшкой.

    Причин может быть много.

  •  dieseliii | 9 февраля 2013 в 19:38:48

    так я ссылаюсь на менюшку ,встамил там где мне нужно

    так выглядит index.html

    Первый пункт меню

    Второй пункт меню

    Третий пункт меню

    Четвертый пункт меню

    так вылядит CSS

    #main_menu_master{width: 268px; margin: 0px; padding: 0px; font-family:Verdana; font-size: 16px; text-align: center; line-height: 30px;}

    #main_menu_master a{ display: block; color: white; text-decoration: none;}

    .top_button a {background: url(image/bt.png); height:30px; width: 238px; padding: 10px 15px 6px 15px;}

    .mid_button a {background: url(image/bm.png); height:30px; width: 238px; padding: 7px 15px;}

    .bot_button a {background: url(image/bb.png); height:30px; width: 238px; padding: 6px 15px 10px 15px;}

    .top_button a:hover{background: url(image/bt.png) bottom;}

    .mid_button a:hover{background: url(image/bm.png) bottom;}

    .bot_button a:hover{background: url(image/bb.png) bottom;}

    А вот ссылка что получается http://www.bv2000.ho.ua/PROBA_6.shtml

    Я ПРОСТО НУБАС НО ХОЧУ РАЗОБРАТЬСЯ ЕСЛИ НЕ ОТВЕТИШ НЕ ОБИЖУСЬ ))))))))))))

  •  dieseliii | 9 февраля 2013 в 19:40:59

    Блин браузер не хочет отображать HTML код в писме

  •  Серёга | 10 февраля 2013 в 11:57:56

    Мне не код нужен. А ссылка на страницу, где расположено меню.

    Я хочу просмотреть все в живом режиме. Так как не до конца понимаю вашу проблему.

  •  dieseliii | 12 февраля 2013 в 17:03:58

    Привет вот ссылка http://www.bv2000.ho.ua/PROBA_2.shtml все получилось СПАСИБО но теперь хотел вынести меню в другую папку с помощю (!--#include virtual="meny_saita/index1"--) чтобы менять меню сразу на всех страницах а оно отображается выше страницы а не там где ставлю.Если есть минуточка взгляни в интернете ничего похожего не нашол Заранее благодарен за терпение ,)))))))))

  •  Юлия | 16 февраля 2013 в 22:12:09

    Сергей,помогите нам пожалуйста сделать школьный сайт

  •  Елена | 23 марта 2013 в 03:19:53

    Юлия, напишите, пожалуйста, на ящик admin@master-css.com,

    в письме изложите свою просьбу подробно, какой именно сайт вам нужен.

  •  Игорь | 21 мая 2013 в 23:02:54

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

  •  Серёга | 21 мая 2013 в 23:29:11

    Знание верстки решает практически любые проблемы оформления сайта wink

  •  ЕЛЕНА | 20 ноября 2013 в 13:35:00

    СПАСИБО ОГРОМНОЕ, Я С ОКТЯБРЯ НАЧАЛА ДЕЛАТЬ САЙТ НАШЕГО ДЕТСКОГО САДА. МАТЕРИАЛА МНОГО, В ПРОСТОЕ МЕНЮ НЕ ПОМЕЩАЕТСЯ. СПАСИБО

  •  Александр | 4 февраля 2016 в 23:30:02

    Прочитал, вашу статью, вот сижу и думаю как же вы попали в ТОП-10. Ведь реально вы не раскрыли темы как сделать меню. Воткнуть код помойму любой сможет. Вот сравните урок http://www.sdcvoy.ru/etapy-sozdaniya-sajta/sozdanie-vertikalnogo-menyu-sajta/

    •  Серёга | 7 апреля 2016 в 13:56:28

      Есть же видеоурок в статье как я это сделал.

  •  Кирилл | 13 апреля 2016 в 00:12:25

    Раз уж есть урок по созданию менюшек, то спрошу тут.

    Какого размера необходимо делать кнопки в меню, учитывая, что меню горизонтальное, а кнопки квадратные(круглые)картинки, так чтобы кнопки и мелкими не выглядели, и пол экрана не занимали?