Как сделать выпадающее меню самому?

 
0
 
JavaScript
ava
Zaman | 26.10.2004, 14:45
Скажи по какому принципу разрабатывается выпадающее меню?
Если можно примеры с обьяснениями
Comments (47)
ava
Step | 26.10.2004, 13:55 #
Сам сейчас с этим вожусь

подозреваю надо так
вставить слой
Цитата
<div style="border-style:solid; position: absolute; width: 100px; height: 100px; z-index: 1; left: 84px; top: 14px; background-color: #3333FF;  border-width:1px; " id="layer1">
  menu1<p>menu2</div>

а потом при наведении на пунк основного меню меню изменить свойства visibility:visible;

а при уходе мышки со слоя свойство установить visibility:hidden;



ava
Aliance | 26.10.2004, 15:00 #
Цитата (Step @ 26.10.2004, 13:55)


а при уходе мышки со слоя свойство установить visibility:hidden;


Тогда получаеться, что при уходу с заголовка в пункт меня слой исчезнет, нужно более сложная конструкция. Вечером объясню.
ava
Step | 26.10.2004, 15:15 #
Aliance, а сейчас, хотябы наметки - я уже с этим столкнулся
ava
GoodBoy | 26.10.2004, 15:32 #
ну к примеру вот:
это файл menu.js

var storedName = '';

var menuSize = new Array();
menuSize["about"] = 130;
menuSize["production"] = 100;
menuSize["news"] = 100;
menuSize["support"] = 155;
menuSize["grabli"] = 80;
menuSize["contact"] = 100;

var aboutMenu = new Array();

aboutMenu[0]=new Array();
aboutMenu[0][0]="about1";
aboutMenu[0][1]="/about/dgi.html";
aboutMenu[0][2]="О компании DGI";

aboutMenu[1]=new Array();
aboutMenu[1][0]="about2";
aboutMenu[1][1]="/about/zenon.html";
aboutMenu[1][2]="О компании ЗЕНОН";

var productionMenu = new Array();

productionMenu[0]=new Array();
productionMenu[0][0]="production1";
productionMenu[0][1]="/production/printers.html";
productionMenu[0][2]="Принтеры";

productionMenu[1]=new Array();
productionMenu[1][0]="production2";
productionMenu[1][1]="/production/plotters.html";
productionMenu[1][2]="Плоттеры";

productionMenu[2]=new Array();
productionMenu[2][0]="production3";
productionMenu[2][1]="/production/accessories.html";
productionMenu[2][2]="Аксессуары";

productionMenu[3]=new Array();
productionMenu[3][0]="production4";
productionMenu[3][1]="/production/why_dgi.html";
productionMenu[3][2]="Почему DGI ?";

productionMenu[4]=new Array();
productionMenu[4][0]="production4";
productionMenu[4][1]="/production/diploms.html";
productionMenu[4][2]="Дипломы";

var newsMenu = new Array();

newsMenu[0]=new Array();
newsMenu[0][0]="info1";
newsMenu[0][1]="/info/news.html";
newsMenu[0][2]="Новости";

newsMenu[1]=new Array();
newsMenu[1][0]="info2";
newsMenu[1][1]="/info/articles.html";
newsMenu[1][2]="Статьи";

var supportMenu = new Array();

supportMenu[0]=new Array();
supportMenu[0][0]="support1";
supportMenu[0][1]="/support/learning.html";
supportMenu[0][2]="Ликбез для новичка";

supportMenu[1]=new Array();
supportMenu[1][0]="support2";
supportMenu[1][1]="/support/downloads.html";
supportMenu[1][2]="Программы и драйверы";

supportMenu[2]=new Array();
supportMenu[2][0]="support3";
supportMenu[2][1]="/support/faq.html";
supportMenu[2][2]="Вопросы и Ответы";

supportMenu[3]=new Array();
supportMenu[3][0]="support4";
supportMenu[3][1]="/support/termins.html";
supportMenu[3][2]="Терминология";

var contactMenu = new Array();

