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

psywalker · June 6, 2009

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

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

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

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

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

AjiTae · June 7, 2009

Да элементарно.

Стандартный вариант:

<style>
#png {
	 height:247px; 
	 width:273px;
	 background: url(menu.png);
	 -background: none;  /* убираем бэкграунд для ie6 */
	 -filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='menu.png', sizingMethod='scale');  /* подгружаем полупрозрачный png для ie6 */
}
</style>
<div id="png"></div>

Ну а само меню естесно целиковым спрайтом, с прописыванием background-position к a и a:hover.

P.S. Некликабельные ссылки, проблема некоего кривого девайса.(софта, рук или мозга - это уж как повезёт)

Edited June 7, 2009 by AjiTae

psywalker · June 7, 2009

спасибо тебе за ответ, а хотелось бы уточнить пару вопросов:

1) Как изначально должен выглядеть Фон у самого ul ? В смысле просто Коричневый фони или уже с нарисованными фразами?

2)

P.S. Некликабельные ссылки, проблема некоего кривого девайса.(софта, рук или мозга - это уж как повезёт)

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

Посматри плиз, вот я тут делал: http://www.psywalker.ru/SAITS/IvanMatveev/main-page.html , что нужно переделать?

Игорь Ермаков · June 7, 2009

Как вариант можно использовать таблицу. Но я бы сделал списком. Каждой ссылке анкором отдельный блок, как hover прописываем фон.

AjiTae · June 7, 2009

спасибо тебе за ответ, а хотелось бы уточнить пару вопросов:
1) Как изначально должен выглядеть Фон у самого ul ? В смысле просто Коричневый фони или уже с нарисованными фразами?
2)
Пожалуйста, можно поподробнее этот момент, потому что эта проблема действительна очень важна для меня, так как часто сталкиваюсь с ней..
Посматри плиз, вот я тут делал: http://www.psywalker.ru/SAITS/IvanMatveev/main-page.html , что нужно переделать?

Эээм ну для начала вместо октоторпа(#) таки добавить ссылки)

psywalker · June 7, 2009

AjiTae

Эээм ну для начала вместо октоторпа(#) таки добавить ссылки)

Извини, но насчёт ссылок и решёток в них, это для меня щас не важный вопрос, мне бы хотелось узнать ответы на другие вопросы,на которые я не могу найти ответа уже долгое время

AjiTae · June 7, 2009

Ррр, тен минетс, плиз.

...уложился в 20.)

Вот код:

<html>
<head>
<style type="text/css">
div.nav a
{
display:block;
width:138px;
height:32px;
background: url(menu1.png) 0px 0px; 
}

div.nav a.page2 {background-position: 0px -32px;}
div.nav a.page3 {background-position: 0px -64px;}
div.nav a.page4 {background-position: 0px -96px;}
div.nav a.page5 {background-position: 0px -128px;}

div.nav a:hover {background-position: -138px 0px;}
div.nav a:hover.page2 {background-position: -138px -32px;}
div.nav a:hover.page3 {background-position: -138px -64px; }
div.nav a:hover.page4 {background-position: -138px -96px;}
div.nav a:hover.page5 {background-position: -138px -128px;}

</style>
<title>Со</title>
</head>

<body>
<div class="nav">
	<a class="page1" href="#"></a>
	<a class="page2" href="#"></a>
	<a class="page3" href="#"></a>
	<a class="page4" href="#"></a>
	<a class="page5" href="#"></a>
</div>
</body>
</html>

Вот картинка:

Работает так.

Как видишь, всё просто. Думаю, вставить и отпозиционировать данный div ты сможешь.

Edited June 7, 2009 by AjiTae

psywalker · June 7, 2009

да друг, нет проблем, сколько будет нужно, спасибо тебе

AjiTae · June 7, 2009

Апдейт.)

*fxd for better profit*

<html>
<head>
<style type="text/css">
div.nav
{
width:138px;
height:160px;
background: url(menu1.png) -138px 0px; 
}

