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