contactMenu[0]=new Array();
contactMenu[0][0]="contact1";
contactMenu[0][1]="/contact/location.html";
contactMenu[0][2]="Карта проезда";

function createMenu(menuName,menuItems) {
var rowCount, rez, tableRowHTML = '';
var totalNoRows = menuItems.length;

var divHTML = '<DIV ID="'+menuName+'MenuDiv" class="DivMenu" style="width:'+
menuSize[menuName]+'px;" onmouseout="return hideMenu(this.id, event)">';
var tableHTML = '<TABLE BORDER=0 CELLSPASING=0 CELLPADDING=4 ID="'+
menuName+'Table" class=table1 style="width:'+menuSize[menuName]+'px;">';

if (totalNoRows>0) {
for (rowCount = 0; rowCount<totalNoRows; rowCount++) {
tableRowHTML = tableRowHTML + '<TR><TD ID=" ' + menuName+menuItems[rowCount][0] + ' " RollOver RollOut';
tableRowHTML = tableRowHTML + ' onclick="goPage(\'' + menuItems[rowCount][1] + '\')"';
tableRowHTML = tableRowHTML + ' class="TDmenu" width=100%> ' + menuItems[rowCount][2] + '</TD></TR>';
}
rez = divHTML+tableHTML+tableRowHTML+'</TABLE></DIV>';
} else {
rez = '<DIV ID="'+menuName+'MenuDiv" style="position:absolute;top:-1000;"></DIV>';
}
document.write(rez);
}

function showMenu(menuToShow, e, butt_name) {
storedName = butt_name;
if (ie) var srcElement = event.srcElement;
else var srcElement = e.target;
var xPos = parseInt(srcElement.offsetLeft);
var yPos = parseInt(srcElement.offsetTop);
getRef(menuToShow).style.top = yPos+srcElement.height;
getRef(menuToShow).style.left = xPos-1;
var part_name = butt_name.replace("MenuImage", "");
getRef(butt_name).src = '/images/top_menu/butt_'+part_name+'_over.gif';
}

function hideMenu(menuToHide, e) {
var toElementID;
if (ie) var mouseLastIn = event.toElement;
else var mouseLastIn = e.relatedTarget;

var h_obj = getRef(menuToHide);
var part_name = storedName.replace("MenuImage", "");

if (ie) {
if (mouseLastIn != h_obj && h_obj.contains(mouseLastIn)==false) {
h_obj.style.left = -1000;
h_obj.style.top = -1000;
getRef(storedName).src = '/images/top_menu/butt_'+part_name+'.gif';
}
} else {
if (mouseLastIn.id.indexOf(part_name)!=0) {
h_obj.style.left = -1000;
h_obj.style.top = -1000;
getRef(storedName).src = '/images/top_menu/butt_'+ part_name +'.gif';
}
}
}

function document_onmouseover(e) {
if (ie) var srcElement = event.srcElement;
else var srcElement = e.target;
if (srcElement.nodeType == 3) srcElement = srcElement.parentNode;
if (srcElement.tagName == "TD" && typeof(srcElement.RollOver) != "undefined") {
srcElement.style.color = "white";
srcElement.style.backgroundColor = "#FF7B00";
}
}

function document_onmouseout(e) {
if (ie) var srcElement = event.srcElement;
else var srcElement = e.target;
if (srcElement.nodeType == 3) srcElement = srcElement.parentNode;
if (srcElement.tagName == "TD" && typeof(srcElement.RollOver) != "undefined") {
srcElement.style.color ="#444444";
srcElement.style.backgroundColor = "#eeeeee";
}
}

function goPage(src) {
window.location.href = src;
}

document.onmouseout = document_onmouseout;
document.onmouseover = document_onmouseover;

createMenu('about',aboutMenu)
createMenu('production',productionMenu)
createMenu('news',newsMenu)
createMenu('support',supportMenu)
createMenu('contact',contactMenu)


а это прописывается в документе:
<script src="/includes/js/menu.js"></script>

