Как оформить меню на сайте?

2 ноября 2014 г. Просмотров: 470 Инструкции
Меню используется для облегчения навигации пользователю по разделам на сайте. Чтобы привлечь внимание посетителя, меню должно быть функциональным, удобным в использовании и при этом сочетаться с дизайном всего ресурса.
Создать сайт самостоятельно с Wix.com

Инструкция

  • Перед созданием меню определитесь с его типом. Вы можете создать выпадающий горизонтальный или вертикальный блок, который будет показан пользователю при наведении на него курсором мышки.
    При выборе того или иного меню вы можете руководствоваться тем, насколько посетителям будет удобно его применять и как оно будет сочетаться с дизайном.
  • После выбора типа меню откройте ваш файл страницы при помощи любого текстового редактора, который вы используете для редактирования HTML. Перейдите к нужному участку кода, в который вы хотите вставить ваш элемент интерфейса.
  • После этого сделайте список опций, создав блок и сделав нумерованный список с присвоенными к нему id. Например:
    • Ссылка 1
    • Ссылка 2
    • Ссылка 3
    В данном примере был создан маркированный список из трех элементов, который помещен в слой div с присвоенным идентификатором panel.
  • Перейдите в блок раздела вашей страницы и создайте соответствующую меню каскадную таблицу стилей. Если вы хотите создать горизонтальное меню, для полученного списка вы можете включить атрибут inline:#panel ul li { display: inline; }
  • Чтобы создать горизонтальную линию по всей длине страницы вы можете воспользоваться следующим кодом:#panel ul { margin-left: 0; padding: 2px 0; }
  • Затем вы можете сделать визуальное разделение на прямоугольники:#panel ul li a { margin-left: 3px; border: 1px; padding: 2px 3px; background: blue; }Данный код задает отступы текста от элементов границы через атрибуты margin-left и padding, а также присваивает фоновый цвет для каждого из элементов списка. В данном примере цвет указан blue, однако изменить вы его можете по собственному усмотрению.
  • Чтобы указать на пункт текущей страницы, которая выбрана во вкладке, задайте классу open соответствующие параметры:#menu ul li a#open { background: red; border-bottom: 1px; }Текущая страница, выбранная в панели, теперь будет отображаться красным цветом.
  • Сохраните изменения в файле и проверьте работоспособность написанного кода, открыв вашу страницу через браузер. Чтобы задать дополнительные параметры отображения, вы всегда можете добавить код CSS или HTML для усовершенствования внешнего вида объекта.
  • Оцените статью!