div.nav a
{
display:block;
width:138px;
height:32px;
background: url(menu1.png) 0px 0px; 
}

div.nav a.page2 {background-position: 0px -32px;}
div.nav a.page3 {background-position: 0px -64px;}
div.nav a.page4 {background-position: 0px -96px;}
div.nav a.page5 {background-position: 0px -128px;}

div.nav a:hover {background: none;}
</style>
</head>

<body>
<div class="nav">
	<a href="#"></a>
	<a class="page2" href="#"></a>
	<a class="page3" href="#"></a>
	<a class="page4" href="#"></a>
	<a class="page5" href="#"></a>
</div>
</body>
</html>

Картинка:

Работает так. (вроде бы разницы не заметно, но во-первых код по-меньше, во вторых не будет возможных в первом случае миганий в ie)

Edited June 7, 2009 by AjiTae

psywalker · June 7, 2009

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

Знаешь только, что мне не нравится? это то, что в ИЕ6 при наведении на ссылки они долго отходят до своего первоначального состояния

Edited June 7, 2009 by psywalker

AjiTae · June 7, 2009

Хмм, во втором варианте всё должно вроде работать быстро...

Однако проверил на внешнем хосте, есть небольшие тормоза, не смертельные конечно...даж за фичу сойдут, типа "затухание")). Надо поэкспериментировать с background:transparent; , background-image:none;, visibility:hidden; итд, короче с вариантами исчезновенияб мож какой лучше будет.)

А вообще - так им ослиным ублюдкам, которым лень нормальный браузер поставить, и надо, пусть страдают.)

Edited June 7, 2009 by AjiTae

Игорь Ермаков · June 7, 2009

psywalker, интересное меню, скинь пожайлуста PSD если можно. Тоже хочу попробовать сверстать.

AjiTae · June 7, 2009

Ну я бы не сказал, что интересное, идея стара как мир. Даж у мего первого сайта в давние времена было такое)) (нет, естесно не такое красивое, и свёрстано было тупо отдельными картинками, да и сайт был ещё на фреймах(: , но суть то та же - ряд изменяющихся при наведении картинок(: )

Вот в плане реализации да, можно поизвращаться, но имхо один большой спрайт на всё меню лучший из вариантов:

1. Число возможных запросов серверу максимально сокращено до одного.

2. Невозможность тормозов из-за погрузки лишних (скрытых) изображений.

3. Общая красивость решения.

4. ???

5. PROFIT!

Впрочем если вам действительно интересно - карты в руки, я же тож верстал из интереса, но скорей не к проблеме, а к самому процессу)

Игорь Ермаков · June 7, 2009

Мне просто для опыта

psywalker · June 7, 2009

AjiTae

Послушайте, я заметил ты спец в CSS, поэтому прошу помощи, ситуация следующая: Вот я сверстал меню немного по своему, но почему то, когда я ставлю ему свойство position: absolute; то в ИЕ6 ссылки становятся некликабельные, почемууу?? я уже замучился, мне уже ради принципа просто интересно, что в этом коде не так? темболее для Ие6 я даже не использую ПНГ, посматри пожалуйста http://psywalker.ru/SAITS/IvanMatveev/gallery-

2.html#

Игорь Ермаков

Прости, насчёт макета не могу помочь, потому что это комерческий проект и его нельзя никаму давать

Ты кстати ещё обещал переверстать Вердера макет, забыл?

Edited June 7, 2009 by psywalker

Игорь Ермаков · June 7, 2009

Игорь Ермаков
Прости, насчёт макета не могу помочь, потому что это комерческий проект и его нельзя никаму давать

Круто. Ну я сам чё нить подобное нарисую, просто сверстать такую штуку интересно.

Ты кстати ещё обещал переверстать Вердера макет, забыл?

Нет не забыл, просто может сам понимаешь, лето началось, туда надо сходить, сюда надо сходить и тп. Ща вот уляжется всё сделаю тогда.

AjiTae · June 7, 2009

AjiTae
Послушайте, я заметил ты спец в CSS, поэтому прошу помощи, ситуация следующая: Вот я сверстал меню немного по своему, но почему то, когда я ставлю ему свойство position: absolute; то в ИЕ6 ссылки становятся некликабельные, почемууу?? я уже замучился, мне уже ради принципа просто интересно, что в этом коде не так? темболее для Ие6 я даже не использую ПНГ, посматри пожалуйста http://psywalker.ru/SAITS/IvanMatveev/gallery-
2.html#

Эээм, во первых: накой это нагромождение тэгв? Кроме как увеличивать количество вложенных объектов(а соответственно и время загрузки страницы, правда не слишком значительно, но всё же) оно не для чего не нужно.

Далее: тестовые обозначения, если это нужно типа для поисковика, то лучше уж юзать title в ссылке.

А ссылки не изменяются, потому что ты элементарно забыл добавить a:hover(делающий background: none) который собственно их и меняет))

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