<style>
.DivMenu {
position:absolute;
left:-1000;
top:-1000;
z-index:5;
background-color:#eeeeee;
}
.TDMenu {
background-color: #eeeeee;
color:#444444;
font-family:Tahoma;
font-weight:bold;
font-size:11px;
cursor:hand;
}
.table1 {
background-color: #eeeeee;
color:#444444;
font-family:Tahoma;
font-weight:bold;
font-size:11px;
cursor:hand;
border-collapse: collapse;
border: 1px solid #A1A1A1;
}
</style>

<table width="740" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="/images/top_menu/begin_menu.gif" width=34 height=23 border=0></td>

<td><img src="/images/top_menu/sp_white.gif" width=1 height=23 border=0></td>
<td><a href ="/about/"><img id="aboutMenuImage" style="LEFT: 0px; POSITION: relative; TOP: 0px"
onmouseover="return showMenu('aboutMenuDiv', event, this.id)"
onmouseout="return hideMenu('aboutMenuDiv', event)"
src="/images/top_menu/butt_about.gif" width=80 height=23 border=0></a></td>
<td><img src="/images/top_menu/sp_white.gif" width=1 height=23 border=0></td>

<td><a href ="/production/"><img id="productionMenuImage" style="LEFT: 0px; POSITION: relative; TOP: 0px"
onmouseover="return showMenu('productionMenuDiv', event, this.id)"
onmouseout="return hideMenu('productionMenuDiv', event)"
src="/images/top_menu/butt_production.gif" width=77 height=23 border=0></a></td>
<td><img src="/images/top_menu/sp_white.gif" width=1 height=23 border=0></td>

<td><a href ="/info/"><img id="newsMenuImage" style="LEFT: 0px; POSITION: relative; TOP: 0px"
onmouseover="return showMenu('newsMenuDiv', event, this.id)"
onmouseout="return hideMenu('newsMenuDiv', event)"
src="/images/top_menu/butt_news.gif" width=85 height=23 border=0></a></td>
<td><img src="/images/top_menu/sp_white.gif" width=1 height=23 border=0></td>

<td><a href ="/support/"><img id="supportMenuImage" style="LEFT: 0px; POSITION: relative; TOP: 0px"
onmouseover="return showMenu('supportMenuDiv', event, this.id)"
onmouseout="return hideMenu('supportMenuDiv', event)"
src="/images/top_menu/butt_support.gif" width=80 height=23 border=0></a></td>
<td><img src="/images/top_menu/sp_white.gif" width=1 height=23 border=0></td>

<td><a href ="/contact/"><img id="contactMenuImage" style="LEFT: 0px; POSITION: relative; TOP: 0px"
onmouseover="return showMenu('contactMenuDiv', event, this.id)"
onmouseout="return hideMenu('contactMenuDiv', event)"
src="/images/top_menu/butt_contact.gif" width=59 height=23 border=0></a></td>
<td><img src="/images/top_menu/sp_white.gif" width=1 height=23 border=0></td>
</tr>
</table>

Все это почти прекрасно работает во всех браузерах, только есть одно НО... Вываливается меню везде, но как только мы пытаемся перейти к любому пункту вывалившегося списка везде, кроме IE он прячется... :-(((((( Вся надежда на Сардара... smile))
ava
Step | 26.10.2004, 15:38 #
Спасибо.... но этот вариант, мне лично не подходит...

он слишком громозкий. при том что у меня меню будет всего одно и на два пункта
ava
GoodBoy | 26.10.2004, 16:26 #
так сократи!! smile))) тут же всё задаётся!!!!
ava
Zaman | 26.10.2004, 16:28 #
всем спасибо за помощь smile
ava
Step | 26.10.2004, 16:31 #
Цитата (GoodBoy @ 26.10.2004, 16:26)


так сократи!! smile))) тут же всё задаётся!!!!


