Нужна помощь с кодом

[Makha]

Верстаю сайт. Все замечательно, НО пришлось сделать менб на Javasсript скопировав код с сайта, т.к. я пока не понимаю как это делается...
Собственно проблема в меню.
В макете оно выглядит так:

Я это реализовала... Но работает оно не совсем корректно. В частности после последних изменений html+css меню отлично работает в Опере и ИЕ... В не зависимости от ширины используемого экрана находится на своем месте... Но! В Хроме и Мазиле не работает Точнее работает но очень странно, только с права на лево. Как?? Почему??? Я не понимаю...
Привязываться к джаве совсем не обязательно....

Залила на хост: madhed.h16.ru/

Есть идеи, как адаптировать это все к ИЕ6? И прозрачность, и полупрозрачность... >_<

Css отвечающие за расположение:

#msa{ 	position: relative; 	visibility: hidden;	z-index: 5;	left: 22px;	top: -57px;	text-align: left;}
#msb {	position: relative;	visibility: hidden;	z-index: 5;	left: 131px;	top: -201px;	text-align: left;}
#msc {	position: relative;	visibility: hidden;	z-index: 5;	left: 216px;	top: -303px;	text-align: left;}
#msd {	position: relative;	visibility: hidden;	z-index: 5;	left: 325px;	top: -433px;	text-align: left;}

Css отвечающие за вид:

.menu_sel1_1 {
	background-image: url(menu_v_1.png);
	background-repeat: no-repeat;
	display: block;
	height: 22px;
	width: 201px;
	z-index: 4;
	margin-top: -9px;}
.menu_sel1_01 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	color: #FFF;
	text-decoration: underline;
	background-image: url(menu_v_01.png);
	background-repeat: no-repeat;
	text-align: left;
	display: block;
	height: 28px;
	width: 102px;
	padding-top: 9px;
	z-index: 4;}
.menu_sel1_2 {
	z-index: 4;
	margin-left: 7px;}
.menu_sel1_3 {
	z-index: 4;
	background-image: url(menu_v_02.png);
	text-align: left;
	display: block;
	height: auto;
	width: 201px;}
.menu_sel1_5 {
	z-index: 4;
	background-image: url(menu_v_03.png);
	display: block;
	height: 10px;
	width: 201px;}
.menu_sel2_1 {
	background-image: url(menu_2_2.png);
	background-repeat: no-repeat;
	display: block;
	height: 22px;
	width: 178px;
	z-index: 4;
	margin-top: -9px;}
.menu_sel2_01 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	color: #FFF;
	text-decoration: underline;
	background-image: url(menu_2_01.png);
	background-repeat: no-repeat;
	text-align: left;
	display: block;
	height: 28px;
	width: 79px;
	padding-top: 9px;
	z-index: 4;}
.menu_sel2_2 {
	z-index: 4;
	margin-left: 9px;}
.menu_sel2_3 {
	z-index: 4;
	background-image: url(menu_2_02.png);
	text-align: left;
	display: block;
	height: auto;
	width: 178px;}
.menu_sel2_5 {
	z-index: 4;
	background-image: url(menu_2_03.png);
	display: block;
	height: 10px;
	width: 178px;}
.menu_sel1_4{
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #FFF;
	text-align: left;
	display: block;
	margin-left: 10px;}
.menu_sel3_1 {
	background-image: url(menu_3_2.png);
	background-repeat: no-repeat;
	display: block;
	height: 20px;
	width: 211px;
	z-index: 4;
	margin-top: -9px;}
.menu_sel3_01 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	color: #FFF;
	text-decoration: underline;
	background-image: url(menu_3_01.png);
	background-repeat: no-repeat;
	text-align: left;
	display: block;
	height: 28px;
	width: 112px;
	padding-top: 9px;
	z-index: 4;}
.menu_sel3_3 {
	z-index: 4;
	background-image: url(menu_3_02.png);
	text-align: left;
	display: block;
	height: auto;
	width: 211px;}
.menu_sel3_5 {
	z-index: 4;
	background-image: url(menu_3_03.png);
	display: block;
	height: 10px;
	width: 211px;
}

html код вызова меню:

