^

Вход/Регистрация

Пользователи

Блоги пользователей

Кто на сайте

rtb

Шаблон Joomla 3 с нуля (Ч.5)

Оформление меню сайта для Joomla

Чтобы проще было работать с кодом, нужно сделать таблицы стилей для меню в отдельном файле menu.css. Этот файл должен быть помещен в папку css шаблона.
Стиль оформления меню мы будем определять с помощью суффикса. Если при создании модуля меню вы не пропишите суффикс, то меню будет иметь вид списка.
Для горизонтального меню обязательно нужно задать особый стиль оформления и, кроме того прописать в настройках (Расширения-менеджер модулей-Main Menu) модуля Main Menu следующее:

Суффикс класса меню    nav_pills с пробелом перед nav
и поставить модуль в позицию  uzer2.


@charset "utf-8";

/*gorizontalnoe menu с sufiksom css-klassa modulya  _topmenu */
/*oformlenie module menu*/
.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;
}
/*oformlenie spiska menu*/
.moduletable_topmenu ul {
margin-top:10px;
float:left;
left:50%;
position:relative;
 }
/*oformlenie spiska menu*/
.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;
}
/*oformlenie ssylok v menu*/
.moduletable_topmenu ul li a {
display:block;
padding:0 15px;
text-decoration:none;
color:#fff;
}
/*ssylka pri navedenii*/
.moduletable_topmenu li a:hover{
display:block;
color:#98cfdd;
text-decoration:underline;
}

/*vertikalnoe menu с sufiksom _menu */
.moduletable_menu {
font: bold 12px Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-align:left;
padding:0px;
margin:5px;
}

/*оoformlenie zagolovka menu */
.moduletable_menu h3{
font: bold 12px Arial, Helvetica, sans-serif;
padding:5px 0 5px 10px;
color:#fff;
background-color:#004f64;
}

/*оoformlenie bloka spiska v menu */
.moduletable_menu ul li {
list-style:none;
}

/*оoformlenie bloka ssylki v menu*/
.moduletable_menu ul li a {
display:block;
padding:10px;
text-decoration:none;
color:#004f64;
border-bottom:2px dotted #004f64;
}

/*ssylka pri navedenii*/
.moduletable_menu li a:hover{
display:block;
text-decoration:underline;
color:#fe1919;
}

j3

Меню готово. Вот и закончено оформление таблиц стилей в шаблоне shab1. В результате мы имеем полный установочный комплект шаблона для Joomla 3. Если у вас возникли трудности, или чего то не получилось, вы можете скачать установочный комплект шаблона shab1.
Я его делал для своего сайта "общение", поэтому в шапке это название( помните, название прописывается автоматически).

Беспыльные тонкослойные наливные полы. | Двери тайзер

Медицинские дезинфицирующие средства москва по материалам http://moscow.delrus-dez.ru. | Оптово Розничный магазин, pos терминал или 1 с что выбрать для небольшого розничного магазина часов.

Copyrigcht © 2017 Яндекс.Метрика