Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Скрипт всплывающего меню (https://javascript.ru/forum/dom-window/15018-skript-vsplyvayushhego-menyu.html)

online 10.02.2011 00:24

Скрипт всплывающего меню
 
Коллеги, доброго времени суток!

С JS работаю совсем не давно, учусь в основном на примерах.
Немного занимаюсь web-дизайном. Сейчас работаю над одним сайтом юридической фирмы.
Использую скрипт для отображения "сплывающего" меню при наведении мышки (меню с услугами).
Столкнулся с проблемой...

В коде жестко прописываю координаты кнопки, соответственно на разных мониторах надпись кнопки отображается в разных местах - блуждающая кнопка... То же самое, при указании %.
Собственно, с этим и обращаюсь, может кто подскажет, как справиться с этим?

вот сайт http://www.vestinfo-online.ru

и код...

<script language="JavaScript">
<!--
over_header = new Array();
over_menu = new Array();

for(i=1;i<=3;i++)
{
over_header[i] = 0;
over_menu[i] = 0;
}

function Turn(id, mode)
{
if(mode)
eval("setTimeout(\"On(" + id + ");\",200)");
else
eval("setTimeout(\"Off(" + id + ");\",200)");
}

function On(id)
{
eval("document.getElementById('smenu" + id + "')").style.visibility =
"visible";
}

function Off(id)
{
if(!over_menu[id] && !over_header[id])
{
eval("document.getElementById('smenu" + id + "')").style.visibility =
"hidden";
}
}
-->
</script>

</style>
</head>


<body style="padding:0; margin:0">

<div style="position:absolute; top:255px; left:115px; width:150px">
<a href="#.html" class="style27"
onmouseover="Turn(1,1); over_header[1]=1;" onmouseout="Turn(1,0); over_header[1]=0;">Услуги</a></div>

<div id="smenu1" class="smenu" style="top: 253px; left:300px"
onmouseover="over_menu[1]=1;" onmouseout="Turn(1,0); over_menu[1]=0;">
<a href="serv1.htm" class="style28">Создание, реорганизация и ликвидация ООО, ОАО, ЗАО</a><br>
<a href="serv2.htm" class="style28">Страховые споры</a><br>
<a href="serv3.htm" class="style28">Исполнительное производство</a><br>
<a href="serv4.htm" class="style28">Производство по уголовным и административным делам</a><br>
<a href="serv5.htm" class="style28">Арбитраж</a><br>
<a href="serv6.htm" class="style28">Представительство в судах РФ</a><br>
<a href="serv7.htm" class="style28">Защита прав потребителей</a><br>
<a href="serv8.htm" class="style28">Сделки с недвижимостью</a><br>
<a href="serv9.htm" class="style28">Ведение наследственных дел</a><br>
<a href="serv10.htm" class="style28">Гражданско-правовые споры: жилищные, семейные, трудовые</a>
</div>


спасибо!

NoResponse 10.02.2011 08:52

если по простому - кнопка ваша как вы сами и сказали "жестко прописываю координаты кнопки", прописываете, но прописываете относительно body и на таблицу которая по центру - оная не попадает
перенесите див с меню в таблицу к остальным разделам меню и все будет нормально. только не забудьте ячейке таблицы поставить "position: relative"

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

online 10.02.2011 10:18

Огромное спасибо за подсказку, NoResponse!

Что касается кода, то как я и говорил ранее, только учусь...
Методом проб и ошибок, по примерам и т.д.

NoResponse, может посоветуете какую-нибудь соответсвующую литературу (прошу прощения, если такая тема уже присутсвует на форуме)... стОящую, именно с точки зрения специалиста.

благодарю!

ksa 10.02.2011 10:29

Цитата:

Сообщение от NoResponse
только не забудьте ячейке таблицы поставить "position: relative"

Ячейка таблицы может повести себя "предательски" в некоторых моментах... :D Т.ч. лучше подстраховаться и в ячеку сунуть див c

position: relative;
width: 100%;
height: 100%;

online 10.02.2011 10:34

Спасибо, ksa!
обязательно учту Ваше замечание!


Часовой пояс GMT +3, время: 01:58.