Как сделать кнопки для топ меню? - Вопросы по CSS

Как сделать кнопку для топ меню, при наведении и курсора она менялась на другую, я примерно знаю но чето каряво получается, Заранее благодарен+
Наподобие такого.

swMenuFree юзай

Спасибо но мне надо через CSS, спецы верстальщики помогите)

Для начала нарисуй, обычные, активные и как они должны выглядеть при наведении (hover). А как сверстать - вариантов много

Я обычно через список все вывожу, вот такой конструкцией


Классы и ай-ди - ставишь как тебе нужно в той или иной ситуации

Для начала нарисуй, обычные, активные и как они должны выглядеть при наведении (hover). А как сверстать - вариантов много

Я обычно через список все вывожу, вот такой конструкцией

Код

<ul id="menu">
   <li class="l1"><a hreh="#">...</a></li>
   <li  class="l2"><a hreh="#">...</a></li>
   <li class="l3"><a hreh="#">...</a></li>
   <li class="l4"><a hreh="#">...</a></li>
</ul>

Классы и ай-ди - ставишь как тебе нужно в той или иной ситуации

Это получается мне в CSS нужно для каждого тега <li> прописывать
.l1{
background: url(../images/menu_1.jpg);
}
.l2{
background: url(../images/menu_2.jpg);
}

Я правильно понимаю?

Спасибо за тему, актуальна для меня

Для а прописывать

.l1 а {
background: url(../images/menu_1.jpg);
}

Joomla выводит меню так - с этим можно что угодно сделать)

т.е. для каждой ссылки через класс itemID (item7, item8 и т.д.)
Вот например меню на http://hairclinic.ru/, для фона берется всего одна картинка - , а дальше немного свойств CSS

еще один пример - http://www.we-travel.ru/ (сайт там запущен - но менюшка - как раз такая же)

Спасибо за подсказку!!
Сделал так:
li {
background: url(../images/menu_1.jpg);
}
li a:hover {
background: url(../images/menu_2.jpg);
}
Загвоздка в том, что при наведении на меню, новая картинка появляется не 100% в длину, а только по длине текста ссылки

только заметил. эти картинки теперь появляются во всех списках

а в ручную прописывать в CSS
.item1
.item2
....
.itemN
как то не хочется.

Вот как-то можно в заданный список меню вставить свой класс (например LEFT_MENU) и в CSS прописать свойства
например:
  <ul class="menu">
  <li class="LEFT_MENU" id="current"><a href="/"><span>О компании</span></a></li>
  <li class="LEFT_MENU"><a href="/novosti.html"><span>Новости</span></a></li>
  </ul>
подскажите в каком файле и как это можно сделать

А зачем сто то прописывать

сделай
ul.menu li {...}
ul.menu li a {...}
ul.menu li a:hover {...}

item1 item2 itemN - нужны если каждой ссылке свой фон нужен , а если фон одинаковый то конечно указывать их не надо

А добавить суффикс? Плюс спрайтами все сделать, с использованием фона, а текст на кнопке это текст?

поподробнее можно.

Суфикс всегда добавить можно, если он нужен, а если нет, то через родительский элемент можно прописать свойства

Если текст на кнопе можно сделать текстом - то лучше текст, если текст фоном - то придется через itemID для каждого пункта меню

В примерах своих я "спрайтами" и сделал, одна картинка , через itemID  меняю координаты фона

Огромное спасибо, Russfox
понемногу начинаю въезжать
хочу ещё спросить: как можно в ручную например тот же тег <li></li> дополнительно выделить, например, дивами?
тут же надо куда-то в php прописывать? только, глядя на исходный код HTML страницы, не могу найти в какой файл вносить изменения, к тому же для всех меню один модуль mod_mainmenu

Примеры не смотрел, каюсъ грешен!
http://hairclinic.ru/ - как и здесь, только подложка в 1 пиксель шириной, а текст это текст, а не <span>Новости</span> с display:none;
А это что? - _menu ? ))

Я и не говорил что там текст, там текст фоном - так удобнее было.
А <span>Новости</span> с display:none; - разве не текст - для ссылок то.
_menu - суффик класса модуля))) - я сам не помню уже- я это почти год назад сайт делал

NightGuard, много критики - покажи свои примеры, раз хорошо в этой области разбираешься. Я то что в голову пришло - то и показал.

