Начинаем с того, что устанавливаем шаблон. Открываем сайт с установленным шаблоном в браузере. Просматриваем код (для этого щелкаем правой кнопкой в окне и выбираем «просмотр html кода»). Находим код меню и копируем его в ваш любимый html – редактор. В первоначальном виде код выглядит так:
HTML
Нам нужно удалить из кода все значения аттрибутов href
у ссылок, заменив их на символ «#».
HTML
Получили «очищенный» код — с ним и будем работать.Теперь нам нужно определиться все ли меню мы хотим изменить или только одно. Если только одно, нам нужно присвоить ему суффикс класса. Это делается в системе (Расширения ► менеджер модулей). Находим нужный модуль (в нашем случае «Главное меню»), открываем, и в разделе Параметры ► расширенные параметры, указываем суффикс класса — в нашем случае «_menu». Контейнер div
после добавления суффикса теперь имеет класс «moduletable_menu».
Пока мы отсюда не вышли нам нужно отключить заголовок меню, чтобы он не появлялся выше всех пунктов меню.
Идем далее. Мы хотим, чтобы наше меню выглядело вот так:
Наша задача сделать так, чтобы применив несколько правил css, наше меню, код которого мы сохранили, выглядело как меню на рисунке. Сначала уберем все отступы у всех элементов на странице и присвоим все текстовым элементам одинаковый размер шрифта:
CSS
Дело в том, что у каждого элемента по умолчанию заданы значения свойств margin
и padding
, причем в разных браузерах они разные, поэтому это обнуление свойств необходимо делать при верстке любых html - страничек, для того, чтобы потом не было сюрпризов с неизвестно откуда взявшимися пробелами и отступами у элементов.
Далее указываем следующие правила нашему списку:
CSS
Сохраняем и смотрим, что у нас получилось в браузере:
Так как мы обнули все отступы наше меню плотно пристыковано к верхней левой точке окна браузера. Такой же вид у него будет, когда мы изменим стили меню в системе, оно будет плотно прилегать к границам своего контейнера, поэтому мы применим следующее правило к div.moduletable_menu
, создав вокруг него небольшие отступы:
CSS
Теперь нам нужно поместить код сss, который мы написали в систему. Для этого в строенном редакторе редактируем файл стилей.
Расширения ► Менеджер шаблонов ► щелкаем по имени нашего шаблона (он выбран по умолчанию) и выбираем в верхнем меню пункт «Редактировать css».
Так как в тестовом шаблоне к элементам не применяются стили, файл template.css
пустой.
Копируем наш код css в этот файл во встроенном редакторе. Нажимает кнопку «сохранить»(если вы больше ничего не хотите поменять в файле стилей, если вы еще не закончили редактировать файл стилей нажимаем кнопку «применить» - дело в том, что если нажать «сохранить», система присвоит файлу стилей атрибут «только для чтения» и редактировать вы его сможете только после того как снимите этот атрибут через файловый менеджер). Затем можно увидеть результат наших стараний, нажав на ссылку «Просмотр».Вот что мы видим:
Меню до изменения | Меню после изменения |
---|---|
Как мы и хотели – изменилось только одно «Главное меню».