0 Пользователей и 1 Гость просматривают эту тему.
  • 28 Ответов
  • 20392 Просмотров
*

b_anton_v

  • Осваиваюсь на форуме
  • 25
  • 0 / 0
Добрый вечер

не могу понять как правильно прописать заголовки стилей  для главного меню.

Код
<div class="moduletable_menu">
<h3>Главное меню</h3>
<ul class="menu">
                         <li class="item1"><a href="http://Joomla2/"><span>Главная</span></a></li>
                         <li id="current" class="parent active item27"><a href="/index.php?option=com_content&amp;view=article&amp;id=19&amp;Itemid=27"><span>Описание Joomla!</span></a>
                               <ul>
                                    <li class="item34"><a href="/index.php?option=com_content&amp;view=article&amp;id=22&amp;Itemid=34"><span>Новое в версии 1.5</span></a></li>
                               </ul></li>
                         <li class="item2"><a href="/index.php?option=com_content&amp;view=article&amp;id=5&amp;Itemid=2"><span>Лицензия Joomla!</span></a></li>
......
стили щас примерно такие

Код
.moduletable_menu ul li a:link,.moduletable_menu ul li a:visited {
background: url(../images/menu.gif) no-repeat bottom left;
background-position: 0px -0px;
height: 24px;
width: 191px;
font: 14px Tahoma,Arial, Helvetica, sans-serif;
margin: 0px 0px 0px -0px;
padding: 5px 0px 0px 25px;
color: Blue;
display: block;
text-decoration: none;

}
.moduletable_menu  ul li a:hover {
background: url(../images/menu.gif) no-repeat bottom left;
background-position: 0px -29px;
height: 24px;
width: 191px;
font: 14px Tahoma,Arial, Helvetica, sans-serif;
margin: 0px 0px 0px -0px;
padding: 5px 0px 0px 25px;
text-decoration:none;
color:Blue;
}


/*1 линия*/
.moduletable_menu  #current a:link,.moduletable_menu  #current a:visited {
background: url(../images/menu.gif) no-repeat bottom left;
background-position: -0px -58px;
height: 24px;
width: 191px;
font: 14px Tahoma,Arial, Helvetica, sans-serif;
margin: 0px 0px 0px -0px;
padding: 5px 0px 0px 25px;
}

На данный момент первый уровень ссылок отрабатывает нормально
но почему то к нему цепляется и уровень подменю

как правильно прописать  заголовки стилей что бы ссылки подменю отображались несколько по другому?(планируется показывать другие части картинки menu.gif)

например класс menu не цеплялся к списку без указания класса
*

b_anton_v

  • Осваиваюсь на форуме
  • 25
  • 0 / 0
не ужели ни кто с этим не сталкивался  :(
*

gdX

  • Глобальный модератор
  • 995
  • 128 / 0
  • Открыт к заказам по дизайну
Может реализовать так:

Для родительских пунктов меню оформление реализовывать по пути
Код: css
.moduletable_menu li a{...}

А для дочерних
Код: css
.moduletable_menu li.parent a{...}
*

b_anton_v

  • Осваиваюсь на форуме
  • 25
  • 0 / 0
А это что за класс в моем коде такой не встречается .parent ?????
или это какой то подкласс как :hover
на сколько я понимаю подменю не имеют четкого класса по этому к нему браузер цепляет родительский класс, в обще я несколько удивлен этому сюрпризу в 1,5 так например 1,0 все решалось без проблем наличием отдельного класса для подменю (.sublevel) 
*

gdX

  • Глобальный модератор
  • 995
  • 128 / 0
  • Открыт к заказам по дизайну
Ну вот если смотреть по Вашему коду, то подменю вкладывается в тег li, у которого выставляется класс «parent».
Вот к нему можно и привязываться, чтобы оформить подменю.
*

b_anton_v

  • Осваиваюсь на форуме
  • 25
  • 0 / 0
благодарю за информацию, в крайнем случае конечно придется так и поступить, но все таки хотелось бы более изящного решения, так как лесть в код Joomla чреват проблемами с последующей обгрейдем движка.

 в крайнем случае можно выйти из положения сменив на Legacy-Vertical с List
но не хотелось бы, а то смысл пропадает возни с div  
*

gdX

  • Глобальный модератор
  • 995
  • 128 / 0
  • Открыт к заказам по дизайну
А зачем лезть в код-то?
Не очень понял. Системой уже все это реализуется.
*

b_anton_v

  • Осваиваюсь на форуме
  • 25
  • 0 / 0
коде
Код
 class="parent active item27">
а как его прописать ?? я бы понял как это сделать если бы он выглядел так
Код
 class="parent" class="active item27">
я прописал эти классы так

Код
.moduletable_menu ul li.parent #current  a:link,.moduletable_menu ul li.parent #current  a:visited {
background: url(../images/menu.gif) no-repeat bottom left;
background-position: -20px -87px;
height: 24px;
width: 191px;
font: 14px Tahoma,Arial, Helvetica, sans-serif;
margin: 0px 0px 0px -0px;
padding: 5px 0px 0px 25px;
}

