Talexandria

положение меню

Talexandria replied to Talexandria's question in HTML Coding

Пжалуйста и код: html: <html> <head> <title>Menu Test</title> <script src="dbMenu.js" type="text/javascript"></script> <link href="global.css" type="text/css" rel="stylesheet" media="screen"> <link href="collapse.css" type="text/css" rel="stylesheet" media="screen"> </head> <body> <table width="100%" height="100%" border="1" cellpacing="0" cellpadding="0"> <tr height="20%" > <td width="20%" > <table cellpacing="0" cellpadding="0"><tr><td></td></tr></table> </td> <td colspan="2" width="40%" ><p>Название</p></td> <td colspan="2" width="40%" ><p>фото</p></td> </tr> <tr height="5%"> <td width="20%"><p>Пусто</p></td> <td width="15%" align="center"> </td> <td colspan="2"><p>Поиск</p></td> <td width="13%" align="center"> </td> </tr> <tr height="65%"> <td width="20%" > <table width="100%" height="100%" border="2" cellpacing="0" cellpadding="0"> <tr><td> <ul id="menu" class="dbMenu"> <li><a href="./1.html">Главная</a></li> <li>О компании <ul> <li><a href="../collapse/index.html">История </a></li> <li><a href="./2.html">Структура</a></li> <li><a href="../side/index.html">Политика </a></li> <li><a href="../side/index.html">Конференции,</a></li> <li><a href="../side/index.html">Награды</a></li> <li><a href="../side/index.html">Программы</a></li> <li><a href="../side/index.html">Общество</a></li> <li><a href="../side/index.html">СМИ</a></li> </ul> </li> <li>Система <ul> <li><a href="./1.html">О СМК</a></li> <li><a href="collapse.html">Политика </a></li> <li><a href="collapse.html">Сертификаты</a></li> </ul> </li> <li>деятельность <ul> <li><a href="common.html">Услуги</a></li> <li><a href="collapse.html">Проекты</a></li> </ul> </li> <li><a href="script.html">Новости</a></li> <li><a href="script.html">Контакты</a></li> </ul> </td></tr> </table> </td> <td width="80%" colspan=4"><p>Основное</p></td> </tr> <tr height="10%"> <td width="100%" colspan="5"><p>ярлычки</p></td> </tr> </table> </body> </html> global.css #menu{ position:absolute; z-index:1; top:30%; left:1%; padding:1%; margin:2%; list-style:none; } body>#menu{ position:fixed; } li ul{ position:relative; display:none; padding:12px; margin:0px; list-style:none; } li{ position:relative; background-color:#6666ff; border:1px solid black; padding:2px; margin:0px; color:#99ffff; } .subMenu{ background-repeat:no-repeat } .click{ background-color:#6666cc; color:#99ffff; } .click ul{ display:block; } .hover, ul li a:hover{ cursor:pointer; background-color:#6699ff; color:#000099; } li ul li.hover, li ul li.hover a:hover{ background-color:#6699ff; } li a{ width:100% } li a, li ul li a, li.hover ul li a{ text-decoration:none; color:white; } li.hover a, li ul li.hover a{ color:#660033; text-decoration:none; } collapse.css #menu{ width:16em;/*ширина строки*/ font-size:10pt; font-family:verdana; } .subMenu{ background-image:url('./images/down.gif'); background-position:bottom right; } .click{ /* background-image:none; */ background-image:url('./images/top.gif'); } js: var dbMenu = { init: function(){ var uls = document.getElementsByTagName('ul'); for(var i = 0; i < uls.length; i++){ if(uls[i].className.search(/bdbMenub/) == -1) continue; var menu = uls[i]; dbMenu.styleSubMenus(menu); addEvent(menu, 'mouseover', dbMenu.hover, false); addEvent(menu, 'mouseout', dbMenu.hover, false); addEvent(menu, 'click', dbMenu.click, false); addEvent(menu, 'click', dbMenu.nav, false); } addEvent(document, 'click', dbMenu.removeClick, false); }, hover: function(e){ var target = (window.event)? window.event.srcElement : (e)? e.target : null; if(target){ target = dbMenu.getTarget(target, 'li'); if(!target) return; }else{ return; } if(target.className.search(/bhoverb/) == -1){ target.className += ' hover'; }else{ target.className = target.className.replace(/hover/g, ''); } }, click: function(e){ if(window.event){ window.event.cancelBubble = true; } if(e && e.stopPropagation){ e.stopPropagation(); } var target = (window.event)? window.event.srcElement : (e)? e.target : null; if(target){ target = dbMenu.getTarget(target, 'li'); if(!target) return; }else{ return; } if(target.className.search(/bclickb/) == -1){ dbMenu.removeClick(); target.className += ' click'; }else{ target.className = target.className.replace(/click/g, ''); } }, removeClick: function(){ var uls = document.getElementsByTagName('ul'); for(var i = 0; i < uls.length; i++){ if(uls[i].className.search(/bdbMenub/) == -1) continue; var menu = uls[i]; for(var j = 0; j < menu.childNodes.length; j++){ var node = menu.childNodes[j]; if(node.nodeName.toLowerCase() == 'li'){ node.className = node.className.replace(/click/g, ''); } } } }, nav: function(e){ if(window.event){ window.event.cancelBubble = true; } if(e && e.stopPropagation){ e.stopPropagation(); } var target = (window.event)? window.event.srcElement : (e)? e.target : null; if(target){ target = dbMenu.getTarget(target, 'li'); if(!target) return; }else{ return; } for(var i = 0; i < target.childNodes.length; i++){ var node = target.childNodes[i]; if(node.nodeName.toLowerCase() == 'a'){ window.location = node.href; break; } } }, getTarget: function(target, elm){ if(target.nodeName.toLowerCase() != elm && target.nodeName.toLowerCase() != 'body'){ return dbMenu.getTarget(target.parentNode, elm); }else if(target.nodeName.toLowerCase() == 'body'){ return null; }else{ return target; } }, styleSubMenus: function(menu){ var uls = document.getElementsByTagName('ul'); for(var i = 0; i < uls.length; i++){ if(uls[i].className.search(/bdbMenub/) == -1) continue; var menu = uls[i]; for(var j = 0; j < menu.childNodes.length; j++){ var node = menu.childNodes[j]; if(node.nodeName.toLowerCase() == 'li'){ for(var l = 0; l < node.childNodes.length; l++){ var nd = node.childNodes[l]; if(nd.nodeName.toLowerCase() == 'ul'){ node.className += " subMenu"; break; } } } } } } } function addEvent(elm, evType, fn, useCapture){ //cross-browser event handling for IE5+, NS6+, and Mozilla/Gecko By Scott Andrew if(elm.addEventListener){ elm.addEventListener(evType, fn, useCapture); return true; }else if(elm.attachEvent){ var r = elm.attachEvent('on' + evType, fn); return r; }else{ elm['on' + evType] = fn; } } addEvent(window, 'load', dbMenu.init, false);