<table width="500px;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><a href="http://#" class="menu" target=_blank>Компания</a></td>
<td width="5px;" align="center" valign="middle"><img src="http://images/razd_gr.jpg" width="1px;" height="8px;"></td>
<td align="center"><a href="http://#" class="menu" target=_blank>Услуги</a></td>
<td width="5px;" align="center" valign="middle"><img src="http://images/razd_gr.jpg" width="1px;" height="8px;"></td>
<td align="center"><a href="http://#" class="menu" target=_blank>Клиентам</a></td>
<td width="5px;" align="center" valign="middle"><img src="http://images/razd_gr.jpg" width="1px;" height="8px;"></td>
<td align="center"><a href="http://#" class="menu" target=_blank>Партнерам</a></td>
<td width="5px;" align="center" valign="middle"><img src="http://images/razd_gr.jpg" width="1px;" height="8px;"></td>
<td align="center"><a href="http://#" class="menu_stat" target=_blank>Статьи</a></td>
</tr>
</table>
<td width="115px;" height="46px;" class="menu_tb2">
</td>
	

html код самих меню:

<div id="msa">
<div class="menu_sel1_01"><div class="menu_sel1_2">Компания</div></div>
<div class="menu_sel1_1"></div>
<div class="menu_sel1_3">
<a href="http://#" class="menu_sel1_4" target=_blank>О компании</a> 
<a href="http://#" class="menu_sel1_4" target=_blank>Новости</a>
<a href="http://#" class="menu_sel1_4" target=_blank>Вакансии</a>
<a href="http://#" class="menu_sel1_4" target=_blank>Контакты. Схема проезда</a>
<a href="http://#" class="menu_sel1_4" target=_blank>Наши клиенты</a>
<a href="http://#" class="menu_sel1_4" target=_blank>Наши партнеры</a> </div>
<div class="menu_sel1_5 "></div>
</div>

<div id="msb">
  <div class="menu_sel2_01"><div class="menu_sel1_2">Услуги</div></div>
  <div class="menu_sel2_1"></div>

<div class="menu_sel2_3">
<a href="http://#" class="menu_sel1_4" target=_blank>?</a> 
<a href="http://#" class="menu_sel1_4" target=_blank>...</a>
<a href="http://#" class="menu_sel1_4" target=_blank>...</a>
 </div>
<div class="menu_sel2_5"></div>
</div>
<div id="msc">
<div class="menu_sel1_01"><div class="menu_sel1_2">Клиентам</div></div>
<div class="menu_sel1_1"></div>
<div class="menu_sel1_3">
<a href="http://#" class="menu_sel1_4" target=_blank>Заказ услуг</a> 
<a href="http://#" class="menu_sel1_4" target=_blank>Служба поддержки</a>
<a href="http://#" class="menu_sel1_4" target=_blank>Договора</a>
<a href="http://#" class="menu_sel1_4" target=_blank>Документация, лицензии</a>
<a href="http://#" class="menu_sel1_4" target=_blank>Правила пользования</a>
 </div>
<div class="menu_sel1_5"></div>
</div>
<div id="msd">
<div class="menu_sel3_01"><div class="menu_sel2_2">Партнерам </div></div>
<div class="menu_sel3_1"></div>
<div class="menu_sel3_3">
<a href="http://#" class="menu_sel1_4" target=_blank>Партнерское предложение</a> 
<a href="http://#" class="menu_sel1_4" target=_blank>Программа I</a>
<a href="http://#" class="menu_sel1_4" target=_blank>Программа II</a>
<a href="http://#" class="menu_sel1_4" target=_blank>Спонсорство</a>
<a href="http://#" class="menu_sel1_4" target=_blank>Рекламное партнерство</a>
<a href="http://#" class="menu_sel1_4" target=_blank>Медиа</a> </div>
<div class="menu_sel3_5"></div>
</div>

Javasсript:

