Блог Евгения Шматенко

В этом уроке мы рассмотрим изменение внешнего вида CSS-меню навигации с помощью JA T3 Framework 2.0. Руководство по созданию шаблона Joomla 1.7

Приветствую Вас дорогие друзья. В прошлом уроке мы научились с вами редактировать шапку (heder) шаблона, изменять внешний вид формы поиска и CPanel, а также немного разобрались с механизмом работы расширения Firebug. Надеюсь те из вас, кто только начинает путь верстальщика, с легкость преодолели предыдущие статьи, теперь приступим к следующем шагу.

Скачать дополнительные материалы вы можете <<<здесь>>>

Вот то, над чем нам сегодня придется попотеть и привести его в иной вид:

Кастомизируем навигационное меню.

Первым делом мы удалим нижнюю границу навигации в <div class="main">, изменив его значение границы на «none»:

Теперь, задаем описание нижней границы всей панели навигации #ja-mainnav. Для этого мы открываем template.css и фиксируем там идентификатор панели навигации, для того, чтобы он отобразился у нас в Firebug:

#ja-mainnav {

}

В папку image копируем из дополнительных материалов nav-image.png. Теперь задаем значения идентификатору и выводим наш градиент:

Сохраняем наш код в стилях CSS:

#ja-mainnav {
    border-bottom: 1px solid #CCCCCC;
    background: url("../images/nav-image.png") repeat-x  center top;
}

Теперь нам осталось изменить цвет текста навигации (активную и неактивную ссылки), отображение в другом цвете градиента кнопки меню, поставить разделители между менюшками и изменить фон мульти меню и цвет текста соответственно:

Редактируем CSS меню.

Зададим цвет неактивному тексту всей панели навигации.  Для этого выбираем ссылки <a id="menu455"  class="menu-item1... и задаем цвет идентификатору #ja-cssmenu li a — #ccc:

Открываем файл css.css который находится вот здесь -  ja_t3_blank\local\themes\iNove2\css\menu\. Сохраняем новые значения неактивной ссылке:

#ja-cssmenu li a {
    color: #CCCCCC;
}

Теперь разберемся с активной ссылкой. Копируем из дополнительных материалов nav_k.png в папку imadge.Переходим в браузер и выделяем нашу активную кнопку, если она у вас не активна — сделайте ее таковой.

Прописываем ее значение в css.css:

#ja-cssmenu li a.active,
#ja-cssmenu li a.active:hover,
#ja-cssmenu li a.active:active,
#ja-cssmenu li a.active:focus {
    background: url("../../images/nav_k.png") repeat-x center top;
    color: #FFFFFF;
}

И получаем отличный результат:

Сейчас реализуем разделители между кнопками меню. Для этого добавляем в css.css к уже знакомому нам #ja-cssmenu li a дополнительные значения:

border-right: 1px solid #555555;

Для того, чтобы у нас отобразился разделитель и с правой стороны, нам нужно добавить значение левого border соответствующему классу. Клас нужно найти самостоятельно и прописать его в css? лишь только тогда он появится в Firebug в левой колонке:

.menu-item0 {
border-left: 1px solid #555555;
}

Сохраняем код в css.css И вот результат добавки кода:

Теперь у нас остались суб-менюшки, ими и займемся сейчас. Немного доработал в Photoshop внешний вид активной кнопки, стало красивее не правда ли?! Ищем вот этот код, отвечающий за вывод и внешний вид субменю:

Цвет ниспадающих блоков и бекграунда:

#ja-cssmenu li ul {
    background: #FFFFFF;
    bborder: 1px solid #CCCCCC;
}

Значения ссылок:

#ja-cssmenu li ul a {
    color: #555555;
}

Вот наш результат:

Пожалуй на этом я и закончу. Наша цель достигнута — навигационное меню изменилось до неузнаваемости. Надеюсь вы узнали что-то новое для себя, обзавелись новыми навыками и практически вгрызли в гранит еще несколько строчек по созданию шаблона для CMS Joomla 1.7 с помощью JA T3 Framework 2.0

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

До встречи на страницах gradeup.org.ua.

Оглавление цикла «Цех конструирования шаблонов для Joomla»

Прежде чем задать вопрос, посетите страничку «FAG» может быть на него уже ответили!

С уважением, Ваш Евгений.