положение меню

Talexandria posted a question in HTML Coding

Доброе время суток! Подскажите как привязать меню, в столбец таблицы. И Если окно уменьшить в размере, чтоб меню оставалось в этом столбце, а не выезжало за его пределы.

есть над чем подумать. только уже не думается. а на счет ваше предложения-нашла нечто похожее- http://www.javascriptkit.com/script/script2/dbmenu/ - пример3. Только там всего нового для меня.... как оно вам?

это пример от куда-то. вы писали такое же-и у вас не работает? хм... блин да что ж такое. вообще есть простое меню которое открывается 1 раз, а лучше 2,которое работает... неужели нет...вразумите меня

идея в принципе? Стоит задача разработать сайт о компании, куда должны включаться такиевещи ,как: -новости -контакты -о компании --история --структура —руководство —отделы —... --... ... —... В общем инфы много. Поэтому решение и было вложенное меню.

Доброе время суток! У меня проблема с меню. Никак не могу подобрать подходящий вариант. Необходимо 3-х уровневое всплывающее. Может с div ами как? Или так? Кто может подсказать с примерами. чтоб не слишком сложно. по-возможности с комментариями. Вот пример такого,только для 2-х уровневогоможно его сделать 3-х. И как оно вообще по "качеству" ?) код html: <HTML> <HEAD> <TITLE>menu</TITLE> <link rel="stylesheet" type="text/css" href="cssverticalmenu.css" /> <script type="text/javascript" src="cssverticalmenu.js"> </script> </HEAD> <BODY > <ul id="verticalmenu" class="glossymenu"> <li><a href="#">JavaScript Kit</a></li> <li><a href="#">Free JavaScripts</a></li> <li><a href="#">JavaScript Tutorials</a></li> <li><a href="#">References</a> <ul> <li><a href="#">JavaScript Reference</a></li> <li><a href="#">DOM Reference</a></li> <li><a href="#">CSS Reference</a>  </li> </ul> </li> <li><a href="#">DHTML/ CSS Tutorials</a></li> <li><a href="#">web Design Tutorials</a></li> <li><a href="#">Helpful Resources</a> <ul> <li><a href="#">Dynamic HTML</a></li> <li><a href="#">Coding Forums</a></li> <li><a href="#">CSS Drive</a></li> <li><a href="#">CSS Library</a></li> <li><a href="#">Image Optimizer</a></li> <li><a href="#">Favicon Generator</a></li> </ul> </li> </ul> </BODY> </HTML> код css: .glossymenu, .glossymenu li ul{list-style-type: none;margin: 0;padding: 0;width: 185px; /*WIDTH OF MAIN MENU ITEMS*/border: 1px solid black;} .glossymenu li{position: relative;} .glossymenu li ul{ /*SUB MENU STYLE*/position: absolute;width: 190px; /*WIDTH OF SUB MENU ITEMS*/left: 0;top: 0;display: none;filter:alpha(opacity=100);-moz-opacity:1;} .glossymenu li a{background: white url("./graphics/glossyback.gif") repeat-x bottom left;font: bold 12px Verdana, Helvetica, sans-serif;color: white;display: block;width: auto;padding: 5px 0;padding-left: 10px;text-decoration: none;} .glossymenu .arrowdiv{position: absolute;right: 2px;background: transparent url("./graphics/arrow.gif") no-repeat center right;} .glossymenu li a:visited, .glossymenu li a:active{color: white;} .glossymenu li a:hover{background-image: url("./graphics/glossyback2.gif");} /* Holly Hack for IE */* html .glossymenu li { float: left; height: 1%; }* html .glossymenu li a { height: 1%; }/* End */ код js: var menuids=new Array("verticalmenu") //Enter id(s) of UL menus, separated by commas var submenuoffset=-2 //Offset of submenus from main menu. Default is -2 pixels. function createcssmenu(){ for (var i=0; i<menuids.length; i++){ var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul") for (var t=0; t<ultags.length; t++){ var spanref=document.createElement("span") spanref.className="arrowdiv" spanref.innerHTML=" " ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref) ultags[t].parentNode.onmouseover=function(){ this.getElementsByTagName("ul")[0].style.left=this.parentNode.offsetWidth+submenuoffset+"px" this.getElementsByTagName("ul")[0].style.display="block" } ultags[t].parentNode.onmouseout=function(){ this.getElementsByTagName("ul")[0].style.display="none" } } } } if (window.addEventListener) window.addEventListener("load", createcssmenu, false) else if (window.attachEvent) window.attachEvent("onload", createcssmenu) Какие советы???

