Оформление меню сайта для Joomla с использованием CSS. Урок 6

На этом уроке мы разберем оформление горизонтального и вертикального меню в шаблоне trip.

Чтобы проще было работать с кодом, я решила сделать таблицы стилей для меню в отдельном файле menu.css. Этот файл должен быть помещен в папку css шаблона.

Также, для подключения стилей меню, необходимо внести дополнительную строчку в файл index.php.

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/menu.css" type="text/css" />

рядом со строчкой подключения файла template.css

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />

Стиль оформления меню мы будем определять с помощью суффикса. Если при создании модуля меню вы не пропишите суффикс, то меню будет иметь вид списка, как у модуля «Последние новости» на скриншоте.

Для горизонтального меню обязательно нужно задать особый стиль оформления, а то вид у него будет, как на скриншоте из урока 4.

Открываем файл menu.css и прописываем в нем оформление модуля меню с суффиксом _topmenu

.moduletable_topmenu {

font:bold 14px Arial, Helvetica, sans-serif;

text-transform: uppercase;

text-align:center;

background-color:#004f64;

height:36px;

border-bottom:4px solid #fff;}

Оформление списка меню

.moduletable_topmenu ul {

margin-top:10px;

float:left;

left:50%;

position:relative; }

Оформление блоков (пунктов) списка меню.

.moduletable_topmenu ul li {

float:left;

left:-50%;

list-style:none;

position:relative;

border-left:2px ridge #fff;

border-right:2px ridge #fff;

margin-left:-2px;}

Оформление ссылок в блоках списка меню.

.moduletable_topmenu ul li a {

display:block;

padding:0 15px;

text-decoration:none;

color:#fff;}

Ссылки при наведении

.moduletable_topmenu li a:hover{

display:block;

color:#98cfdd;

text-decoration:underline;}

Я предлагаю задать вам свой особый стиль оформления и для вертикального меню сайта. Как я писала выше, если при создании модуля вертикального меню, вы не пропишите суффикс, то меню будет иметь вид обыкновенного списка.

Оформление модуля вертикального меню с суффиксом _menu

.moduletable_menu {

font: bold 12px Arial, Helvetica, sans-serif;

text-transform: uppercase;

text-align:left;

padding:0px;

margin:5px;}

В отличии от горизонтального меню, где, как правило, не выводится заголовок модуля, вертикальное меню часто имеет заголовок, поэтому пропишем стиль его оформления.

.moduletable_menu h3{

font: bold 12px Arial, Helvetica, sans-serif;

padding:5px 0 5px 10px;

color:#fff;

background-color:#004f64;}

Оформление блоков списка

.moduletable_menu ul li {

list-style:none;}

Оформление ссылок в блоках меню

.moduletable_menu ul li a {

display:block;

padding:10px;

text-decoration:none;

color:#004f64;

border-bottom:2px dotted #004f64;}

Ссылка при наведении

.moduletable_menu li a:hover{

display:block;

text-decoration:underline;

color:#fe1919;}

Вот мы и закончили оформление таблиц стилей в шаблоне trip. В результате мы имеем полный установочный комплект шаблона для Joomla 3.0 и 2.5.

Вы можете скачать установочный комплект шаблона TRIP.

Дальнейшая работа над шаблоном не будет носить столь глобального характера, скорее это будут мелкие доработки для удобства пользования.

В следующем уроке хочу вам рассказать о симбиозе нашего шаблона TRIP и модуля представления контента News Show Pro GK4. Этот вариант пока возможен только для Joomla 2.5.


 

Комментарии 

 
# Алексей 31.10.2013 08:17
Я заранее прошу прощения, но даже после установки полностью скачанного шаблона с вашего сайта, на главной странице вижу не сайт а просто белиберду какую-то, меню вроде создавали горизонтальное а выходит все равно вертикальное. И как его поменять сейчас?
Ответить | Ответить с цитатой | Цитировать
 
 
# Алексей 05.11.2013 11:42
Все разобрался, видимо просто проблема в том, что уже созданные меню которые по умолчанию в джумле нельзя подключить, решил проблему созданием новых меню с добавлением суффиксов и все заработало. Теперь другая проблема возникла. Модуль поиска наполовину закрыт модулем меню. Не пойму где косяк и как исправить. Прошу помощи.
Ответить | Ответить с цитатой | Цитировать
 
 
# Алмас 19.01.2014 20:04
Расскажите пожалуйста как поставить в горизонтальное меню свой особенный шрифт, как здесь http://joomlaforum.ru/index.php/topic,133343.0/all.html
Ответить | Ответить с цитатой | Цитировать
 
 
# Суровый парнишка 15.03.2014 10:32
Цитирую Алмас:
Расскажите пожалуйста как поставить в горизонтальное меню свой особенный шрифт, как здесь http://joomlaforum.ru/index.php/topic,133343.0/all.html

Яндекс тебе в помощь! Мне за 5 минут помогло)
Ответить | Ответить с цитатой | Цитировать
 
 
# Alex 05.05.2014 23:37
Добрый день,проблема аналогичная описанной в первом сообщении. Т.е. после установки шаблона (сначала сделанного самостоятельно, а потом предложенного Вами) меню отображается в виде списка, и никакие создания новых меню и новых модулей не помогают. Не подскажите в чем может быть загвоздка?
Ответить | Ответить с цитатой | Цитировать
 
 
# Alex 05.05.2014 23:41
И еще один вопрос в блоке поиска по сайту (уже в красивом варианте со значком лупы) отображается ненужный символ "0". Не подскажите как его убрать. Он отображается не в том поле, в которое вводится текст для поиска, а в том месте где раньше было второе слово "serch"
Ответить | Ответить с цитатой | Цитировать
 
 
# Ольга 20.12.2014 18:49
Alex, добрый день! как вы решили вопрос с 0 рядом с блоком поиска?
Ответить | Ответить с цитатой | Цитировать
 
 
# Alex 05.05.2014 23:43
:lol: В смысле, подскажите как его убрать, в каком файле или месте кода его искать?
Ответить | Ответить с цитатой | Цитировать
 
 
# Прохожий 04.07.2014 07:44
И все же было не полениться и добавить внизу уроков хотя бы image файлы. А то качать весь шаблон, как-то многовато.
Ответить | Ответить с цитатой | Цитировать
 
 
# Игорь 06.09.2014 14:13
Спасибо. У вас лучшие уроки.
Ответить | Ответить с цитатой | Цитировать
 
 
# Даниил 07.09.2014 21:17
Вот создали мы menu.css, написали стили, прописали его в index.php, указали суффикс класса модуля, всё равно оно в виде списка. Но если скопировать содержание menu.css в template.css, то все работает. В чем причина то?
Ответить | Ответить с цитатой | Цитировать
 
 
# Даниил 07.09.2014 21:26
Разобрался.
Автору спасибо, ценная информация.
Ответить | Ответить с цитатой | Цитировать
 
 
# Иван 21.09.2014 22:53
меню все равно в виде списка, что делать?
Ответить | Ответить с цитатой | Цитировать
 
 
# Dmitry 30.03.2016 09:03
Откатываться на версию Джумлы, что у авторши. В этом вся Джумла, когда по ней кто-либо хочет писать блоги))
Ну, еще можно поискать по ченджлогам 3.0>3.x, что там накостылили в самой cms, авторы. Я так и не уловил.
Вывод: Не использовать быдло-cms, а учиться все делать самому.
Ответить | Ответить с цитатой | Цитировать
 
 
# Алексей 18.10.2016 20:01
Самому это как? С нуля свой сайт, включая PHP, MySQL и т.д.? И сколько займёт времени на изучение всего этого? Не говорите ерунды, всё для чего то предназначено. Ну напишите свою ось и сидите в ней, а потом уже советуйте всякую фигню.
Ответить | Ответить с цитатой | Цитировать
 
 
# Денис 08.10.2014 21:34
Доброго времени суток! У меня следующая проблема: из верхнего меню не выпадают подменюшки - Основные пункты отображаются, но при наведении\клике на них ничего не происходит... подскажите как лечить?
Ответить | Ответить с цитатой | Цитировать
 
 
# Денис 11.10.2014 14:18
Цитирую Денис:
Доброго времени суток! У меня следующая проблема: из верхнего меню не выпадают подменюшки - Основные пункты отображаются, но при наведении\клике на них ничего не происходит... подскажите как лечить?

Теперь меню начало выезжать по щелчку, но при этом съезжает шаблон... как сделать чтоб она была поверх текста?
Ответить | Ответить с цитатой | Цитировать
 
 
# Сергей 29.01.2015 12:49
Огромное спасибо за уроки!
Вот только надо 2-х уровневое меню. Никак не получается.
Подскажите, в каком направлении копаться...
Ответить | Ответить с цитатой | Цитировать
 
 
# sset 22.12.2015 09:31
Цитирую Денис:
Цитирую Денис:
Доброго времени суток! У меня следующая проблема: из верхнего меню не выпадают подменюшки - Основные пункты отображаются, но при наведении\клике на них ничего не происходит... подскажите как лечить?

Теперь меню начало выезжать по щелчку, но при этом съезжает шаблон... как сделать чтоб она была поверх текста?

Цитирую Денис:
Доброго времени суток! У меня следующая проблема: из верхнего меню не выпадают подменюшки - Основные пункты отображаются, но при наведении\клике на них ничего не происходит... подскажите как лечить?

Аналогично... подпункты меню при клике не всплывают а просто появляются со сдвигом всей страницы?!
Ответить | Ответить с цитатой | Цитировать
 
 
# Dmitry 29.03.2016 21:42
Работает лишь, если выставить префикс moduletable_top menu, но никак не _topmenu. Joomla 3.4. И то - нужно спереди обязательно вбить пробел и мени рисуется кашей. То есть, рисуется оформление шрифтов, цвета, но вот этого "nav_pills" эффекта получить никак не удается.
Ответить | Ответить с цитатой | Цитировать
 
 
# Алексей 18.10.2016 20:02
Спасибо огромное!!! Всё работает!!!
Ответить | Ответить с цитатой | Цитировать
 
Главная Как сделать шаблон с нуля для Joomla 2.5 и Joomla 3.0 Оформление меню сайта для Joomla с использованием CSS. Урок 6

Интересные статьи

Как сделать шаблон с нуля для Joomla 2.5 и 3.0

Как сделать шаблон с нуля для Joomla 2.5 и 3.0

На горизонте замаячила Joomla 3.0. За разработчиками этого движка трудно угнаться, но мы попытаемся. Будем разбираться как сделать шаблон для Joomla 2.5 и 3.0 с нуля. Для тех кто смутно догадывается ч...

Подробнее

Свой бизнес в Интернете или как заработать на видео уроках

Свой бизнес в Интернете или как заработать на видео уроках

Если вы хотите зарабатывать серьезные деньги на своем интернет ресурсе, то самый лучший способ реализовать свою цель – это создавать полезные для людей инфопродукты, в частности видео-уроки. Народ на...

Подробнее

Как сделать интернет - магазин

Обсуждая создание собственного бизнеса в Интернете, невозможно обойти тему интернет - магазинов. Собственное дело – мечта, пожалуй, каждого молодого человека в нашей стране, никто не хочет работать на...

Подробнее

Как заработать на Youtube

Как заработать на Youtube

В настоящее время YouTube является самой крутой интернет - площадкой для бизнеса. Изначально сервис YouTube создавался как сайт, на который пользователи могли загружать различные видео-ролики  дл...

Подробнее
Каталог@Mail.ru - каталог ресурсов интернет