Edited June 7, 2009 by AjiTae

psywalker · June 7, 2009

AjiTae

А ссылки не изменяются, потому что ты элементарно забыл добавить a:hover(делающий background: none) который собственно их и меняет))

Нее, дружище пойми, у меня совсем другой код, я делал по своему, вроде сделал нормально, но почему в ИЕ6 не работают клики, не могу понять, вот мой код для ИЕ6:

				
<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 page"><a href="#">Галерея</a></li>
					<li class="write"><a href="#">Написать мне</a></li>
				</ul>
		div#cnt ul.nav { 
			position: absolute; 
			left: -242px; 
			top: 2em; 
			width: 140px; 
			height: 24.7em;
			padding: 2.5em 1.2em 0 2.8em;
			background: url(../img/menu1.gif) left top no-repeat;
			z-index: 1;

		}
			ul.nav li { height: 32px; position: relative;}

					ul.nav li.auto.page { background:  url(../img/li-bg.jpg) 0 0 no-repeat;}
					ul.nav li.about.page { background: url(../img/li-bg.jpg) 0 -32px no-repeat;}
					ul.nav li.dn.page a{ background: url(../img/li-bg.jpg) 0 -64px no-repeat;}
					ul.nav li.gl.page a{ background: url(../img/li-bg.jpg) 0 -96px no-repeat;}
					ul.nav li.write.page a{ background: url(../img/li-bg.jpg) 0 -128px no-repeat;}

Даже просто уже пишу ради интереса div#cnt ul.nav li a:hover { background:#f00;} , всё равно при наведении ссылки не становятся Красными, ваще не реагируют на клик, пока не уберу: position: absolute; с ul

Edited June 7, 2009 by psywalker

AjiTae · June 7, 2009

Естесно он не становится красным ибо картинка перекрывает любой цвет полностью, лол.)

psywalker · June 7, 2009

Естесно он не становится красным ибо картинка перекрывает любой цвет полностью, лол.)

Блин, да ты не понимаешь, причём тут картинка и ЛОЛ, неважно, что я хочу получить при наведении, фон или даже Картинку, всё равно не работает, только когда уберу position: absolute;

Edited June 7, 2009 by psywalker

AjiTae · June 7, 2009

Какое ужасное извращение моей прекрасной идеи.))

Тут неверно ВСЁ. И разбираться в этом ужасе, для того чтоб заставить ужас работать - не буду. Я могу красиво решить интересною задачу, но мне совершенно не интересна бессмысленная правка бессмысленного кривого кода, для того чтобы он потом бессмысленно и криво работал. Насинг пёрсонал.)

psywalker · June 7, 2009

Какое ужасное извращение моей прекрасной идеи.))
Тут неверно ВСЁ. И разбираться в этом ужасе, для того чтоб заставить ужас работать - не буду. Я могу красиво решить интересною задачу, но мне совершенно не интересна бессмысленная правка бессмысленного кривого кода, для того чтобы он потом бессмысленно и криво работал. Насинг пёрсонал.)

А ты можешь конктретно сказать, что тебе не нравится в моём варианте? чем он плох?

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