Таблицы и ссылки

Talexandria replied to Talexandria's question in HTML Coding

Спасибо.Ваша инфо для меня золото. Попробую...

Таблицы и ссылки

Talexandria replied to Talexandria's question in HTML Coding

Не. Не получилось-все такое же кривое. Мне надо такое как оно выглядит без таблиц чтоб получилось. В таблице все кривеет...

Таблицы и ссылки

Talexandria replied to Talexandria's question in HTML Coding

[*]Главная [*]Новости [*]О компании ⇒ История компании Структура компании ⇒ Руководство Отделы [*]Политика в области управления персоналом ⇒ Стратегия Вакансии Резюме [*]Выставки и конференции [*]Награды и достижения [*]Программы [*]ПКБ и Общество [*]СМИ о НАС [*]Система менеджмента и качества ⇒ Кратко о СМК Политика в области качества Сертификаты [*]Производственная деятельность ⇒ Услуги Проекты ⇒ Проект1 Проект2 [*]Контакты Oсновное

Sign In

Posts

Joined

Last visited

Talexandria's Achievements

Explorer (1/14)

Reputation

положение меню

положение меню

меню

меню

меню

меню

меню

меню

меню

меню

меню

меню

Таблицы и ссылки

Таблицы и ссылки

Таблицы и ссылки

Forums

Important Information