спасибо
ava
Step | 26.10.2004, 17:12 #
зачените мое решение, со слоем управления :)

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Новая страница 2</title>
<script language="JavaScript">
<!--
function FP_callJS(visible) {//v1.0

var obj=document.getElementById("layer1");
if (visible) obj.style.visibility="visible";
else {
obj.style.visibility="hidden";
}
}
// -->
</script>
</head>

<body>
<p onmouseover="FP_callJS(true)" on><span lang="ru">Меню</span></p>
<div style="border-style:solid; position: absolute; width: 100px; height: 100px; z-index: 1; left: 10px; top: 31px; background-color: #3333FF; visibility:hidden; border-width:1px" id="layer1" >
<div style="border-style:solid; position: absolute; width: 100px; height: 100px; z-index: 1; left: 0px; top: 0px; border-width:1px" id="layer2" onmouseout="FP_callJS(false)">
</div>
<a href="sadg"><span style="background-color: #FF0000;">sadf</span></a><ol style="background-color: #FF0000; ">
<li><span style="background-color: #FF0000;">asdgf</span></li>
<li><span style="background-color: #FF0000">dsag</span></li>
</ol>

</div>

<p>reuertujrtj</p>
</body>

</html>
ava
Step | 26.10.2004, 17:24 #
лохонулся, мое решение не работает.... элементы меню не активизируються
ava
Alx | 26.10.2004, 17:35 #
Цитата
Вываливается меню везде, но как только мы пытаемся перейти к любому пункту вывалившегося списка везде, кроме IE он прячется


у меня крипт не работает, но по идее, надо при MouseOver прописать display="block"; (или что там для последнего родительского элемента (TD или TABLE). Если смогу, щас попробую, чтоб у меня заработало...
added later:
у меня вездеа ошибка - ie - определение отсутствует...
added later:
ну и вообще - без картинок невозможно смотреть! :angry:
ava
GoodBoy | 26.10.2004, 17:56 #
ALEXANDRO
это вот тут работает: http://www.dgi-net.ru
ava
Zaman | 26.10.2004, 18:25 #
GoodBoy так твой скрипт работает ?
ava
GoodBoy | 26.10.2004, 18:28 #
Естественно!!! smile)) я же ссылку на сайт дал!!!

Единственно ещё добавить надо вот это в начале скрипта menu.js:
dom = (document.getElementById) ? true : false;
nn4 = (document.layers) ? true : false;
ie = (document.all) ? true : false;
ie4 = ie && !dom;
ava
Aliance | 26.10.2004, 18:28 #
GoodBoy
Очень понравился твой скрипт, с той стороны, что ты очень правельно и граммотно расписал его для всех браузеров smile)))))))
Это большой плюс :)