Вот позырь сам, как мне ещё было внедрить меню в это место, да и вообще как бы ты сделал сам? http://psywalker.ru/SAITS/IvanMatveev/main-page.html

И вообще я не заказ делаю, а для себя, для тренировки макет взял поверстать, поэтому и разбираю всякие варианты, для опыта, понимаешь?

Edited June 7, 2009 by psywalker

AjiTae · June 7, 2009

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<style type="text/css">
div.nav
{
width:180px;
height:221px;
background: url(http://195.234.110.159:666/menu5.gif) 0px 0px; 
padding-top:26px;
position:absolute; 
top:2em; 
left:-182px;
}
div.nav a
{
display:block;
width:138px;
height:32px;
margin-left:28px;
background: url(http://195.234.110.159:666/menu5.gif) -180px 0px; 
}
div.nav a.page2 {background-position: -180px -32px;}
div.nav a.page3 {background-position: -180px -64px;}
div.nav a.page4 {background-position: -180px -96px;}
div.nav a.page5 {background-position: -180px -128px;}

div.nav a:hover {background: none;}

</style>
<title>Со</title>
</head>

<body>

<!-- вставить на место убогого списка start-->
<div class="nav">
	<a class="page1" href="#"></a>
	<a class="page2" href="#"></a>
	<a class="page3" href="#"></a>
	<a class="page4" href="#"></a>
	<a class="page5" href="#"></a>
</div>
<!-- вставить на место убогого списка end-->


</body>
</html>

this

Проверено прямо внутри твоего сайта, работает как надо. (Firebug классная чтука, позволяет даж чужие сайты менять на лету(только визуально естесно))

P.S. Твой код меньше? Лолчто? Он громоздок и смысла не имеет.=\

Как по мне, на дизайнера ты вполне ничего потянешь, а верстальщик из тя не особо.) В принципе не велика потеря:верстала суть раб, низшая каста интернет-технологий.)

Edited June 8, 2009 by AjiTae

psywalker · June 8, 2009

Как по мне, на дизайнера ты вполне ничего потянешь, а верстальщик из тя не особо.) В принципе не велика потеря:верстала суть раб, низшая каста интернет-технологий.)

слушай, а не мог бы ты мне скинуть пару своих работ, по вёрстке, я хоть поучусь, посматрю, как мастер это умеет делать? Скинь самые лучшие на твой взгляд плиз, желательно побольше вёрсток

Так дружище, а теперь переходим к делу, вот для тебя специально сделал своё меню, со своим кодом и идеей, потом кстати вчера сидел до 4-х утра, выявил наконец ошибку в ИЕ6, дело было в скрипте одном, ну неважно вобщем, дело не в этом..Посмотрите-ка Мастер мой код и скажите, чем же он всё таки Громоздней и Хуже вашего??? Причём я настаиваю, чтобы Вы объяснили, или иначе грош Вам цена и Вашим словам!

Во первых меню я в отличии от Вас - Мастер, делаю на Списках, во вторых код у Вас больше - это явно, а также у меня всё везде работает абсолютно, и даже в ИЕ6..

HTML

</ul>

CSS

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;}

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

А теперь поставьте рядом Мой код и Ваш и сравните, и не забудьте объяснить, Чем Ваш код намного Лучше моего??? Только прошу, не надо отмазок и пантов, просто нормальным русским языком, чтоб я понял, что я за верстало

Edited June 8, 2009 by psywalker

psywalker · June 8, 2009

AjiTae

Ну что - Мастер, ждёте, пока за вас кто-то ответит? :lol:

AjiTae · June 8, 2009

По прежнему считаю список лишним, ну да хрен с ним.

Данный код есть копия моего, с поправкой на список и всё.

Чем мой код лучше моего же кода зеркально отражённого? Теперь уже ничем пожалуй.

Всё подчистили, чуток переставили и готово.

P.S. Только не надо вот этих стандартных "сперва добейся!", мне и так неплохо живётся.

Sign In

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

Question

Link to comment

Share on other sites

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

56 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information