function MM_reloadPage(init) { if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function MM_findObj(n, d) { var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;}
function P7_autoLayers() { var g,b,k,f,args=P7_autoLayers.arguments;
var a = parseInt(args[0]);if(isNaN(a))a=0;
if(!document.p7setc) {p7c=new Array();document.p7setc=true;
for (var u=0;u<10;u++) {p7c[u] = new Array();}}
for(k=0; k<p7c[a].length; k++) {
if((g=MM_findObj(p7c[a][k]))!=null) {
b=(document.layers)?g:g.style;b.visibility="hidden";}}
for(k=1; k<args.length; k++) {
if((g=MM_findObj(args[k])) != null) {
b=(document.layers)?g:g.style;b.visibility="visible";f=false;
for(j=0;j<p7c[a].length;j++) {
if(args[k]==p7c[a][j]) {f=true;}}
if(!f) {p7c[a][p7c[a].length++]=args[k];}}}
}

@темы: HTML, Оптимизация, CSS, JavaScript

Comments

[alhames]

Плз, оберните каждый кусок кода в [CODE][/CODE]
И допишите JS - видно он у вас оборвался.
Если не вмещается в пост - можно разместить в комментарии.

Касательно верстки: то всплывающий блок делится на три части - top, middle, bottom.
Top и bottom имеют фиксированные ширину / высоту и на них вешаются куски с закруглением.
На middle вешается на repeat-y однопиксельная вырезка:


Все сохраняется в png24
Для ie6 задаются фильтры.
Более подробно могу рассмотреть только когда увижу код в нормальном формате..

[Makha]

alhames поправила пост.

Делила изначально как вы описали... Тогда меню работало через 1. Не срабатывало меню под красной плашкой...
Теперь там 4 части... 2 вверху (одна меньше по ширине, чтобы работало нормально)...

Все сохранено в png24, с заданной полупрозрачностью...

[alhames]

Фильтр для ie6:
img { background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="image.png", sizingMethod="crop"); }

Только вам по-моему вместо crop надо scale подставить - я не помню уже )

Тогда меню работало через 1. Не срабатывало меню под красной плашкой...

))))))
Дык само собой не сработает, выж его перекрыли и включили visibility: hidden;
Подробнее почитайте про visibility. Или даже проще - забудьте про это свойство. Реально сколько я уже проектов сверстал - едвали смогу вспомнить хоть один, где оно могло понадобиться.
display: none; полностью скрывает элемент - его и юзайте.

Сейчас посмотрим подробнее..

[Makha]

alhames visibility я использую, потому что он шел с кодом java... И совсем не уверена, что если я изменю что-то в коде он останется рабочим...

b=(document.layers)?g:g.style;b.visibility="hidden";}}
for(k=1; k<args.length; k++) {
if((g=MM_findObj(args[k])) != null) {
b=(document.layers)?g:g.style;b.visibility="visible";f=false;

вот в этом куске менять?

И этот самый код отлично работает в опере и ие8 (остальные еще не настраивала)...
Вот залила на хостинг: madhed.h16.ru/


ie6 попробую...

у меня там еще будут вопросы >_< Но не все ж сразу сваливать

[alhames]

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

html

1. Таблицы в меню используются только для равномерного распределения отступов между элементами меню в резиновых макетах. Да и то, если приходится делать выпадание, но в ячейку пихается див с width/height = 100%
Поэтому берем все элементы меню и запихиваем в <div class="menu"></div>

2. Создаем столько дивов внутри div.menu, сколько у нас элементов. Каждый див будет выглядить примерно так:
<div class="item item1"><a class="link">Ссылка</a></div>
item1, item2, item3 и тд нужны только в том случае, если не удается сделать универсальное выпадение.

3. Пихаем внутырь каждого div.item сразу за a.link выпадающий блок. Он выглядит примерно так:
<div class="list"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>

4. Внутри div.middle размещаем ссылки. Обысно используют ul li, но я недолюбливаю эту конструкцию, поэтому можно просто a с display: block;

css

1. Задаем div.menu div.item { position: relative; } и все остальные свойства, универсальные для общего блока
2. Прописываем стиль выпадающих блоков: div.menu div.item div.list { position: absolute; left: 0px; top: 20px; display: none; z-index: 10; }
3. Вешаем бекграунды. Вот тут нам и понадобиться item1, item2 и тд, так как картинка у div.item div.list div.top будет у каждого своя (скорее всего, но возможно совпадет)

js

Хоть увольте, но я юзаю JQuery и не мучаюсь с такой кашей, которую вы выложили.
По этому советую подключить фреймворк. Код будет примерно такой:

$("div.menu div.item").hover(
function() { $(this).find("div.list").show(); },
function() { $(this).find("div.list").hide(); }
);

Согласитесь намного проще?

Вроде все.. Хотя возможно что то забыл.

[alhames]

div.item div.list div.top

Да, кстати, да бы быть правильно понятым - это я не перечисляю блоки, т.к. не ставлю запятых, а указываю наследование (как в css).
Надеюсь вы поняли о чем речь..

[Makha]

alhames
1. У меня тут резиновая верстка
min-width: 988px;
max-width: 1200px;
Поэтому и засунула в таблицу... в div пыталась... Но div -верстка не мой конек

подключить фреймворк?
с любой джава у меня проблема... Хоть и приходится использовать...
Можно подробнее, как делать с джава?

Если пойму что делать с джава, попробую сделать еще раз в div...

[alhames]

Судя по примеру у вас меню не тянется.
Если есть желание тянуть - пихайте в td блоки div.item. Причем этим td задавайте фиксированную ширину, а между каждым td с div.item вставьте еще по td с &nbsp; и не заданной шириной.

в div пыталась... Но div -верстка не мой конек

Вы от нее никуда не денетесь. Поэтому уж лучше начните привыкать сейчас )

подключить фреймворк?

jquery.com/ - качаете последний релиз и подключаете в head перед всеми другими js
Как у вас с английским дело обстоит?

с любой джава у меня проблема...

И еще, чтобы вы сами себя не запутали - Javasсript aka JS - это не Java. Поэтому не называйте его джава - иначе вас не правильно поймут.

[Makha]

Когда меняю visible на display перестает работать меню вообще

[alhames]

Ну в вашей реализации - да, это понятно.
Попробуйте сделать как я описал.

[Makha]

Вначале:

<sсript src="http://code.jquery.com/jquery-latest.js"></sсriрt>

Потом в блоке javasсript:

$("div.menu div.item1").hover(
function() { $(this).find("div.list").show(); },
function() { $(this).find("div.list").hide(); }
);

html примерно так? :

<div class="menu">
<div class="item1">
<a href="#"  class="menu">Компания</a>    <div class="list">
<div class="menu_sel1_01"><div class="menu_sel1_2">Компания</div></div>
<div class="menu_sel1_1"></div>
<div  class="menu_sel1_3">
<a href="#" class="menu_sel1_4">О компании</a> 
<a href="#" class="menu_sel1_4">Новости</a>
<a href="#" class="menu_sel1_4">Вакансии</a>
<a href="#" class="menu_sel1_4">Контакты. Схема проезда</a>
<a href="#" class="menu_sel1_4">Наши клиенты</a>
<a href="#" class="menu_sel1_4">Наши партнеры</a> </div>
<div class="menu_sel1_5 "></div>
</div>
</div>
            			<div  class="item1"><a href="#"  class="menu">Компания</a></div>
			<div  class="item1"><a href="#"  class="menu">Компания</a></div>
			<div  class="item1"><a href="#"  class="menu">Компания</a></div>
			<div  class="item1"><a href="#"  class="menu">Компания</a></div></div>

и css

.list {
	position: relative;
	z-index: 5;
	left: 22px;
	top: 10px;
	text-align: left;
	display: none;
}
.menu {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	color: #000;
	z-index: 20;
}
.item1 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	color: #000;
	z-index: 20;
	width: 102px;
	height: 46px;
	float: left;
	position: relative;
}