У меня в наличии есть много видов меню, какой постить тут:
- построенный на слоях
- построенный на картинках
- построенный исключительно на div`ах (мой любимый вариант)
ava
GoodBoy | 26.10.2004, 18:31 #
Цитата (Aliance @ 26.10.2004, 19:28)
Очень понравился твой скрипт, с той стороны, что ты очень правельно и граммотно расписал его для всех браузеров smile)))))))


Издеваешься, да??? smile)))))))))) Я же написал, что гадское выпадающее меню прячется во всех браузерах, кроме IE тогда, когда не надо... smile
ava
Zaman | 26.10.2004, 18:32 #
понятно smile
ava
Alx | 26.10.2004, 18:49 #
GoodBoy
а это разве ты написал?
ava
GoodBoy | 26.10.2004, 18:53 #
;-) Сайт?? Угу... :p
ava
Alx | 26.10.2004, 18:58 #
GoodBoy
очень тонкий намёк, что сайт сделал тоже ты! smile

слухай, у меня всё равно не работает! Можешь дать рабочий код? :rolleyes я имею ввиду полностью - со всеми картинками и т.д., я хочу попробовать помудрить что-нить с багом...
added later:
кста, а дизайн кто делал? нужто опять ты? ;-)
ava
Aliance | 26.10.2004, 19:15 #
GoodBoy
Это проблемы с функциями, а не с синтаксисом smile))
ava
Alx | 26.10.2004, 19:47 #
первый выход: поставить перед скрытием слоя таймер на 500, допустим. А второй я попробую сделать, если мне дадут код! smile :p
ava
Sardar | 26.10.2004, 21:39 #
Мда... мудрим smile
Нужно разобратся кем бует меню генерится, если человеком, то мне больше наравится динамическая сборка: createMenu(), menu.crateRow() и т.д.
Если меню собирается серверным скиптом, то сразу генерить разметку. Что бы менюшка "по глючному" не исчезала, когда отслеживаем события мыши,не забываем вырубать bubbling(GoodBoy твоя проблема), или выкручиваемся флагами.

Сейчас добиваю меню для нашего FAQ'a, как будет готово, "запостю" сюда. Затем примимся за выпадающее smile
ava
GoodBoy | 27.10.2004, 10:17 #
Цитата (ALEXANDRO @ 26.10.2004, 19:58)
очень тонкий намёк, что сайт сделал тоже ты!

Угу!!! Почти целиком и полностью!!!

Цитата (ALEXANDRO @ 26.10.2004, 19:58)
кста, а дизайн кто делал? нужто опять ты?

Неа!!!! Это единственное, что делал не я... smile)))))))))))
ava
Gold Dragon | 07.03.2005, 15:02 #
Срочно понадобилось всплывающее меню, вот ищу :)

Цитата (GoodBoy @ 26.10.2004, 17:56)
это вот тут работает: http://www.dgi-net.ru

У меня в лисе я не могу попасть на подпункты меню, они просто напросто исчезают как я только пытаюсь подвести к ним мышку :(
ava
Sardar | 09.03.2005, 03:08 #
В коде полностью не разбирался, но если честно... не красиво :(
Смотрим на функцю createMenu, видим как там генерится слой с таблицей, на слое ловим onmouseout. Тут проблема, событие зажгётся при переходе мышки от бордера слоя к его содержимому. Это фиксится таймером при закрытии, если мы еще в меню, то таймер сбрасывается.
ava
Gold Dragon | 09.03.2005, 11:17 #
Sardar
Так это понятно :)

Вот нашёл хорошую менюшку (мне именно нужна №3), только если я правильно понял она на фреймах. А как заменить это на слои? Может кто подскажет.... или новую искать :( Всё что нашёл - беее

ava
Gold Dragon | 09.03.2005, 16:32 #
Вот код менюшки.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style text="test/css" rel="stylesheet">
#m_about {
position: absolute;
left: 100px;
top: 100px;
visibility: hidden;
z-index: 1;
}
#m_price {
position: absolute;
left: 100;
top: 150;
visibility: hidden;
z-index: 1;
}
</style>
</head>
<body>
<script language="JavaScript">
var start = 0;
var activmenu = 0;
var cur = 0;
var tim;
var overactiv = 0;

function showmenu(el)
{
document.getElementById(el).style.visibility = "visible";
activmenu = 1;
}

function hidemenu(el)
{
document.getElementById(el).style.visibility = "hidden";
activmenu = 0;
}

function noactiv()
{
if (start != 0) hidemenu(cur)
}

function activ(el)
{
if (activmenu == 1){if (el != cur) {hidemenu(cur); showmenu(el); cur = el;}}
else {showmenu(el); cur = el;}
}

function ClickActiv()
{
if (activmenu == 1) hidemenu(cur);
else showmenu(cur);
}

function timeactiv()
{
overactiv=0;
tim=setTimeout('tactiv()','5000');
}

function tactiv()
{
if (overactiv == 0 && activmenu == 1) hidemenu(cur);
}

function timedisable()
{
if (start != 0){clearTimeout(tim); overactiv=1}
else start = 1;
}
</script>
<div style="visibility: hidden;" id="m_about" onmouseover="timedisable();" onmouseout="timeactiv();">
<a href="#">Ссылка 1.1</a><br>
<a href="#">Ссылка 1.2</a>
</div>
<div style="visibility: hidden;" id="m_price" onmouseover="timedisable();" onmouseout="timeactiv();">
<a href="#">Ссылка 2.1</a><br>
<a href="#">Ссылка 2.2</a><br>
<a href="#">Ссылка 2.3</a><br>
<a href="#">Ссылка 2.4</a><br>
<a href="#">Ссылка 2.5</a><br>
<a href="#">Ссылка 2.6</a>
</div>

<a href="#" id="menu_about" onmouseover="timedisable(); activ('m_about')" onmouseout="timeactiv()">Ссылка 1</a><br>
<a href="#" id="menu_price" onmouseover="timedisable(); activ('m_price')" onmouseout="timeactiv()">Ссылка 2</a>
</body>
</html>

Вроде везде работает и всё отлично настраисается. Но вопрос такой: как мне сделать чтоб подменю открывалась на уровне самого пункта меню, а не прописывать чётко координаты?
ava
Sardar | 10.03.2005, 00:00 #
Ну передай в функцию activ ссылочку this, снеё будем опрашивать координаты родительского элемента:
function getPosition(obj) {
var x=0, y=0;
while(obj) {
x+=obj.offsetLeft;
y+=obj.offsetTop;
obj=obj.offsetParent;
}
return {x: x, y:y};
}

function activ(el, pel) {
if (activmenu == 1){if (el != cur) {hidemenu(cur); showmenu(el); cur = el;}}
else {showmenu(el); cur = el;}
if(cur) { //ну мало ли как ссылка нулём оказатся может =)
var pos=getPosition(pel);
cur.style.left=pos.x+"px";
cur.style.top=pos.y+"px";
}
}

<a href="#" id="menu_about" onmouseover="timedisable(); activ('m_about', this)" onmouseout="timeactiv()">Ссылка 1</a>
ava
Gold Dragon | 10.03.2005, 12:01 #
Совсем забыл JavaScript

выдаёт ошибку при наведении cur.stile - не является обектом или null
ava
batigoal | 10.03.2005, 15:00 #
Цитата (Red @ 10.3.2005, 12:01)
выдаёт ошибку при наведении cur.stile - не является обектом или null

А разве пишется не "style"?
ava
Gold Dragon | 10.03.2005, 16:15 #
Lamer George
это я в сообщении ошибся, на самом деле style smile
ava
Sardar | 10.03.2005, 20:15 #
Извиняюсь, "не заметил" что ты строку одаёшь, а не обьект. Сам так никогда не делаю smile
function activ(el, pel) {
if (activmenu == 1){if (el != cur) {hidemenu(cur); showmenu(el); cur = el;}}
else {showmenu(el); cur = el;}
var realcur=document.getElementById(cur);
if(realcur&&pel) { //ну мало ли как ссылка нулём оказатся может =)
var pos=getPosition(pel);
realcur.style.left=pos.x+"px";
realcur.style.top=pos.y+"px";
}
}
ava
Gold Dragon | 11.03.2005, 10:42 #
всё отлично работает, только смещение в лево надо ставить чтоб не накладывалось

function activ(el, pel) {
if (activmenu == 1){if (el != cur) {hidemenu(cur); showmenu(el); cur = el;}}
else {showmenu(el); cur = el;}
var realcur=document.getElementById(cur);
if(realcur&&pel) { //ну мало ли как ссылка нулём оказатся может =)
var pos=getPosition(pel);
realcur.style.left=pos.x+100+"px";
realcur.style.top=pos.y+"px";
}
}


Sardar
скромное спасибо ;)
ava
Sardar | 11.03.2005, 13:28 #
Нет это всё еще те грабли ;-)
Жёстко задават смещение не стоит, можно вычислить ширину предка.
function activ(el, pel) {
if (activmenu == 1){if (el != cur) {hidemenu(cur); showmenu(el); cur = el;}}
else {showmenu(el); cur = el;}
var realcur=document.getElementById(cur);
if(realcur&&pel) { //ну мало ли как ссылка нулём оказатся может =)
var pos=getPosition(pel);
realcur.style.left=(pos.x+pel.offsetWidth)+"px";
realcur.style.top=pos.y+"px";
}
}


P.S. До чего же топ разросся! Red Dragon в следующий раз создавай новый топик.
ava
Gold Dragon | 11.03.2005, 15:38 #
Цитата (Sardar @ 11.3.2005, 13:28)
P.S. До чего же топ разросся! Red Dragon в следующий раз создавай новый топик.
Так ведь тема о том же smile Да и делу последние сообщение smile


Народ прошу потестить последний вариант скрипта в разнуж праюзерах.
FireFox - ok
Maxthon - ok

говорят в IE что-то не то
ava
Aliance | 11.03.2005, 15:41 #
Могу в Опере, Мозиле и IE - но не виду целого скипта, дай ссылку =)
ava
Gold Dragon | 11.03.2005, 15:45 #
http://ilmast.istoria.com.ru/ "меню"

Вот конечный

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style text="test/css" rel="stylesheet">
.menu_user{
background-color : #F5F8F9;
border : 1px solid Black;
padding : 3px;
}
#menu_1{
position: absolute;
left: 150px;
top: auto;
visibility: hidden;
z-index: 1;
}
#menu_2{
position: absolute;
left: 150;
top: auto;
visibility: hidden;
z-index: 1;
}
#menu_3{
position: absolute;
left: 150;
top: auto;
visibility: hidden;
z-index: 1;
}
#menu_4{
position: absolute;
left: 150;
top: auto;
visibility: hidden;
z-index: 1;
}
#menu_5{
position: absolute;
left: 150;
top: auto;
visibility: hidden;
z-index: 1;
}
</style>
</head>
<body>
<script language="JavaScript">
var start = 0;
var activmenu = 0;
var cur = 0;
var tim;
var overactiv = 0;

function getPosition(obj) {
var x=0, y=0;
while(obj) {
x+=obj.offsetLeft;
y+=obj.offsetTop;
obj=obj.offsetParent;
}
return {x: x, y:y};
}

function showmenu(el)
{
document.getElementById(el).style.visibility = "visible";
activmenu = 1;
}

function hidemenu(el)
{
document.getElementById(el).style.visibility = "hidden";
activmenu = 0;
}

function noactiv()
{
if (start != 0) hidemenu(cur)
}

function activ(el, pel) {
if (activmenu == 1){if (el != cur) {hidemenu(cur); showmenu(el); cur = el;}}
else {showmenu(el); cur = el;}
var realcur=document.getElementById(cur);
if(realcur&&pel) { //ну мало ли как ссылка нулём оказатся может =)
var pos=getPosition(pel);
realcur.style.left=pos.x+100+"px"; //как вариант realcur.style.left=(pos.x+pel.offsetWidth)+"px";
realcur.style.top=pos.y+"px";
}
}

function ClickActiv()
{
if (activmenu == 1) hidemenu(cur);
else showmenu(cur);
}

function timeactiv()
{
overactiv=0;
tim=setTimeout('tactiv()','1000');
}

function tactiv()
{
if (overactiv == 0 && activmenu == 1) hidemenu(cur);
}

function timedisable()
{
if (start != 0){clearTimeout(tim); overactiv=1}
else start = 1;
}
</script>
<div class="menu_user" style="visibility: hidden;" id="menu_1" onmouseover="timedisable();" onmouseout="timeactiv();">
<a href="#">Декоративный камень</a><br>
<a href="#">Кровля</a><br>
<a href="#">Отделочные материалы</a><br>
<a href="#">Водосточные и водосборные системы</a><br>
<a href="#">Стропильные системы и утеплители</a><br>
<a href="#">Мансардные окна</a><br>
<a href="#">Фасадные материалы</a>
</div>
<div class="menu_user" style="visibility: hidden;" id="menu_2" onmouseover="timedisable();" onmouseout="timeactiv();">
<a href="#">Термопанели</a><br>
<a href="#">Полимерная черепица</a>
</div>
<div class="menu_user" style="visibility: hidden;" id="menu_3" onmouseover="timedisable();" onmouseout="timeactiv();">
<a href="#">Кровля</a><br>
<a href="#">Стропильные системы и утеплители</a><br>
<a href="#">Другие</a>
</div>
<div class="menu_user" style="visibility: hidden;" id="menu_4" onmouseover="timedisable();" onmouseout="timeactiv();">
<a href="#">Радиаторы</a><br>
<a href="#">Насосы</a><br>
<a href="#">Трубы и фитинги</a><br>
<a href="#">Автоматика и др.</a>
</div>
<div class="menu_user" style="visibility: hidden;" id="menu_5" onmouseover="timedisable();" onmouseout="timeactiv();">
<a href="#">Страница контактов</a><br>
<a href="#">Выбери себе менеджера</a>
</div>


<a href="#" id="m_1" onmouseover="timedisable(); activ('menu_1', this)" onmouseout="timeactiv()">Каталог</a><br>
<a href="#" id="m_2" onmouseover="timedisable(); activ('menu_2', this)" onmouseout="timeactiv()">Новые технологии</a><br>
<a href="#" id="m_3" onmouseover="timedisable(); activ('menu_3', this)" onmouseout="timeactiv()">Прайсы</a><br>
<a href="#" id="m_4" onmouseover="timedisable(); activ('menu_4', this)" onmouseout="timeactiv()">Отопление и<br>водоснабжение</a><br>
<a href="#" id="m_5" onmouseover="timedisable(); activ('menu_5', this)" onmouseout="timeactiv()">Контакты</a><br>
</body>
</html>
ava
Sardar | 11.03.2005, 16:14 #
ИЕ5.0, Опера6, Опера7.0, Опера7.1 - ОК
ava
Aliance | 18.03.2005, 22:53 #
Mozilla 1.7.1 - ok
IE 6.0 - ok
IE 5.0 - ok
Opera 7.52 - ok
added later:
Единственное, в Мозилле значки > не отображаются...
ava
nikolin | 22.03.2005, 16:52 #
Konqueror 3.3 ( KDE 3.3.0) - Ok
Mozilla/5.0 (X11; U; Linux i686; rv:1.7.3) Gecko/20041003 Firefox/0.10.1 - Ok
ava
vio | 23.03.2005, 10:42 #
Red Dragon
Такой вопрос, мне нужно что бы меню выпадало слева от менюшки, как это сделать?
Я в JS не очень то разбираюсь и еще хотелось, что бы скрипт располагался в файле menu.js, а то у меня сайт состоит из ститичных страниц и на каждой это прописывать.
ava
Gold Dragon | 23.03.2005, 11:01 #
Ну будем считать чтоработает :)

А как его можно модернизировать, чтоб бесконечное вложение можно делать было, т.е. подменю в подменю
ava
Aliance | 23.03.2005, 12:51 #
Red Dragon
Нужно сделать, чтобы каждое подменю (которое нужно) было в свою очередь новым меню.
ava
Gold Dragon | 23.03.2005, 16:00 #
Aliance
я зная что нужно, просто пока не могу мозги собрать как это сделать. И по ходу, чтоб при открытии ПодменюПодменюПодменю не закрывалось ПодменюПодменю
ava
Aliance | 23.03.2005, 19:37 #
Red Dragon
Своего кода нет, есть только давно скачанный, но смотря в него - становится стыдно его выкладывать smile
А свой написать - это не пару минут, при том, что у меня сейчас другой проект...
Как сделаю - выложу.
ava
Gold Dragon | 23.03.2005, 20:24 #
Aliance
вообще-то я хотел этот код модернизировать, вот и спросил как это реально сделать
Please register or login to write.
Firm of day
Вы также можете добавить свою фирму в каталог IT-фирм, и публиковать статьи, новости, вакансии и другую информацию от имени фирмы.
Подробнее
Contributors
  Sardar   Step   GoodBoy   nikolin   Alx   Gold Dragon   Zaman ava  Aliance   vio   batigoal
advanced
Submit