хочу ещё спросить: как можно в ручную например тот же тег <li></li> дополнительно выделить, например, дивами?

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

Мне пока стандартных хватало, максимум span-ы добавлял в li

только подложка в 1 пиксель шириной

Где кстати подложку  в один пиксель увидел)))  Там нормальная подложка, я ж на нее и ссылку скинул - http://hairclinic.ru/templates/hairclinic/images/menu.png

В том конкретном случае не удобно было - нужны были дополнительные слои для первого и последнего пункта , а так впихнул картинку, текст скрыл - 10-15 минут и меню готово))))
Текст картиной лучше смотрится - и во всех браузерах одинаково выглядит

Russfox, Спасибо за ответы +

А еще можно прям в мотериал кнопочки)
<a class="im1" href="index.php?option=com_comprofiler&task=registers"></a> В страницу, Прям через визуальный редактор!

И стили в Css
.im1 {background:url(../images/2.jpg) 0 0 no-repeat; display:block; width:200px; height:150px;}
.im1:hover{background:url(../images/1.jpg) 0 0 no-repeat;}

А еще можно прям в мотериал кнопочки)

Конечно можно, главное ссылке класс или id назнач и делай с  ссылкой в CSS что хочешь

Спасибо, попробовал - класс
А можно средствами CSS выделять именно активную кнопку меню, а не просто на которой курсор?

пример активной ссылки (меню опубликовано стандартным mod_mainmenu)

li#current.active.item3 a {.......}

Спасибо
всё работает как и хотелось

Чето я запутолся Вот например


Со стилями вроде понятно

li#current.parent active item3 a {background: url(../images/menu_1.jpg);}
li#item7 a {background: url(../images/menu_2.jpg);}
.....


Куда прописывать это?

<ul class="menu">
<li class="parent active item3" id="current"><a href="/"><span>О компании</span></a></li>
<li class="item7"><a href="/novosti.html"><span>Новости</span></a></li>
<li class="item9"><a href="/magaziny.html"><span>Розничные магазины</span></a></li>
<li class="item8"><a href="/produkcziya.html"><span>Продукция</span></a></li>
<li class="item10"><a href="/optoviki.html"><span>Оптовикам</span></a></li>
<li class="item11"><a href="/info.html"><span>Раскрытие информации</span></a></li>
<li class="item6"><a href="/kontakty.html"><span>Контакты</span></a></li>
</ul>

В шаблон? мне надо чтобы отображалось в верхнем меню.(Желательно поподробнее, я начиноющий)

По идее, это уже должно быть в коде страницы после формирования меню в админ. панели

Чето я запутолся Вот например ...........................

Подобный список у тебя уже будет, если ты меню опубликуешь стандартным модулем, стиль список.
class="item7" - это зависит от id пункта меню
class="active" - активный пункт меню

Спасибо, уже сам разобрался, чето затупил.

я как то не особо доверяю классам .item1? .item2 ... Ведь они могут измениться ( например после удаления и создания заново).
Удобней юзать вот так:
.menu li a{background: url(../images/item-1.png);
.menu li+li a{background: url(../images/item-2.png);
.menu li+li+li a{background: url(../images/item-3.png);

Правда ие6 в пролете, он не вкурит плюсики. Но можно сообразить костыль на expression. А лучше заабиить на него! 

.itemID не так часто меняется после создания сайта - а если и меняется - то подправить можно за минуту. Я пока на 6ie не забиваю.

Согласен, если сайт - твой , и ты не брезгуешь подправить CSS, то это здорово. А вот иногда нужно сделать инсталлируемый шаблон, когда неизвестны itemID , вот тада приходится крутиться.

Согласен, если сайт - твой , и ты не брезгуешь подправить CSS, то это здорово. А вот иногда нужно сделать инсталлируемый шаблон, когда неизвестны itemID , вот тада приходится крутиться.

Подобные вещи уже обговариваются в ТЗ, исходя из дизайна сайта подобные моменты обговариваются заранее.

Подобные вещи уже обговариваются в ТЗ

Ну да, itemId врядли кто-то тебе скажет заранее
ТЗ редко дают когда просят тупо сделать шаблон, который потом сами будут ставить.
Ща чуть позже костыль напишу для осла шестого