![]() |
|
Модераторы: Illuminaty |
![]()
|
|
| Temp |
|
|||
![]() Опытный ![]() ![]() Профиль Группа: Участник Сообщений: 577 Регистрация: 12.1.2003 Репутация: нет Всего: -3 |
Как сделать такое меню в html, чтоб при наведении на одну из ссылок появлялась рядом подменю.
Или как сделать меню при наведении на объект? -------------------- <удалено администрацией> |
|||
|
||||
| Skywalker |
|
|||
![]() Опытный ![]() ![]() Профиль Группа: Участник Сообщений: 332 Регистрация: 17.11.2003 Где: Днепропетровск, У краина Репутация: нет Всего: 2 |
www.htmlbook.ru, посмотри, почитай, там все очень подробно описано. Если что мыль мне, всегда помогу.
-------------------- "Мы в ответе за тех, кого приручили" Антуан де Сент Экзюпери, Маленький принц |
|||
|
||||
| Gold Dragon |
|
|||
![]() Призрачный ![]() ![]() ![]() ![]() Профиль Группа: Экс. модератор Сообщений: 6753 Регистрация: 1.3.2004 Где: Россия, Тамбов Репутация: 9 Всего: 71 |
www.htmlbook.ru умер, а был один из лучших
-------------------- Нельзя жить в прошлом, оно уже прошло. Нельзя жить в будущем, оно ещё не наступило. Нужно жить в настоящем, помня прошлое и думая о будущем! |
|||
|
||||
| Alx |
|
|||
|
Ajaxy ![]() ![]() ![]() ![]() Профиль Группа: Комодератор Сообщений: 2903 Регистрация: 26.11.2003 Где: Cutopia Репутация: 1 Всего: 78 |
Если очень коротко:
<a href="#" onmouseover="div1.style.display='block';" onmouseout="div1.style.display='none';">ссылка</a> <div id="div1" style="position:absolute;display:none;width:*;height:*;top:*;left:*;">Слой с подменю</div> top и left - это координаты от верхней и левой границ экрана. ты их задаёшь рядом с ссылкой. Это сообщение отредактировал(а) ALEXANDRO - 8.3.2004, 17:06 |
|||
|
||||
| [xoodo] |
|
|||
|
Опытный ![]() ![]() Профиль Группа: Участник Сообщений: 424 Регистрация: 9.3.2003 Репутация: 1 Всего: 4 |
Я бы даже сделал не якорь, а другой тэг. Чтобы статус-бар не поганить диезами и javascript:void(0)-ми.
А div1 -- как ALEXANDRO предложил. Это сообщение отредактировал(а) [xoodo] - 9.3.2004, 00:24 |
|||
|
||||
| Temp |
|
|||
![]() Опытный ![]() ![]() Профиль Группа: Участник Сообщений: 577 Регистрация: 12.1.2003 Репутация: нет Всего: -3 |
попробую, если что-то не пойму ещё доспрашу.
спасибо. Это сообщение отредактировал(а) Temp - 9.3.2004, 00:45 -------------------- <удалено администрацией> |
|||
|
||||
| Alx |
|
|||
|
Ajaxy ![]() ![]() ![]() ![]() Профиль Группа: Комодератор Сообщений: 2903 Регистрация: 26.11.2003 Где: Cutopia Репутация: 1 Всего: 78 |
[xoodo]
Чаше всего существует раздел, в котором идёт его описание, а потом ссылки на его подразделы. Поэтому надо учитывать и ссылку на страничку начала раздела. Я прав? И потом вообще, если делается меню, то чаще всего это будет тег <td></td>... |
|||
|
||||
| Temp |
|
|||
![]() Опытный ![]() ![]() Профиль Группа: Участник Сообщений: 577 Регистрация: 12.1.2003 Репутация: нет Всего: -3 |
Методом случайных (или почти случайных) перестановок вот что у меня получилось
Всем спасибо. -------------------- <удалено администрацией> |
|||
|
||||
| Alx |
|
|||
|
Ajaxy ![]() ![]() ![]() ![]() Профиль Группа: Комодератор Сообщений: 2903 Регистрация: 26.11.2003 Где: Cutopia Репутация: 1 Всего: 78 |
какой-то бред!
вот как правильно: <table> <tr> <td id="td1" onmouseout="div1.style.display='none';" onmouseover="div1.style.display='block';"> <a href="c:\">ссылка1</a> </td> <td id="td2" onmouseout="div2.style.display='none';" onmouseover="div2.style.display='block';"> <a href="c:\">ссылка2</a> </td> </tr> </table> <div id="div1" style="position:absolute;display:none;width:200;height:100;top:30;left:20;" onmouseout="div1.style.display='none';" onmouseover="div1.style.display='block';"> <a href="c:\">ссылка1.1</a> </div> <div id="div2" style="position:absolute;display:none;width:200;height:100;top:30;left:80;" onmouseout="div2.style.display='none';" onmouseover="div2.style.display='block';"> <a href="d:\">ссылка1.2</a> </div> |
|||
|
||||
| Temp |
|
|||
![]() Опытный ![]() ![]() Профиль Группа: Участник Сообщений: 577 Регистрация: 12.1.2003 Репутация: нет Всего: -3 |
а координаты top:*;left:* можно относительно таблицы или картинки сделать?
-------------------- <удалено администрацией> |
|||
|
||||
| Alx |
|
|||
|
Ajaxy ![]() ![]() ![]() ![]() Профиль Группа: Комодератор Сообщений: 2903 Регистрация: 26.11.2003 Где: Cutopia Репутация: 1 Всего: 78 |
недавно мы долго мучились и решили, что без извращения нет! если position:absolute - размещается везде, координаты от от верхней и левой границ экрана. если нет - размещается внутри род. элем. (как прописано в HTML), координаты от верхней и левой границ род. элем. (т.е. доступны только для чтения) |
|||
|
||||
| Desdichado |
|
|||
![]() Опытный ![]() ![]() Профиль Группа: Участник Сообщений: 379 Регистрация: 5.4.2004 Где: Киев Репутация: нет Всего: 10 |
Мужик пользуйся на здоровье...
Все рабочее... Необходимо поместить в файле с меню: <html> <head> <title>Выпадающее многоуровневое меню</title> <script language="javascript" src="menu-v4.js"></script> <link rel=stylesheet href="v4.css" type="text/css"> <script language="javascript" src="sample-v4.js"></script> </head> <body bgcolor="000000" text="#00ff99" link="#00ff00" alink="#99ff00" vlink="#00cc00" onload="buildMenu('theMenu')"> <table cellpadding=0 cellspacing=0 border=0> <tr align=top> <td><a href="javascript:openMenu(0)" onMouseOver="overMenu(0); window.status=window.defaultStatus; return true;" onMouseOut="outMenu()">Меню 1</a> <div id="menu1"> </div></td> <td><a href="javascript:openMenu(1)" onMouseOver="overMenu(1); window.status=window.defaultStatus; return true;" onMouseOut="outMenu()">Меню 2</a> <div id="menu2"> </div></td> </tr> </table> </body> </html> Сохраните этот текст как файл с именем menu-v4 и расширением js, в ту же директорию, что и файлы, содержащие данное меню: // Script begins var isIE4 = false; var isNN4 = false; var flagMenu = "M"; var flagLink = "L"; var flagCommand = "C"; var flagSeparator = "S"; var charWidth = 7; // character width var charHeight = 18; // character height var colorNormal = "#009900"; // menu pad color var colorHighlighted = "#006600"; // menu highlighted item color var colorTopLine = "#ffff00"; // separator upper line color var colorBottomLine = "#ffffff"; // separator lower line color var borderSize = 1; var marginSize = 4; var marginString = " "; var subMenuFlagSize = 4; var menuItemCount = -1; var menuItem = new Array(); var menuFolderCount = -1; var menuFolder = new Array(); var menuFolderSwitch = new Array(); var menuWidth = new Array(); var itemLayer = new Array(); var menuLayer = new Array(); var menuDone = new Array(); var itemOn = false; var nnWidth = 0, nnHeight = 0; function launchCommand(commandString) { // eval(commandString); alert(commandString); } function launchPage(pageURL) { document.location.assign(pageURL); //alert(pageURL); } function clickMenu(itemIndex) { var menuIndex = menuItem[itemIndex].myFolder; var folderIndex = menuItem[itemIndex].folder; var itemX = menuItem[itemIndex].x; var itemY = menuItem[itemIndex].y; if (menuItem[itemIndex].type == flagMenu) { if (menuFolderSwitch[folderIndex]) hideMenu(folderIndex) else showMenu(folderIndex,itemX + menuWidth[menuIndex] * charWidth + subMenuFlagSize,itemY); } else if (menuItem[itemIndex].type == flagLink) { hideSubMenu(); launchPage(menuItem[itemIndex].url); } else if (menuItem[itemIndex].type == flagCommand) { hideSubMenu(); launchCommand(menuItem[itemIndex].command); } } function mouseOver() { var itemIndex = this.itemIndex; var menuIndex = menuItem[itemIndex].myFolder; var menuLength = menuFolder[menuIndex].length; var folderIndex = menuItem[itemIndex].folder; var itemX = menuItem[itemIndex].x; var itemY = menuItem[itemIndex].y; var thisFolder = 0; var thisItem = 0; itemOn = true; if (menuItem[itemIndex].type != flagSeparator) { if (isIE4) { this.style.backgroundColor = colorHighlighted; } else if (isNN4) { this.document.bgColor = colorHighlighted; } } for (var i = 0; i < menuLength; i++) { thisItem = menuFolder[menuIndex][i]; if (thisItem != itemIndex) if (menuItem[thisItem].type == flagMenu) { thisFolder = menuItem[thisItem].folder; if (menuFolderSwitch[thisFolder]) hideMenu(thisFolder); } } if (menuItem[itemIndex].type == flagMenu) if (!menuFolderSwitch[folderIndex]) showMenu(folderIndex,itemX + menuWidth[menuIndex] * charWidth + subMenuFlagSize,itemY); window.status = menuItem[itemIndex].description; return true; } function mouseOut() { itemOn = false; if (isIE4) this.style.backgroundColor = colorNormal else if (isNN4) this.document.bgColor = colorNormal; window.status = ""; } function menuItemUnit() { this.type = ""; this.name = ""; this.description = ""; this.url = ""; this.command = ""; this.menu = ""; this.folder = -1; this.myFolder = -1; this.x = -1; this.y = -1; } function readMenu(menuName) { var menu = eval(menuName); var menuLength = menu.length var thisFolder = ++menuFolderCount; menuFolder[thisFolder] = new Array(); menuFolderSwitch[thisFolder] = false; menuWidth[thisFolder] = 0; menuLayer[thisFolder] = false; menuDone[thisFolder] = false; for (var i = 0; i < menuLength; i++) { menuFolder[thisFolder][i] = ++menuItemCount; itemLayer[menuItemCount] = false; menuItem[menuItemCount] = new menuItemUnit(); menuItem[menuItemCount].myFolder = thisFolder; menuItem[menuItemCount].type = menu[i][0]; menuItem[menuItemCount].name = menu[i][1]; menuItem[menuItemCount].description = menu[i][2]; if (menuWidth[thisFolder] < (menuItem[menuItemCount].name.length + marginSize)) menuWidth[thisFolder] = menuItem[menuItemCount].name.length + marginSize; if (menuItem[menuItemCount].type == flagMenu) { menuItem[menuItemCount].menu = menu[i][3]; menuItem[menuItemCount].folder = menuFolderCount + 1; readMenu(menuItem[menuItemCount].menu); } else if (menuItem[menuItemCount].type == flagLink) { menuItem[menuItemCount].url = menu[i][3]; } else if (menuItem[menuItemCount].type == flagCommand) { menuItem[menuItemCount].command = menu[i][3]; } else if (menuItem[menuItemCount].type != flagSeparator) { alert("Menu Error"); } } } function getItem(itemIndex,itemDimX,itemDimY,menuIndex) { var thisItem = null; var subMenuFlag = (menuItem[itemIndex].type == flagMenu)?"subMenu.gif":"onePixel.gif"; var singleQuote = "'"; var itemID = "item" + itemIndex + ""; var layerString = '<div id="' + itemID + '" style="position:absolute; width:' + itemDimX + '; background-color:' + colorNormal + '; visibility:hidden;"></div>'; var htmlString = (menuItem[itemIndex].type == flagSeparator)?('<table width=' + itemDimX +' height=2 cellpadding=0 cellspacing=0 border=0><tr align=left valign=bottom><td bgcolor=' + colorTopLine + '><img src="onePixel.gif" width=1 height=1 border=0></td></tr><tr align=left valign=top><td bgcolor=' + colorBottomLine + '><img src="onePixel.gif" width=1 height=1 border=0></td></tr></table>') if (!itemLayer[itemIndex]) { itemLayer[itemIndex] = true; if (isIE4) { document.body.insertAdjacentHTML("BeforeEnd",layerString); thisItem = document.all[itemID]; thisItem.innerHTML = htmlString; thisItem.style.zIndex = menuIndex * 2 + 1; thisItem.onmouseover = mouseOver; if (menuItem[itemIndex].type != flagSeparator) thisItem.onmouseout = mouseOut; thisItem.itemIndex = itemIndex; } else if (isNN4) { document.layers[itemID] = new Layer(itemDimX); thisItem = document.layers[itemID]; thisItem.visibility = "hidden"; thisItem.document.open(); thisItem.document.writeln(htmlString); thisItem.document.close(); thisItem.document.bgColor = colorNormal; thisItem.zIndex = menuIndex * 2 + 1; thisItem.onmouseover = mouseOver; if (menuItem[itemIndex].type != flagSeparator) thisItem.onmouseout = mouseOut; thisItem.itemIndex = itemIndex; } } return itemID; } function getMenu(menuIndex,menuDimX,menuDimY) { var menuID = "menu" + menuIndex + ""; var menuPadX = menuDimX + borderSize * 2; var menuPadY = menuDimY + borderSize * 2; var layerString = '<div id="' + menuID + '" style="position:absolute; width:' + menuPadX + '; visibility:hidden;"></div>'; var htmlString = '<table width=' + menuPadX +' height=' + menuPadY + ' cellpadding=0 cellspacing=0 border=' + borderSize + '><tr align=left valign=middle><td></td></tr></table>'; if (!menuLayer[menuIndex]) { menuLayer[menuIndex] = true; if (isIE4) { document.body.insertAdjacentHTML("BeforeEnd",layerString); document.all[menuID].innerHTML = htmlString; document.all[menuID].style.zIndex = menuIndex * 2; } else if (isNN4) { document.layers[menuID] = new Layer(menuPadX); document.layers[menuID].visibility = "hidden"; document.layers[menuID].zIndex = menuIndex * 2; document.layers[menuID].document.open(); document.layers[menuID].document.writeln(htmlString); document.layers[menuID].document.close(); } } return menuID; } function showLayer(layerID) { if (isIE4) document.all[layerID].style.visibility = "visible" else if (isNN4) document.layers[layerID].visibility = "show"; } function hideLayer(layerID) { if (isIE4) document.all[layerID].style.visibility = "hidden" else if (isNN4) document.layers[layerID].visibility = "hidden"; } function moveLayerTo(layerID,x,y) { if (isIE4) { document.all[layerID].style.pixelLeft = x; document.all[layerID].style.pixelTop = y; } else if (isNN4) { document.layers[layerID].left = x; document.layers[layerID].top = y; } } function hideMenu(menuIndex) { var menuLength = menuFolder[menuIndex].length; var menuID = getMenu(menuIndex,0,0); var itemID = ""; var itemIndex = 0; for (var i = 0; i < menuLength; i++) { itemIndex = menuFolder[menuIndex][i]; if (menuItem[itemIndex].type == flagMenu) if (menuFolderSwitch[menuItem[itemIndex].folder]) hideMenu(menuItem[itemIndex].folder); itemID = getItem(itemIndex,0,0,0); hideLayer(itemID); } hideLayer(menuID); menuFolderSwitch[menuIndex] = false; } function hideSubMenu() { var menuLength = menuFolder[0].length; for (var i = 0; i < menuLength; i++) { itemIndex = menuFolder[0][i]; if (menuItem[itemIndex].type == flagMenu) { if (menuFolderSwitch[menuItem[itemIndex].folder]) hideMenu(menuItem[itemIndex].folder); } } } function showMenu(menuIndex,menuX,menuY) { var itemDimY = menuY; var menuLength = menuFolder[menuIndex].length; var menuDimX = menuWidth[menuIndex] * charWidth + subMenuFlagSize; var menuID = ""; var itemID = ""; var itemIndex = 0; if (!menuDone[menuIndex]) { for (var i = 0; i < menuLength; i++) { itemIndex = menuFolder[menuIndex][i]; menuItem[itemIndex].x = menuX; menuItem[itemIndex].y = itemDimY; itemDimY += (menuItem[itemIndex].type != flagSeparator)?charHeight:2; itemID = getItem(itemIndex,menuDimX,charHeight,menuIndex); moveLayerTo(itemID,menuItem[itemIndex].x,menuItem[itemIndex].y); } menuID = getMenu(menuIndex,menuDimX,itemDimY-menuY); moveLayerTo(menuID,menuX-borderSize,menuY-borderSize); menuDone[menuIndex] = true; } for (var i = 0; i < menuLength; i++) showLayer(getItem(menuFolder[menuIndex][i],0,0,0)); showLayer(getMenu(menuIndex,0,0)); menuFolderSwitch[menuIndex] = true; } function buildMenu(menuName,x,y) { isIE4 = document.all; isNN4 = document.layers; if (isIE4 || isNN4) { if (isNN4) { nnWidth = window.innerWidth; nnHeight = window.innerHeight; window.onResize = reloadMenu; } readMenu(menuName); showMenu(0,x,y); captureClick(); } } function switchMenu(e) { if (!itemOn) hideSubMenu(); if (isNN4) { routeEvent(e); } return true; } function captureClick() { if (isIE4) document.onclick = switchMenu; else { document.onClick = switchMenu; document.captureEvents(Event.CLICK); } } function reloadMenu() { if (nnWidth != window.innerWidth || nnHeight != window.innerHeight) document.location.reload(); } // Script ends Это файл содержит текст ссылки, ее описание в строке статуса и саму ссылку. Сделав свой файл, сохраните его с именем sample-v4 и расширением js в той же директории. База может быть сгенерирована генератором баз данных для многоуровневых меню: var theMenu = new Array(); theMenu[0] = new Array("myMenu1","menu1"); theMenu[1] = new Array("myMenu2","menu2"); var myMenu1 = new Array(); myMenu1[0] = new Array("M","HTML","this is the first sub menu","menu11"); myMenu1[1] = new Array("M","CSS","Описание как сделать сайт красивее и привлекательнее","menu12"); myMenu1[2] = new Array("S","","",""); myMenu1[3] = new Array("L","narod.ru","JavaScript, CSS и HTML на халяву","http://narod.ru/"); myMenu1[4] = new Array("L","narod.ru","Персоональный сайт создательницы сайта narod.ru","http://narod.ru"); myMenu1[5] = new Array("M","Java-скрипты","Огромная коллекция для свободного использования","menu13"); myMenu1[6] = new Array("S","","",""); myMenu1[7] = new Array("L","Гостевая","Напишите о достоинствах или недостатках","http://narod.yandex.ru/guestbook/?owner=3083811&mainhtml=gosti.txt&messageshtml=style.txt"); var menu11 = new Array(); menu11[0] = new Array("L","Спецсимволы HTML","Таблица спецсимволов HTML","../html/symbol.htm"); menu11[1] = new Array("S","","",""); menu11[2] = new Array("L","Основные тэги HTML","Таблица основных тэгов HTML и их атрибутов","../html/teg.htm"); menu11[3] = new Array("L","Таблица цветов","RBG-палитра 216 цветов","../html/color1.htm"); var menu12 = new Array(); menu12[0] = new Array("L","Полосы прокрутки","Изменение цвета полос прокрутки","../css/scroling.htm"); menu12[1] = new Array("L","Изменение вида курсора","Изменение вида курсора на один из стандартных","../css/vidcursor.htm"); menu12[2] = new Array("S","","",""); menu12[3] = new Array("L","Введение в CSS","Введение в CSS (рекомендую прочитать новичкам)","../css/css4.htm"); var menu13 = new Array(); menu13[0] = new Array("L","Музыка","Музыкальные шкатулки (незабудьте включить колонки)","../muz.htm"); menu13[1] = new Array("L","Игры","Морской бой, Пятнашки, Шарики, Шашки, Linse","../game.htm"); menu13[2] = new Array("S","","",""); menu13[3] = new Array("L","Ссылки","Различные эффекты применяемые к ссылкам","../linki.htm"); var myMenu2 = new Array(); myMenu2[0] = new Array("L","Ссылки","Ссылки на другие ресурсы","../scilki.htm"); myMenu2[1] = new Array("L","Обмен ссылками","Форма для обмена ссылками","../formular.htm"); myMenu2[2] = new Array("S","","",""); myMenu2[3] = new Array("M","Лучшие ссылки","Лучшие ссылки сети","menu21"); myMenu2[4] = new Array("S","","",""); myMenu2[5] = new Array("L","Форма для сообщений","Настроенный почтовик не требуется","../forma.htm"); var menu21 = new Array(); menu21[0] = new Array("L","WebSiteGarage.com","Сканирует ваш сайт на предмет качества","http://WebSiteGarage.com"); menu21[1] = new Array("S","","",""); menu21[2] = new Array("L","narod.ru","Персоональный сайт narod.ru","http://narod.ru"); Сохраните этот текст как файл с именем v4 и расширением css, в ту же директорию, что и файлы, содержащие данное меню: a.menu {text-decoration:none; color:#000000} #menuText {font-size:12px; color:#000000; font-family:arial,verdana,courier,times;} #menu1 {position:relative; left:0; top:0; visibility:visible; z-index:1;} #menu2 {position:relative; left:0; top:0; visibility:visible; z-index:1;} -------------------- Я, объявляю свой дом безъядерной зоной... |
|||
|
||||
| хой |
|
|||
|
Unregistered |
Гаспада хачу вам сказать, что тупые пользователи часто не догоняют как этим пользоваться. я реализовала такую фигню но через месяц сняла |
|||
|
||||
| Aliance |
|
|||
![]() I ♥ <script> ![]() ![]() ![]() ![]() Профиль Группа: Модератор Сообщений: 6418 Регистрация: 2.8.2004 Где: spb Репутация: 2 Всего: 137 |
[xoodo]
Что бы статус не засорять - пишем: "javaascript://" в href`е ALEXANDRO Desdichado Пользуйтесь тегами code Temp Можно - делаем абсолютную позицию вокруг всего меня... Skywalker Ссылку давать - последнее дело ;) Desdichado А за такие скрипты - к стенке ставят и растреливают :-))))))) Пишем для ВСЕХ современных браузеров, а не для NN4 и т.д.... |
|||
|
||||
| Ignat |
|
||||||
![]() Флудератор ![]() ![]() ![]() ![]() Профиль Группа: Экс. модератор Сообщений: 4030 Регистрация: 19.4.2004 Где: غيليندزيك مدينة Репутация: нет Всего: 73 |
Это какая-то кама-сутра получается
Протестую! Иногда (не в данном случае), просто необходимо дать ссылку на мануал. Постить постоянно мануал для отдельных участников глупо, если они могут сами найти.
-------------------- Теперь при чем :P |
||||||
|
|||||||
![]()
|
| 0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей) | |
| 0 Пользователей: | |
| « Предыдущая тема | Вёрстка веб-сайтов | Следующая тема » |
|
|
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности Powered by Invision Power Board(R) 1.3 © 2003 IPS, Inc. |