Правильно?

[alhames]

<sсript src="http://code.jquery.com/jquery-latest.js"></sсriрt>
Так нельзя. Либо скачайте и подключайте у себя, либо подключайте с гугула - code.google.com/intl/ru-RU/apis/libraries/devgu...

А код.. Ну вот так посмотрите:

<style>
.menu {
	font-family: Verdana, Geneva, sans-serif;
	height: 20px;
}
.menu div.item a.menu-link {
	font-size: 16px;
	color: #000;
	z-index: 20;
	position: relative;
}
.menu div.item:hover a.menu-link {
	color: #f00;
}
.menu div.item div.list {
	position: absolute;
	z-index: 10;
	left: 0px;
	top: 0px;
	text-align: left;
	display: none;
	width: 300px;
}
.menu div.item div.list div.top {
	background-color: #ff0;
	height: 20px;
}
.menu div.item div.list div.top {
	padding: 10px;
}
.menu div.item div.list div.bottom {
	background-color: #ff0;
	height: 20px;
}
.menu .list a {
	font-size: 14px;
	color: #fff;
	background-color: #999;
	display: block;
}
.menu .item {
	position: relative;
	background-color: #ccc;
	margin-right: 20px;
	width: 200px;
	height: 20px;
	float: left;
}
.menu div.item:hover div.list {
	display: block;
}
</style>

