Помогите разобраться с динамическим меню на CSS!

[Gudvinuk]

Помогите разобраться с горизонтальным меню на CSS?!

Вот то что используется в шаблоне main.tpl :

<!-- Топ-меню начало -->
<div class="">
<ul class="topmenu">
  <li><a href="/"><font color="#fff">Как выбрать</font></a></li>
  <li><a href="/zakaz.html">Как заказать</a></li>
  <li><a href="/">Как оплатить</a></li>
  <li><a href="/">Как получить</a></li>
  <li><a href="/">Акции</a></li>
</ul>
</div>
<!-- Топ-меню конец -->

Вот стиль CSS :

*/
html,body,table,td,tr,h1,h2,h3,h4,h5,h6,img{padding:0;margin:0;}
body{margin:15px 0;color:#666;}
table,td,tr,h1,h2,h3,h4,h5,h6{font:normal 12px/16px arial,sans-serif;}
html,body{font:normal 12px/16px arial,sans-serif;color:#000;}
html{background: #293437;}
a img{border:0}
a{color:#81BA01;text-decoration:none;}
a:hover{color:#81BA01; text-decoration:underline;}
a:focus{outline:none;}
.clear{line-height:0px; clear:both;}
/* весь блок */
.contener{width:1000px; margin:10px auto 0;}
/* середина */
.body{padding:0px 0px px 0px; background:#ECEEEF url(../images/rss_taib.png) no-repeat -30px -30px;}
/* закладка */
.zakladka{position:absolute; margin:5px 0 0 850px;}
.zakladka a{color:#fff;}
/* топ-меню */
#911 a{color:#fff;}
.topmenu{position:absolute; margin:78px 0 0 320px; padding:0 3px; background: url(../images/topmenu.gif) top no-repeat; height:25px; width:540px;}
.topmenu li{float:left; display:inline; list-style:auto; position:none; padding:5px 0 0 20px; margin:0;}

У меня два вопроса:

1) Как выровнять тексты ссылок по кнопкам?! Само меню

2) Как сделать так, чтобы при нажатии на ссылку - оставалось выделенным та кнопка, на которой эта ссылка была:

при нажатии чтобы было так:

Примеров как делать отдельные кнопки валом в интернете, а чтобы при нажатии на ссылку преображалось меню полностью - такого не нашел...((

[klyne19]

1) Как выровнять тексты ссылок по кнопкам?! Само меню

2) Как сделать так, чтобы при нажатии на ссылку - оставалось выделенным та кнопка, на которой эта ссылка была:

1. Увеличь левый padding элемента меню li с 20 до 30 например - файл style.css, строка 31

.topmenu li {
display:inline;
float:left;
margin:0;
padding:5px 0 0 30px;
}

2.

2.1. Надо на уровне движка присваивать class или id блоку меню ul class="topmenu" что-то типа: ul class="topmenu1", ul class="topmenu2" и в стилях дописать разные background:

Выш стиль:

.topmenu {
background:url("../images/topmenu.gif") no-repeat scroll center top transparent;
}

Будет:

.topmenu1 {
background:url("../images/topmenu.gif") no-repeat scroll center top transparent;
}

.topmenu2 {
background:url("../images/topmenu.gif") no-repeat scroll center top transparent;
}

и т.п.

2.2. Сделать то же самое через java script: Создать массив ссылок меню и фонов, и, в зависимости от адреса страницы, на которой ты находишься, менять фон меню при событии onload, т.е. после загрузки документа. Но потом Вы захотите, чтобы при наведении на ссылку тоже подсвечивалось

[psywalker]

ТС, нужно делать не Одну большую картинку, а отдельные для каждой вкладки, точнее одну белую и активную зелёную.

[Great Rash]

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

[Gudvinuk]

Ничего у меня не получилось, оставил как есть...)

Придется наверное заплатить за такое меню и все, никто реально на примере не хочет объяснять...((

[3ABAPKA]

Вот примерно то что ты хочешь "Дави Меня"

А вообще можно так:

1. Вырезать один белый параллелепипед

2. Вырезать один зеленый параллелепипед

3. Выстроить все в li как ты и сделал (выравнивание по центру text-align: center), но сдвинуть все li кроме первого влево (типо margin-left: -20px;)

4. В php коде сделать такое условие:

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

Например: есть ЦМС, где о каждой страницы есть информация в базе - это номер по порядку, имя, контент и т.д.

Обрабатывается все это разными кодами или одним кодом (php файлами)

дык вот, при формировании меню php код идет в базу и берет от туда имя и номер страницы

и когда юзер кликнул по ссылке php код идет в базу и тоже берет и имя , и номер и контент и т.д.

в этот момент их можно и сравнить, если номер меню == номеру страницы значит надо присвоить li соответствующий класс (где написано, что белый параллелепипед стал зеленым), иначе ничего делать не надо.

Ну вот как то так!

Edited April 28, 2010 by 3ABAPKA

[slicemasta]

Great Rash вполне верстаемо, если нормально порезать, единственное придеться делать классы для 1го и посл пунктов...

Gudvinuk вам уже во второй теме подряд попытались объяснить, живой пример хотите, зайдите на любой мало мальски нормальный сайт, извините но чтобы понять нужен хоть минимальный уровень знаний по теме...

[Great Rash]

Great Rash вполне верстаемо, если нормально порезать, единственное придеться делать классы для 1го и посл пунктов...

А вот и нет. Если посмотреть внимательно, то выделенный пункт меню стоит над всеми остальными (т.е. белые подлазят под него и слева и справа). Вот это "подлазание" реализовать не так просто... тут надобно подумать.

[3ABAPKA]

Вот это "подлазание" реализовать не так просто... тут надобно подумать.

На самом деле это просто! Я бы сделал маргинами.

[drucker]

Не знаю может быть уже поздно, но я сейчас делаю сайт именно с таким меню.

Варианта было только два одной большой картинкой через "background-position" и маленькими.

Остановился на маленьких т.к. последняя опера (может и только она, ) малость "дурить" пытается...

Сделал так чтоб менялся "background-image" при наведении.

А активную кнопку выбирает сервер через php приверно так:

Кусок CSS

.m10			   {background-image:url(/images/m10.png);......;}
.m11			   {background-image:url(/images/m11.png);......;}
.m20			   {background-image:url(/images/m20.png);......;}
.m21			   {background-image:url(/images/m21.png);......;}
.m22			   {background-image:url(/images/m22.png);......;}
.m30			   {background-image:url(/images/m30.png);......;}
.m31			   {background-image:url(/images/m31.png);......;}
.m32			   {background-image:url(/images/m32.png);......;}
.m40			   {background-image:url(/images/m40.png);......;}
.m41			   {background-image:url(/images/m41.png);......;}
.m42			   {background-image:url(/images/m42.png);......;}
.m50			   {background-image:url(/images/m50.png);......;}
.m51			   {background-image:url(/images/m51.png);......;}
.m52			   {background-image:url(/images/m52.png);......;}
.m60			   {background-image:url(/images/m60.png);......;}
.m61			   {background-image:url(/images/m61.png);......;}
.m62			   {background-image:url(/images/m62.png);......;}
.m70			   {background-image:url(/images/m70.png);......;}
.m71			   {background-image:url(/images/m71.png);......;}
.m72			   {background-image:url(/images/m72.png);......;}

Кусок шаблона

<td class="m1<? if ($menu == 1) {echo "1";} else {echo "0";}?>">...</td>
<td class="m2<? if ($menu == 1) {echo "2";} elseif ($menu == 2) {echo "1";} else {echo "0";} ?>">...</td>
<td class="m3<? if ($menu == 2) {echo "2";} elseif ($menu == 3) {echo "1";} else {echo "0";} ?>">...</td>
<td class="m4<? if ($menu == 3) {echo "2";} elseif ($menu == 4) {echo "1";} else {echo "0";} ?>">...</td>
<td class="m5<? if ($menu == 4) {echo "2";} elseif ($menu == 5) {echo "1";} else {echo "0";} ?>">...</td>
<td class="m6<? if ($menu == 5) {echo "2";} elseif ($menu == 6) {echo "1";} else {echo "0";} ?>">...</td>
<td class="m7<? if ($menu == 6) {echo "2";} elseif ($menu == 7) {echo "1";} else {echo "0";} ?>">...</td>

А в начале каждой странницы я задаю переменной menu значение от 0 до 7 всего 7 кнопок, при 0 активной кнопки нет.

<? $menu="0"; ?>

PS Может не самый простой вариант, но ...

PPS A картинок пришлось нарисовать по 3 варианта.

Edited May 16, 2010 by drucker