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

wd

  • Давно я тут
  • 525
  • 17 / 1
  • Просто юзер
Здравствуйте.

Сделал меню с тремя позициями. Пример:

Код
			/* Home Button */
        #menu li.home{width:70px; height:60px;}
#menu li.home a{background-position:0px 0px;}
#menu li.home a:hover{background-position:0px -60px; color: #f57e00;}
#menu li.home a.selected{background-position:0px -120px; color: #f57e00;}

Как сделать. что бы активировался класс selected когда я нахожусь в выбранном пункте меню?

Заранее благодарю за помощь.
Мощный KVM VDS на SSD от 5$: бесплатные 10$ для теста при регистрации.
Описание и руководство по Joomla 2.5 на портале Joomlauser.ru
Свежие новости, отличные переводы и документация в блоге Joomlablog.ru
*

rusak

  • Захожу иногда
  • 76
  • 4 / 0
В Joomla 1.5 выбранный пункт меню имеет id=current и class=active item id. Вот от этого и пишите CSS.
*

wd

  • Давно я тут
  • 525
  • 17 / 1
  • Просто юзер
Спасибо!
Мощный KVM VDS на SSD от 5$: бесплатные 10$ для теста при регистрации.
Описание и руководство по Joomla 2.5 на портале Joomlauser.ru
Свежие новости, отличные переводы и документация в блоге Joomlablog.ru
*

wd

  • Давно я тут
  • 525
  • 17 / 1
  • Просто юзер
Только что-то не получается... может поможете разобраться?

Я создал модуль c произвольным HTML, куда вписал следующее:

Код
<ul id="menu">
                    <li class="home"><a href="home">главная</a></li>
                    <li class="about"><a href="#">о нас</a></li>
                    <li class="portfolio"><a href="#">портфолио</a></li>
                    <li class="services"><a href="#">услуги</a></li>
                    <li class="contact"><a href="kontakti">контакты</a></li>
</ul>

А в CSS выглядит так:

Код
	ul#menu{margin:0; padding:0; list-style:none; clear:both;}
#menu li{
overflow: hidden;
display: inline;
float: left;
margin-right: 0px;
padding-bottom: 30px;
text-align: center;
line-height: 140px;
font-weight: bold;
}

#menu li a{
background-image: url('../images/sprite.png');
width:100%;
height:100%;
display:block;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
text-decoration:none;
color: #000000;
font-style: normal;
}

/* Home Button */
#menu li.home{width:70px; height:60px;}
#menu li.home a{background-position:0px 0px;}
#menu li.home a:hover{background-position:0px -60px; color: #f57e00;}
#menu li.home a.selected{background-position:0px -120px; color: #f57e00;}

/* About Button */
#menu li.about{width:70px; height:60px;}
#menu li.about a{background-position:-70px 0px;}
#menu li.about a:hover{background-position:-70px -60px; color: #f57e00;}
#menu li.about a.selected{background-position:-70px -1205px; color: #f57e00;}

И так далее по пунктам меню...

Что в этой ситуации и к чему присвоить?
Мощный KVM VDS на SSD от 5$: бесплатные 10$ для теста при регистрации.
Описание и руководство по Joomla 2.5 на портале Joomlauser.ru
Свежие новости, отличные переводы и документация в блоге Joomlablog.ru
*

midav

  • Давно я тут
  • 926
  • 114 / 1
А зачем меню создавать через модуль произвольный HTML ? Чем не подходит стандартное меню ?
Ответы на вопросы по CSS . Откройте для себя Firebug
*

midav

  • Давно я тут
  • 926
  • 114 / 1
И как Вы думаете , откуда в вашем коде появится класс "selected" ?
Ответы на вопросы по CSS . Откройте для себя Firebug
*

wd

  • Давно я тут
  • 525
  • 17 / 1
  • Просто юзер
Ну selected это просто по умолчанию написал. Ну и я так понимаю, что определённый класс или айди должна Joomla подсунуть в хтмл код... но вот как ей дать знать, что этот произвольный модуль содержит меню...

« Последнее редактирование: 03.06.2011, 15:15:14 от wd »
Мощный KVM VDS на SSD от 5$: бесплатные 10$ для теста при регистрации.
Описание и руководство по Joomla 2.5 на портале Joomlauser.ru
Свежие новости, отличные переводы и документация в блоге Joomlablog.ru
*

wd

  • Давно я тут
  • 525
  • 17 / 1
  • Просто юзер
А через произвольный HTML сделал потому, что меню в виде иконок (на спрайтах) с текстом под ним. Т.е. нужно что бы главная страница была иконкой "домик", страница "о нас" под другой соответствующей иконкой и т.д.
А как такую структуру реализовать через модуль стандартного меню - не знаю.
Мощный KVM VDS на SSD от 5$: бесплатные 10$ для теста при регистрации.
Описание и руководство по Joomla 2.5 на портале Joomlauser.ru
Свежие новости, отличные переводы и документация в блоге Joomlablog.ru
*

midav

  • Давно я тут
  • 926
  • 114 / 1
Цитировать
Ну и я так понимаю, что определённый класс или айди должна Joomla подсунуть в хтмл код...
неправильно Вы понимаете .
Цитировать
как ей дать знать, что этот произвольный модуль содержит меню...
Никак
Цитировать
как такую структуру реализовать через модуль стандартного меню
А чем она будет отличаться от вашей , названиями классов ?
Вы попробуйте , самый верный способ  ;)
Создайте меню , опубликуйте модуль mod_mainmenu в нужной позиции , и посмотрите какой код модуль генерирует . Потом присвойте соответствующим пунктам меню , ваши стили .
Только не спрашивайте  как узнать какие классы присваиваются пунктам меню .
Ответы на вопросы по CSS . Откройте для себя Firebug
*

