Jump to content

Talexandria

Newbie
  • Posts

    20
  • Joined

  • Last visited

Everything posted by Talexandria

  1. Пжалуйста и код: 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);
  2. Доброе время суток! Подскажите как привязать меню, в столбец таблицы. И Если окно уменьшить в размере, чтоб меню оставалось в этом столбце, а не выезжало за его пределы.
  3. это у кого как! Для меня там не все понятно
  4. спасибочки. думаю на сегодня с меня хватит. Но если вдруг у кого найдутся примеры или ссылки на них похожие на Example #3 пишите.
  5. есть над чем подумать. только уже не думается. а на счет ваше предложения-нашла нечто похожее- http://www.javascriptkit.com/script/script2/dbmenu/ - пример3. Только там всего нового для меня.... как оно вам?
  6. очень даже не смешно :-) я имею ввиду меню с всплывающим подменю. У меня создается впечатление что такое меню избегают. Я не права?
  7. это пример от куда-то. вы писали такое же-и у вас не работает? хм... блин да что ж такое. вообще есть простое меню которое открывается 1 раз, а лучше 2,которое работает... неужели нет...вразумите меня
  8. да...может я действительно перегнула. кстати,тот пример,что я привела выше, как вы считаете он нормальный?
  9. что-то не то. А не подскажите примерчик с помощью дивов.
  10. идея в принципе? Стоит задача разработать сайт о компании, куда должны включаться такиевещи ,как: -новости -контакты -о компании --история --структура —руководство —отделы —... --... ... —... В общем инфы много. Поэтому решение и было вложенное меню.
  11. просто в главном меню слишком много разветвлений, а в них ещ?.... вот такая беда! а что вы предлагаете?
  12. Talexandria

    меню

    Доброе время суток! У меня проблема с меню. Никак не могу подобрать подходящий вариант. Необходимо 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> <!--это не работает ,нужно где-то что-то добавить? <ul> <li><a href="#">Проект1</a></li> <li><a href="#">Проект2</a></li> </ul> --> </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) Какие советы???
  13. Спасибо.Ваша инфо для меня золото. Попробую...
  14. Не. Не получилось-все такое же кривое. Мне надо такое как оно выглядит без таблиц чтоб получилось. В таблице все кривеет...
  15. [*]Главная [*]Новости [*]О компании ⇒ История компании Структура компании ⇒ Руководство Отделы [*]Политика в области управления персоналом ⇒ Стратегия Вакансии Резюме [*]Выставки и конференции [*]Награды и достижения [*]Программы [*]ПКБ и Общество [*]СМИ о НАС [*]Система менеджмента и качества ⇒ Кратко о СМК Политика в области качества Сертификаты [*]Производственная деятельность ⇒ Услуги Проекты ⇒ Проект1 Проект2 [*]Контакты Oсновное
  16. А так хотелось бы первое. Может поможете?
  17. Спасибо за совет. Только когда я эта менюшка одна на странице - все красиво. Но если я е? вставляю в таблицу,то вс? кривое и страшное. Почему,не подскажите?
  18. [*]Главная [*]Новости [*]О компании ⇒ История компании Структура компании ⇒ Руководство Отделы [*]Политика в области управления персоналом ⇒ Стратегия Вакансии Резюме [*]Выставки и конференции [*]Награды и достижения [*]Программы [*]Общество [*]СМИ о НАС [*]Система менеджмента и качества ⇒ Кратко о СМК Политика в области качества Сертификаты [*]Производственная деятельность ⇒ Услуги Проекты ⇒ Проект1 Проект2 [*]Контакты
  19. Но я не хочу использовать фреймы. Меня больше интересуют таблицы,а с дивами я несовсем знакома. Подскажите, все-таки если использовать таблицы, то нужно создавать новые странички с "шаблоном". Т.е. код страниц будет различен только там, где я хочу сделать новую инфо, а шапку и меню переписывать туже, что и на главной странице?
  20. Объясните каким образом создают сайт с помощью таблиц. Меня интересует : если есть страница из таблицы,состоящая из шапки и 2 столбцов. В 1 столбце меню,а во 2 должна быть инфо,соответствующая пункту меню. Как сделать, чтобы во втором столбце отображались соответствующие странички. Или так нельзя? А нужно создавать отдельные странички для каждой ссылки только вместе с шапкой и меню как на начальной. Т.е. создается видимость, что находимся на одной странице,а получается что нет. Я запуталась, объсните пожалуйста. Я на Вас надеюсь.. TAlexandria
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy