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

2 ноября 2014 г. Просмотров: 393 Инструкции
Информационные технологии развиваются с каждым днем. А то, что раньше казалось чем-то недосягаемым, сегодня уже доступно практически каждому обывателю. И совсем необязательно обладать сверхъестественными способностями и знаниями, чтобы сделать собственный сайт. А если речь идет только о том, чтобы добавить на свой ресурс меню, то здесь может справиться даже школьник.
Создать сайт самостоятельно с Wix.com

Вам понадобится

  • Компьютер с подключением к интернету

Инструкция

  • Зайдите на сайт сервиса PureCSSMenu.
    Здесь вы увидите визуальный редактор, с помощью которого быстро и легко сможете сделать меню для любого сайта.
  • Чтобы перейти на страницу, где выложены шаблоны меню, нажмите на кнопку «Templates», которая находится слева. Затем вам необходимо выбрать понравившейся шаблон и щелкнуть по нему. В окне «Preview» вы увидите реально работающее меню, которое создано с помощью таблиц каскадных стилей.
  • Просмотрите каждый из предложенных шаблонов, чтобы выбрать наиболее подходящий для вашего сайта. Если цвет и шрифт, понравившегося вам по стилю меню, не подходят к цветовой гамме сайта, то эти параметры вы можете поменять нажав на вкладку «Parametrs».
  • Измените цвет и шрифт с помощью HTML кода или выберете его из предлагаемой ресурсом палитры, щелкнув на понравившейся оттенок.
  • Теперь создайте структуру меню для своего сайта. Для этого нажмите кнопку «Items». В открывшейся вкладке вы увидите кнопку с большим плюсиком и надписью «Add Item». Нажмите на эту кнопку, и в конце меню будет добавлен новый пункт. Чтобы вставить новый пункт в середину меню, выделите вкладку после которой должно быть добавление и нажмите кнопку с надписью «Add Next Item».
  • Чтобы добавить вложенный пункт в выпадающее меню нажмите кнопку с надписью «Add Subitem», предварительно выделив тот пункт меню, который будет содержать новую вкладку. Если вы хотите удалить какой-то из пунктов, то выделите его и нажмите кнопку «Remove Item».
  • В области «Item Parameters» необходимо заполнить все поля для корректной работы нового меню. В поле «Text» впишите название пункта меню, в поле «Link» впишите адрес страницы, на которую будет происходить переход после нажатия этой кнопки. Чтобы выбрать каким способом должна открываться страница, в поле «Target» поставьте значение «_self» или «_blank». При первом варианте страница будет открываться в этом же окне, при выборе функции «_blank» - в новом.
  • Теперь вам нужно вставить код созданного меню в ваш сайт. Для этого нажмите на кнопку «Download», которая находится в правом нижнем углу, и выберите папку на своем компьютере, в которую будет сохранен архив purecssmenu-com.zip. После сохранения файла распакуйте этот архив и откройте файл purecssmenu.html, в котором содержится код вашего меню. Скопируйте этот код и вставьте в файл шаблона вашего сайта.
  • Оцените статью!