.moduletable_menu ul li.parent a:link,.moduletable_menu ul li.parent a:visited {
background: url(../images/menu.gif) no-repeat bottom left;
background-position: 0px -87px;
height: 24px;
width: 191px;
font: 14px Tahoma,Arial, Helvetica, sans-serif;
margin: 0px 0px 0px -0px;
padding: 5px 0px 0px 25px;
color: Blue;
display: block;
text-decoration: none;

}
.moduletable_menu ul li.parent a:hover {
background: url(../images/menu.gif) no-repeat bottom left;
background-position: 0px -87px;
height: 24px;
width: 191px;
font: 14px Tahoma,Arial, Helvetica, sans-serif;
margin: 0px 0px 0px -0px;
padding: 5px 0px 0px 25px;
text-decoration:none;
color:Blue;
}
но они работают не корректно пересекаются с родительским классом
или я в чем то заблуждаюсь
*

b_anton_v

  • Осваиваюсь на форуме
  • 25
  • 0 / 0
добавил еще один пункт меню и и в нем точно видно  что .parent относится к активному пункту меню собственно его выцепляю я по  id="current" а под пункты идут просто списком  

Код
     
<div class="moduletable_menu">
<h3>Главное меню</h3>
<ul class="menu">
        <li class="item1"><a href="http://Joomla2/"><span>Главная</span></a></li>
        <li id="current" class="parent active item27"><a href="/index.php?option=com_content&amp;view=article&amp;id=19&amp;Itemid=27"><span>Описание Joomla!</span></a>
                <ul>
                       <li class="item34"><a href="/index.php?option=com_content&amp;view=article&amp;id=22&amp;Itemid=34"><span>Новое в версии 1.5</span></a></li>
                       <li class="item59"><a href="/index.php?option=com_content&amp;view=article&amp;id=35&amp;Itemid=59"><span>пункт подменю</span></a></li>
                </ul>
        </li>
        <li class="item2"><a href="/index.php?option=com_content&amp;view=article&amp;id=5&amp;Itemid=2"><span>Лицензия Joomla!</span></a></li>
.....


а мне надо правильно прописать стиль для
Код
                <ul>
                       <li class="item34"><a href="/index.php?option=com_content&amp;view=article&amp;id=22&amp;Itemid=34"><span>Новое в версии 1.5</span></a></li>
                       <li class="item59"><a href="/index.php?option=com_content&amp;view=article&amp;id=35&amp;Itemid=59"><span>пункт подменю</span></a></li>
                </ul>
*

gdX

  • Глобальный модератор
  • 995
  • 128 / 0
  • Открыт к заказам по дизайну
Ну вот смотрите, разберем такой пример:
Код: html4strict
<div class="moduletable_menu">
<h3>Menu name</h3>
<ul class="menu">
<li class="item1"><a href="#"><span>item1</span></a></li>
<li id="current" class="parent active item27"><a href="#"><span>item27</span></a>
<ul>
<li class="item34"><a href="#"><span>item34</span></a></li>
<li class="item35"><a href="#"><span>item35</span></a></li>
</ul>
</li>
<li class="item2"><a href="#"><span>item2</span></a></li>
</ul>
</div>

Здесь есть родительские и дочерние пункты меню.

Дочерние пункты меню отличаются от родительских тем, что их ссылки лежат в теге li, у которого есть класс parent.