<div class="menu">
    <div class="item">
        <a href="#" class="menu-link">Компания</a>
        <div class="list">
            <div class="top"></div>
            <div class="middle">
                <a href="#" class="menu_sel1_4">О компании</a>
                <a href="#" class="menu_sel1_4">Новости</a>
                <a href="#" class="menu_sel1_4">Вакансии</a>
                <a href="#" class="menu_sel1_4">Контакты. Схема проезда</a>
                <a href="#" class="menu_sel1_4">Наши клиенты</a>
                <a href="#" class="menu_sel1_4">Наши партнеры</a>
            </div>
            <div class="bottom "></div>
        </div>
    </div>
    <div class="item">
        <a href="#" class="menu-link">Компания</a>
    </div>
    <div class="item">
        <a href="#" class="menu-link">Компания</a>
    </div>
    <div class="item">
        <a href="#" class="menu-link">Компания</a>
    </div>
    <div class="item">
        <a href="#" class="menu-link">Компания</a>
    </div>
</div>

Работает без js, но для ie6 js всеже придется прописать

[Makha]

alhames Почему нельзя с сайта разработчика? *скачаю переподключу*
Спасибо, сейчас попробую разобраться.

[alhames]

Я что-то подумал, что при наведенном курсоре на пункт 1 и перемещение его направо пункт 2 не раскроется, т.к. он перекрыт.
Хотя возможно от этой проблемы избавит z-index. В любом случае - пробуйте )

[Makha]

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

Тут я не меняла:

.menu_sel1_1 {
	background-image: url(menu_v_1.png);
	background-repeat: no-repeat;
	display: block;
	height: 22px;
	width: 201px;
	z-index: 4;
	margin-top: -9px;

}
.menu_sel1_01 {
	color: #FFF;
	text-decoration: underline;
	background-image: url(menu_v_01.png);
	background-repeat: no-repeat;
	text-align: left;
	display: block;
	height: 28px;
	width: 102px;
	padding-top: 9px;
	z-index: 4;
	/* [disabled]position: relative; */
	/* [disabled]top: 0px; */
	/* [disabled]left: 0px; */
}

.menu_sel1_2 {
	z-index: 25;
	margin-left: 7px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	color: #FFF;
	text-decoration:underline;
	/* [disabled]position: relative; */
	/* [disabled]top: 10px; */
	/* [disabled]left: 0px; */
	/* [disabled]display: block; */
	/* [disabled]margin-bottom: -20px; */
	/* [disabled]padding-top: 25px; */
}
.menu_sel1_3 {
	z-index: 4;
	
	background-image: url(menu_v_02.png);
	text-align: left;
	display: block;
	height: auto;
	width: 201px;
}
.menu_sel1_5 {
	z-index: 4;
	background-image: url(menu_v_03.png);
	display: block;
	height: 10px;
	width: 201px;
}

.menu_sel2_1 {
	background-image: url(menu_2_2.png);
	background-repeat: no-repeat;
	display: block;
	height: 22px;
	width: 178px;
	z-index: 4;
	margin-top: -9px;
}
.menu_sel2_01 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	color: #FFF;
	text-decoration: underline;
	background-image: url(menu_2_01.png);
	background-repeat: no-repeat;
	text-align: left;
	display: block;
	height: 28px;
	width: 79px;
	padding-top: 9px;
	z-index: 4;
}

.menu_sel2_2 {
	z-index: 4;
	margin-left: 9px;
}
.menu_sel2_3 {
	z-index: 4;
	background-image: url(menu_2_02.png);
	text-align: left;
	display: block;
	height: auto;
	width: 178px;
}
.menu_sel2_5 {
	z-index: 4;
	background-image: url(menu_2_03.png);
	display: block;
	height: 10px;
	width: 178px;
}
.menu_sel1_4{
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #FFF;
	text-align: left;
	display: block;
	margin-left: 10px;
}

.menu_sel3_1 {
	background-image: url(menu_3_2.png);
	background-repeat: no-repeat;
	display: block;
	height: 20px;
	width: 211px;
	z-index: 4;
	margin-top: -9px;
}
.menu_sel3_01 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	color: #FFF;
	text-decoration: underline;
	background-image: url(menu_3_01.png);
	background-repeat: no-repeat;
	text-align: left;
	display: block;
	height: 28px;
	width: 112px;
	padding-top: 9px;
	z-index: 4;
}

.menu_sel3_3 {
	z-index: 4;
	background-image: url(menu_3_02.png);
	text-align: left;
	display: block;
	height: auto;
	width: 211px;
}
.menu_sel3_5 {
	z-index: 4;
	background-image: url(menu_3_03.png);
	display: block;
	height: 10px;
	width: 211px;
}

А вот тут поставила position:

.menu {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	color: #000;
	z-index: 20;
	display: block;
	position: relative;
	top: 0px;
	left: 0px;
}

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