Как сверстать меню?

[psywalker]

Дорогие Камрады, у меня возник вопрос, а точнее мне интересно услышать варианты и идеи по-поводу того, как бы Вы сверстали вот такое меню: , дело в том, что Оно полностью Пнг-формата, и сам каркас с фоном, ссылки и текущая страница тоже, как видите выделяется(в данном случае это страница "Авторизация")..

А проблема в том, что:

1) Нужно, что-бы это меню прекрасно отображалось в ИЕ6, один в один, как и везде

2) Почему то ссылки не кликабельны после того, как я назначаю даже фон этому меню в ИЕ6, почему так происходит, я не могу понять?

3) Хотелось-бы узнать у Вас, как-бы кто сверстали такое меню, какими бы свойствами и действиями оперировали?

[s0rr0w]

по хорошему JS в любом случае придёться использовать, хотябы для прелоада картинок активных кнопок

Если сделать одной текстурой, то не придется.

[LunatiK]

Если сделать одной текстурой, то не придется.

Хм... Об этом я не подумал...

[psywalker]

ребят, а вот смотрите, какая идея, как вам такой простой вариант, только единственное, что плохо - это то, что сияние опять-же обрезается, зато работает везде, даже в ИЕ6, и в Опере я починил, назначив просто ссылке прозрачный фон 1х1 пиксель, гифка))

Посмотрите, на этот минимальный код, на идею саму..

Код:

ul.nav {

width: 180px;

height: 247px;

position: absolute;

left: -182px;

top: 2em;

padding-top: 2.5em;

background: url(../img/munu-nav.gif) 0 -160px no-repeat;

}

ul.nav li a { display: block; height: 32px; background: url(../img/transparent.gif) repeat;}

ul.nav li a:hover { background: url(../img/munu-nav.gif) no-repeat;}

ul.nav li.about a:hover { background-position: 0 -32px;}

ul.nav li.dn a:hover { background-position: 0 -64px;}

ul.nav li.gl a:hover { background-position: 0 -96px;}

ul.nav li.write a:hover { background-position: 0 -128px;}

Ссылка на рабочий пример - проверял во всех браузерах абсолютно одинаковый эффект

http://psywalker.ru/SAITS/IvanMatveev/main-page.html

Осталось как то решить две проблемы:

1) Сделать меню на ПНГ , ну это ерунда, единственное тогда как быть с ИЕ6?

2) Сделать так, что-бы Глоу был хотя-бы похож на правду

[LunatiK]

Замечательно, немного осталось

А чё ты так сильно заморочился с этим PNG ? Сделай jpeg!

Делаешь div с фоном этого монитора но без текста и делаешь jpeg и накладываешь его сверху тока он будет размером поменьше в ширину того куска с подсветкой что у тебя в munu-nav.gif

[psywalker]

LunatiK

1)

А чё ты так сильно заморочился с этим PNG ? Сделай jpeg!

С ПНГ заморочился, потому что во первых нижний фон под самым меню внизу, где проводки торчат, должен быть прозрачный, чтобы сквозь него был виден фон страницы, а во Вторых этот эффект сияния как мне кажется на ПНГ будет выглядеть точно, как нужно, потому что этоже полупрозрачная бадяга, и такая ещё замудрённая, сам видишь..

2)

Делаешь div с фоном этого монитора но без текста и делаешь jpeg и накладываешь его сверху тока он будет размером поменьше в ширину того куска с подсветкой что у тебя в munu-nav.gif

Если можно, прям подробно вот этот способ плиз

[LunatiK]

С картинкой заморачиваться влом (всмысле заливать куда-то)

Но суть такая

<div class="monik">
				<ul class="nav">
					<li class="auto"><a href="#"></a></li>
					<li class="about"><a href="#"></a></li>
					<li class="dn"><a href="#"></a></li>
					<li class="gl"><a href="#"></a></li>
					<li class="write"><a href="#"></a></li>
				</ul>
</div>

Класу monik задаёшь бекграунд с картинкой 180х246 на нём экран с фоном но без надписей

а надписи у тебя в jpeg'е 138х160+160 т.е. 160 под текст без подсветки и текст с подсветкой и который будет выступать в роле действующего munu-nav.gif