Небольшое отступление.

Такая запись классов: class="parent" class="active item27" неправильна, так как class="parent" перебивается class="active item27" и не будет виден браузером.

При таком подходе class="parent active item27" в задании классов для элементов, создается возможность обращаться к этому элементу разными способами.
В чем удобство такого подхода?
В том, что Вы можете в стилевых свойствах задавать комбинации этих классов.
К примеру, для пункта меню у которого есть подменю (parent) и оно в данный момент активно (active), можно прописать такое свойство:
Код: css
.moduletable_menu li.parent.active a{
background: red;
color: white;
}

Eсли у Вас несколько пунктов с подменю, то можно индивидуально оформить каждый из них, обращаясь к классу соответствующего item'а:
Код: css
.moduletable_menu li.parent.item27 a{
background: red;
color: white;
}




Итак, вернемся к примеру.

Для оформления родительских пунктов меню пишем стили:
[1]
Код: css
.moduletable_menu li a{
background: red;
color: white;
}
При такой записи все пункты будут окрашены красным фоном и текст в них белым цветом.

Идем вглубь, чтобы придать подпунктам свой стиль. Добавляем ниже такой код:
[2]
Код: css
.moduletable_menu li.parent a{
background: green;
color: yellow;
}
Пункты подменю окрашиваются в зеленый цвет с желтым текстом.
При этом, захватывается и родительский пункт подменю.

Чтобы оформить только внутренние пункты, надо его исключить из этого свойства. Т.е. прописывать его не для ссылок в li.parent, а глубже:
[2.1]
Код: css
.moduletable_menu li.parent li a{
background: green;
color: yellow;
}

Теперь выделим активный пункт меню. Отличается он добавочным классом active. Дописываем ниже:
[3]
Код: css
.moduletable_menu li.active a{
background: black;
font-weight: bold;
}

И что видим, все подпункты меню переняли свойство font-weight: bold; и стали жирными.
Это произошло из-за того, что они попадают в то же условие — .moduletable_menu li.active a, т.е. все подпункты лежат с этом li.active.
Значит для них нам надо прописать свойство, которое исключает данное оформление:
[2.1]
Код: css
.moduletable_menu li.parent li a{
background: green;
color: yellow;
font-weight: normal;
}

Можно, к примеру, оформить индивидуально подпункт с item35:
[4]
Код: css
.moduletable_menu li.parent li.item35 a{
background: blue;
color: red;
}

Полный код страницы примера (во вложении файл menu.zip):
Код: html4strict
<html>
<head>
<style>

/*[1]*/
.moduletable_menu li a{
background: red;
color: white;
}

/*[2.1]*/
.moduletable_menu li.parent li a{
background: green;
color: yellow;
font-weight: normal;
}

/*[3]*/
.moduletable_menu li.active a{
background: black;
font-weight: bold;
}

/*[4]*/
.moduletable_menu li.parent li.item35 a{
background: blue;
color: red;
}
</style>
</head>
<body>
<div class="moduletable_menu">
<h3>Menu name</h3>
<ul class="menu">
<li class="item1"><a href="#"><span>item1</span></a></li>
<li id="current" class="parent active item27"><a href="#"><span>item27</span></a>
<ul>
<li class="item34"><a href="#"><span>item34</span></a></li>
<li class="item35"><a href="#"><span>item35</span></a></li>
</ul>
</li>
<li class="item2"><a href="#"><span>item2</span></a></li>
</ul>
</div>
</body>
</html>

При этом, получается такое вот замысловатое оформление пунктов меню и подменю:


Думаю, что дальше разберетесь и со своим примером.
Удачи!
;)

[вложение удалено Администратором]
*

rusic

  • Новичок
  • 4
  • 0 / 0
Спасибо gdX за подробный ответ!
*

Trampypys

  • Захожу иногда
  • 127
  • 3 / 1
Ух как! ВОт это я и искал спасибо большое не как не мог догнать ка же ето меню стилями оформальять теперь я стану гуру!))
*

Phoenix88

  • Захожу иногда
  • 81
  • 3 / 0
  • Нет предела самосовершенствованию