Efanych

  • Глобальный модератор
  • 4372
  • 613 / 0
Для каждого пункта меню (если стандартно выводить) присваивается item
Отсюда и пляшем .menu .item22 {}
активную ссылку можна выделить примерно так a:active или a#current или a.active
Создание сайтов, шаблонов, помощь в решении проблем.
*

wd

  • Давно я тут
  • 525
  • 17 / 1
  • Просто юзер
Я наверное покажусь глупым (ибо без практики в работе с CSS я просто запутался уже с этим меню), но как я только не пытался подставить классы и айди - ничего не выходит.

Делал на примере первого пункта меню "главная", которая имеет id1 т.е. в выводимом коде так:
Код
<div class="menu">
<ul class="menu"><li id="current" class="active item1"><a href="http://localhost/mysite5/"><span>Главная</span></a></li>

Делал а цсс:

Код
/* Home Button */
#menu li.item1{width:70px; height:60px;}
#menu li.item1 a{background-position:0px 0px;}
#menu li.item1 a:hover{background-position:0px -60px; color: #f57e00;}
#menu li.item1 a.active{background-position:0px -120px; color: #f57e00;}

ничего не выходит... наверное я что-то очень путаю и напрочь запутался в идентификаторах и стилях.

Ткните, пожалуйста, пальцем что не так... как  написать правильно CSS с этими item'ами?
Мощный KVM VDS на SSD от 5$: бесплатные 10$ для теста при регистрации.
Описание и руководство по Joomla 2.5 на портале Joomlauser.ru
Свежие новости, отличные переводы и документация в блоге Joomlablog.ru
*

Efanych

  • Глобальный модератор
  • 4372
  • 613 / 0
Вроде всё правильно, только
class="menu"
обозначается .menu, а не #menu
Ну и background-position
без самого background как-то безсмысленно.
Создание сайтов, шаблонов, помощь в решении проблем.
*

midav

  • Давно я тут
  • 926
  • 114 / 1
Код
.menu li.item1 {...}
про background-position без background уже написали :)
еще по поводу
Цитировать
#menu li.item1 a.active
внимательнее смотрите какие классы чему присваиваются , класс active присваивается тегу li а не ссылке . надо как то так :
Код
.menu li.item1.active a



 
Ответы на вопросы по CSS . Откройте для себя Firebug
*

wd

  • Давно я тут
  • 525
  • 17 / 1
  • Просто юзер
Всем огромное спасибо и плюсы! Наконец-то получилось!  ^-^
Мощный KVM VDS на SSD от 5$: бесплатные 10$ для теста при регистрации.
Описание и руководство по Joomla 2.5 на портале Joomlauser.ru
Свежие новости, отличные переводы и документация в блоге Joomlablog.ru
*

wd

  • Давно я тут
  • 525
  • 17 / 1
  • Просто юзер
Снова здравствуйте.

Пытаюсь реализовать эту же схему в Joomla 2.5 - не выходит. Может там что-то поменялось?

В Joomla 1.5 меню корректно отображалось и работало, CSS был такой:

Код
.menuposition { 
padding: 0px;
float: left;
position: absolute;
top: 40px;
left: 510px;
}


ul.menu{margin:0; padding:0; list-style:none; clear:both;}
.menu li{
overflow: hidden;
display: inline;
float: left;
margin-right: 0px;
padding-bottom: 30px;
text-align: center;
line-height: 140px;
font-weight: bold;
}

.menu li a{
background-image: url('../images/sprite.png');
width:100%;
height:100%;
display:block;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
text-decoration:none;
color: #000000;
font-style: normal;
}

/* Home Button */
.menu li.item1{width:70px; height:60px;}
.menu li.item1 a{background-position:0px 0px;}
.menu li.item1 a:hover{background-position:0px -60px; color: #f57e00;}
.menu li.item1.active a{background-position:0px -120px; color: #f57e00;}

/* About Button */
.menu li.item6{width:70px; height:60px;}
.menu li.item6 a{background-position:-70px 0px;}
.menu li.item6 a:hover{background-position:-70px -60px; color: #f57e00;}
.menu li.item6.active a{background-position:-70px -120px; color: #f57e00;}

и так далее...
Мощный KVM VDS на SSD от 5$: бесплатные 10$ для теста при регистрации.
Описание и руководство по Joomla 2.5 на портале Joomlauser.ru
Свежие новости, отличные переводы и документация в блоге Joomlablog.ru
*

wd

  • Давно я тут
  • 525
  • 17 / 1
  • Просто юзер
Разобрался... в 2.5 с дефисом айтем пишется (item-1).
Мощный KVM VDS на SSD от 5$: бесплатные 10$ для теста при регистрации.
Описание и руководство по Joomla 2.5 на портале Joomlauser.ru
Свежие новости, отличные переводы и документация в блоге Joomlablog.ru
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Большое меню Joomla

Автор Amakeeva

Ответов: 1
Просмотров: 121
Последний ответ 22.01.2018, 13:17:45
от effrit
Как можно отображать имя пользователя в название меню?

Автор selimoff

Ответов: 27
Просмотров: 3047
Последний ответ 02.01.2018, 15:24:44
от logan-19
как сделать пункт меню не кликабельным?

Автор qweqweqwe

Ответов: 13
Просмотров: 5811
Последний ответ 07.09.2017, 01:45:49
от forzi
Сдвинуть пункты меню в левое положение

Автор wectra

Ответов: 6
Просмотров: 442
Последний ответ 12.07.2017, 21:09:01
от wectra
Не отображаются пункты в меню

Автор physic

Ответов: 16
Просмотров: 15759
Последний ответ 27.05.2017, 00:10:15
от OutLaw1