gdX, ТЫ ЛУЧШИЙ!)))    +++
 .menu li.parent.active a{    background: red;   color: white;   }
 :D
« Последнее редактирование: 25.01.2011, 13:08:39 от Phoenix88 »
*

neut ral

  • Захожу иногда
  • 252
  • 27 / 0
.moduletable_menu li.parent a
о, это то что нужно, спасибо
*

v3rsus

  • Осваиваюсь на форуме
  • 16
  • 1 / 0
Спасибо gdX! Подробно и доступным языком на примере. Это нужно в FAQ для новичков добавить, сам голову поломал на один вечер, но разобрался...
*

Tviretik

  • Захожу иногда
  • 56
  • 2 / 0
всем привет!

Возник вопрос.. у меня в меню при наведении
срабатывает CSS
Код
a.mainlevel:hover {
color:#FF9933;
background:#FFFFFF;
border: 1px solid #FFCC00;
}

как мне его сделать, чтобы он оставался и активным таким же? Уже все перебрал, но видно что то недобрал еще))

Меню не оставляется активным((

Все перепробовал сверху что писали и также не получается((

по идее если я правильно догоняю то должно быть так
Код
a.mainlevel:active {
color:#FF9933;
background:#FFFFFF;
border: 1px solid #FFCC00;}

кто подскажет ??
« Последнее редактирование: 28.03.2011, 16:37:09 от Tviretik »
*

gdX

  • Глобальный модератор
  • 995
  • 128 / 0
  • Открыт к заказам по дизайну
Наверно неправильно применяете порядок расстановки.
Запомните правило LoVe-HAte и выставляйте псевдоклассы именно в таком порядке в файле стилей:
Код: css
:link { … }
:visited { … }
:hover { … }
:active { … }
*

Tviretik

  • Захожу иногда
  • 56
  • 2 / 0
Наверно неправильно применяете порядок расстановки.
Запомните правило LoVe-HAte и выставляйте псевдоклассы именно в таком порядке в файле стилей:
Код: css
:link { … }
:visited { … }
:hover { … }
:active { … }


Благодарю за информацию! Очень полезна для меня.
*

airhat

  • Новичок
  • 7
  • 0 / 0
*

Alex2

  • Захожу иногда
  • 113
  • 6 / 0
Подскажите,
Есть пункт "Акции" в главном меню, как можно его выделить цветом или сменить цвет шрифта?
*

gdX

  • Глобальный модератор
  • 995
  • 128 / 0
  • Открыт к заказам по дизайну
Подскажите,
Есть пункт "Акции" в главном меню, как можно его выделить цветом или сменить цвет шрифта?
С помощью стиля, через класс пункта меню.
Посмотрите по коду.
Каждый пункт имеет уникальный класс.
Это дает возможность уникально оформлять каждый из пунктов.
*

Alex2

  • Захожу иногда
  • 113
  • 6 / 0
С помощью стиля, через класс пункта меню.
Посмотрите по коду.
Каждый пункт имеет уникальный класс.
Это дает возможность уникально оформлять каждый из пунктов.
К сожалению в этом ничего не понимаю.
в коде есть следующее:
<div class="clr"></div>        
<div id="topmenu_out">
    <div id="topmenu_left">
        <div id="topmenu_right">
            <div id="topmenu">
                <div id="navigation">   <div class="moduletable_menu">
<ul class="menu"><li class="item15"><a href="/akcyi.html"><span>Акции!</span></a></li>
....
</ul>      
</div>

Вопрос снят, сам разобрался (использовал метод "Тыка" ^-^)
в моем случае это выглядит так:

#topmenu li.item15 a {
   text-decoration: none;
   background-color: #FF0101;
   color: #ffffff;
   background-repeat: repeat-x;
   background-position: bottom;
}
« Последнее редактирование: 23.12.2011, 10:39:22 от Alex2 »
*

kry

  • Захожу иногда
  • 124
  • 3 / 0
Народ, помогите разобраться!
Горизонтальное главное меню сайта формируется с помощью файла suckerfish.php шаблона (см. во вложенных). Структура главного меню ниже:

Спойлер
[свернуть]

Вопрос в том, что хочу одному из пунктов, например, "Гостевая книга" применить другой стиль независимо от того выбран он или нет.
Как вы можете видеть у меня ко всем пунктам автоматом прописывается вот это
Код
<span class="top">
. Т.е. я не могу изменить стиль пункта отдельно - стиль применится ко всем пунктам сразу.
В примерах выше в структуре меню у каждого пункта фигурирует код, например:
Код
<li class="item1"><a href="http://Joomla2/"><span>Главная</span></a></li>
Т.е клас (ItemId пункта) прописывается автоматом class="item1".
Что нужно изменить в коде файла suckerfish.php шаблона, чтобы и у меня автоматом добавлялся уникальный класс с id пункта меню? Помогите

[вложение удалено Администратором]
*

Taatshi

  • Глобальный модератор
  • 5186
  • 475 / 1
  • Верстаем и кодим. Обращайтесь ;)
li.item1 a{
   background: blue; или все, что угодно
}
ВЕРСТКА, САЙТЫ ПОД КЛЮЧ, УДАЛЕНИЕ ВИРУСОВ, МИГРАЦИЯ НА JOOMLA 3, ОБНОВЛЕНИЕ  |  ОТЗЫВЫ 
Связь: telegram - Taatshi, почта - Taatshi на яндексе, Skype - Taatshi
*

kry

  • Захожу иногда
  • 124
  • 3 / 0
Taatshi, повнимательнее, у меня не проставляется класс item1 для пункта меню.
В том-то и вопрос, как "заставить" код автоматом присваивать класс для пункта меню с ItemId этого пункта?
*

Taatshi

  • Глобальный модератор
  • 5186
  • 475 / 1
  • Верстаем и кодим. Обращайтесь ;)
ссылку на сайт

Itemid в  вашем коде присутствует
ВЕРСТКА, САЙТЫ ПОД КЛЮЧ, УДАЛЕНИЕ ВИРУСОВ, МИГРАЦИЯ НА JOOMLA 3, ОБНОВЛЕНИЕ  |  ОТЗЫВЫ 
Связь: telegram - Taatshi, почта - Taatshi на яндексе, Skype - Taatshi
*

kry

  • Захожу иногда
  • 124
  • 3 / 0
Taatshi, ссылка в личке. Itemid может и присутствует, но, по-моему, не для проставления уникального класса, а для формирования ссылки.
*

Taatshi

  • Глобальный модератор
  • 5186
  • 475 / 1
  • Верстаем и кодим. Обращайтесь ;)
а дайте весь код меню - я с ним ни разу дела не имела. Или ссылку откуда скачать.
ВЕРСТКА, САЙТЫ ПОД КЛЮЧ, УДАЛЕНИЕ ВИРУСОВ, МИГРАЦИЯ НА JOOMLA 3, ОБНОВЛЕНИЕ  |  ОТЗЫВЫ 
Связь: telegram - Taatshi, почта - Taatshi на яндексе, Skype - Taatshi
*

kry

  • Захожу иногда
  • 124
  • 3 / 0
Taatshi , и у меня непонятки... :o
А файл, который формирует горизонтальную менюшку в сообщении выше во вложении (suckerfish.php)
http://joomlaforum.ru/index.php/topic,66660.msg1160059.html#msg1160059

папка HTML шаблона во вложении этого сообщения

[вложение удалено Администратором]
« Последнее редактирование: 07.07.2012, 19:29:30 от kry »
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Ширина меню

Автор alex86r93

Ответов: 5
Просмотров: 1790
Последний ответ 14.06.2018, 05:13:50
от KANEGI
как сделать кнопки меню!

Автор Millenium_3000

Ответов: 10
Просмотров: 7669
Последний ответ 17.08.2017, 17:24:12
от Intrande
Вопрос по добавлению тега в МЕНЮ j 1.5

Автор berTalino

Ответов: 12
Просмотров: 1192
Последний ответ 29.03.2017, 16:20:43
от berTalino
Как увеличить ширину левого меню?

Автор afina2009

Ответов: 8
Просмотров: 1772
Последний ответ 09.04.2016, 23:00:36
от afina2009
Плавный якорь из меню на Jquery

Автор Timerlan

Ответов: 19
Просмотров: 2174
Последний ответ 04.02.2016, 03:54:16
от Fedor Vlasenko