народ помагите, нужно сделать динамически изменяемую менюшку например есть текстовый файл там где стоит * то менюшка, а там где + то меню которое выпадает. чтото типо етого *телефоны* +моторола+ +самсунг+ +сониериксон+ *комуникаторы* +кутек+ +моторола+
на CSS делается за 5 минут http://440hz.ru/trash/cssmenu/ HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <link rel="Stylesheet" href="./index.css"> <script> var jsHover = function() { var hEls = document.getElementById("nav").getElementsByTagName("li"); if ( window.attachEvent && navigator.userAgent.indexOf("Opera") == -1 ) { for (var i=0, len=hEls.length; i<len; i++) { hEls[i].onmouseover=function() { this.className+=" jshover"; } hEls[i].onmouseout=function() { this.className=this.className.replace(" jshover", ""); } } } } </script> <body> <ul id="nav"> <li><a href="">Home</a></li> <li><a href="">Новости</a> <ul> <li><a href="">компании</a></li> <ul> <li><a href="">внутренние новости</a></li> <li><a href="">внешнире новости</a></li> </ul> <li><a href="">новости мировые</a> <ul> <li><a href="">новости Google</a></li> <li><a href="">новости MicroSoft</a></li> <li><a href="">новости Yahoo!</a></li> <li><a href="">новости IBM</a></li> <li><a href="">новости Yandex</a></li> </ul> </li> </ul> </li> <li><a href="">контакты</a></li> </ul> <script>jsHover();</script> </body> </html> [css] body, div, td, p { font-family: Tahoma, Arial, Helvetica, "Times New Roman", sans-serif; font-size: 12px; } #nav, #nav ul { list-style: none; margin: 0; padding: 0; background: #999999; float: left; width: 100%; color: white; } #nav li { float: left; position: relative; background: #777777; width: 120px; } #nav a { color: #fff; text-decoration: none; display: block; width: 100px; padding: 10px; } #nav a:hover { color: #fff; background: #333; } #nav li:hover, #nav li.jshover { background: #333; } #nav li ul { display: none; position: absolute; padding: 0; width: 120px; } #nav li li a { width: 100px; background: none; } #nav li:hover ul, #nav li.jshover ul { display: block; } #nav li:hover li ul, #nav li.jshover li ul { display: none; width: 120px; top: 0px; left: 120px; } #nav li:hover li:hover ul, #nav li.jshover li.jshover ul { display: block; }}[/css]
хорошо, разжёвываю - перед появлением меню и исчезновением должна быть задержка порядка четверти секунды. если менюшка открыта кликом мыши, то и закрыться она должна не ранее следующего клика мышью. это основы юзабилити. на css это не реализовать. да он для этого и не предназначен.
только что проверил и фф и оперой - ничего не глючит. там по идее и глючить-то нечему - plain css и одна js-функция. а решение элегантное - автору риспект ). обожаю такие вот подходы, когда на первый взгляд нелегкие задачи решаются одним махом волшебной палочки.
Вот еще, почти идентичный скрипт для выпадающей менюшки. Работает в любом браузере одинаково. HTML: <html> <head> <title></title> [js]<script language="JavaScript" type="text/javascript"> startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("nav"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace (" over", ""); } } } } } window.onload=startList; </script>[/js] [css]<style type="text/css"> ul { margin: 0; padding: 0; list-style: none; width: 150px; border-bottom: 1px solid #ccc; } ul li { position: relative; } li ul { position: absolute; left: 149px; top: 0; display: none; } li:hover ul, li.over ul { display: block; } ul li a { display: block; text-decoration: none; color: #777; background: #fff; padding: 5px; border: 1px solid #ccc; border-bottom: 0; } ul li a:hover { color: red; background: silver; } /* Fix IE. Hide from IE Mac \*/ * html ul li { float: left; height: 1%; } * html ul li a { height: 1%; } /* End */ </style>[/css] HTML: </head> <body> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a> <ul> <li><a href="#">History</a></li> <li><a href="#">Team</a></li> <li><a href="#">Offices</a></li> </ul> </li> <li><a href="#">Services</a> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">Internet Marketing</a></li> <li><a href="#">Hosting</a></li> <li><a href="#">Domain Names</a></li> <li><a href="#">Broadband</a></li> </ul> </li> <li><a href="#">Contact Us</a> <ul> <li><a href="#">United Kingdom</a></li> <li><a href="#">France</a></li> <li><a href="#">USA</a></li> <li><a href="#">Australia</a></li> </ul> </li> </ul> </body> </html>
Ребят, подскажите, может у кого уже имеется... Нужен вот такой скриптик вертикального меню: При нажатии на ссылку осуществляется переход по сссылке и снизу появляются подкатегории... Желательно чтобы скриптик еще при обновлении страницы оставлял подменю которое было открыто открытым и при переходе по другой ссылке основного меню, предыдущее подменю скрывалось...
В принципе подобрал нужный вариант, но не до конца! Там при обновлении страницы или переходе по ссылке подменю убирается! Может кто подскажет как модифицировать чтобы не убиралось?
darkgod Если о QuickMenu, то: Нужен add-on для автораскрытия - простой кусочек JS, который сам по себе не паблишется, если не указать использование автораскрытия. Добавится в код он после того, как выбрать "Item Enhancements"/Item Extras/Show Sub Onload. Там просто надо поиграться: нажать на пункт в меню, потом в эти энхенсменты и отметить TRUE. Проверить, что игры закончились успешно. Потом делать PUBLISH проекты, где предлагается сохранить CSS, JS и HTML. Получается, можно заново пересобрать меню, а можно быстро слепить из пары вложенных и получить тот самый кусочек, который нужен. Добавления: 1. появится еще один кусок JS кода, будет начинаться комментариями типа: "Add-On Code: Show Subs Onload" (его вставить под JS меню уже существующего) 2. Измениться "Add-On Settings" (тоже в JS после Core)- добавятся две строки: // Show Subs Onload Add On a.showload_active = true; Вроде все. Теперь можно везде при загрузке в пункте меню который хотим держать открытым (ну и соотвственно по всему дереву) имзенять class="qmparent" на class="qm-startopen qmparent"
obsrv Почти, но не до конца... мне ненужно держать какой то определенный пункт пстоянно открытым.... Мне надо чтоб при переходе по ссылке подменю было открыто... А то когда перехожу по ссылке в подменю в модуль, меню сворачивается - это очень неудобно!
darkgod Я же указал - КУДА ДУМАТЬ. Воспользуйтесь JS или PHP (или еще чем). Меняйте атрибут class="qmparent" на class="qm-startopen qmparent" в зависимости от нужд.
Вот нашел более подходящее для меня меню... HTML: <style type="text/css"> .menutitle{ cursor:pointer; margin-bottom: 5px; background-color:#ECECFF; color:#000000; width:140px; padding:2px; } .submenu{ margin-bottom: 0.5em; } </style> <script type="text/javascript"> /*********************************************** * Switch Menu script- by Martial B of [url=http://getElementById.com/]http://getElementById.com/[/url] * Modified by Dynamic Drive for format & NS4/IE4 compatibility * Visit [url=http://www.dynamicdrive.com/]http://www.dynamicdrive.com/[/url] for full source code ***********************************************/ var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc) var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only if (document.getElementById){ //DynamicDrive.com change document.write('<style type="text/css">\n') document.write('.submenu{display: none;}\n') document.write('</style>\n') } function SwitchMenu(obj){ if(document.getElementById){ var el = document.getElementById(obj); var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change if(el.style.display != "block"){ //DynamicDrive.com change for (var i=0; i<ar.length; i++){ if (ar[i].className=="submenu") //DynamicDrive.com change ar[i].style.display = "none"; } el.style.display = "block"; }else{ el.style.display = "none"; } } } function get_cookie(Name) { var search = Name + "=" var returnvalue = ""; if (document.cookie.length > 0) { offset = document.cookie.indexOf(search) if (offset != -1) { offset += search.length end = document.cookie.indexOf(";", offset); if (end == -1) end = document.cookie.length; returnvalue=unescape(document.cookie.substring(offset, end)) } } return returnvalue; } function onloadfunction(){ if (persistmenu=="yes"){ var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname var cookievalue=get_cookie(cookiename) if (cookievalue!="") document.getElementById(cookievalue).style.display="block" } } function savemenustate(){ var inc=1, blockid="" while (document.getElementById("sub"+inc)){ if (document.getElementById("sub"+inc).style.display=="block"){ blockid="sub"+inc break } inc++ } var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid document.cookie=cookiename+"="+cookievalue } if (window.addEventListener) window.addEventListener("load", onloadfunction, false) else if (window.attachEvent) window.attachEvent("onload", onloadfunction) else if (document.getElementById) window.onload=onloadfunction if (persistmenu=="yes" && document.getElementById) window.onunload=savemenustate </script> <!-- Keep all menus within masterdiv--> <div id="masterdiv"> <div class="menutitle" onclick="SwitchMenu('sub1')" >Site Menu</div> <span class="submenu" id="sub1"> - <a href="new.htm">What's New</a><br> - <a href="hot.htm">What's hot</a><br> - <a href="revised.htm">Revised Scripts</a><br> - <a href="morezone/">More Zone</a> </span> <div class="menutitle" onclick="SwitchMenu('sub2')">FAQ/Help</div> <span class="submenu" id="sub2"> - <a href="notice.htm">Usage Terms</a><br> - <a href="faqs.htm">DHTML FAQs</a><br> - <a href="help.htm">Scripts FAQs</a> </span> <div class="menutitle" onclick="SwitchMenu('sub3')">Help Forum</div> <span class="submenu" id="sub3"> - <a href="http://www.codingforums.com">Coding Forums</a><br> </span> <div class="menutitle" onclick="SwitchMenu('sub4')">Cool Links</div> <span class="submenu" id="sub4"> - <a href="http://www.javascriptkit.com">JavaScript Kit</a><br> - <a href="http://www.freewarejava.com">Freewarejava</a><br> - <a href="http://www.cooltext.com">Cool Text</a><br> - <a href="http://www.google.com">Google.com</a> </span> <img src="about.gif" onclick="SwitchMenu('sub5')"><br> <span class="submenu" id="sub5"> - <a href="http://www.dynamicdrive.com/link.htm">Link to DD</a><br> - <a href="http://www.dynamicdrive.com/recommendit/">Recommend Us</a><br> - <a href="http://www.dynamicdrive.com/contact.htm">Email Us</a><br> </span> </div> Только одно НО, как сделать чтобы сслыки подсвечивались при открытии подкатегории??? ну или можно даже чтобы подкатегория подсвечивалась, когда находимся в ней![/code]
раньше такая же проблема была:скачать скрипт называемый суперфиш, использует jQuery, как-бы оно то пофигу, на сайте все-равно юзается, но там была проблема ширина области ссылки была фиксированной, поставил auto, появились грабли, попросил верстальшика исправили за часика 2 и даже украсили... пример тут Волковыск кому нужно вышлю, вид этого меню легко настраивается
Вот ничего пример такой, менюшка улетная, правда не знаю как она кастомизироваться будет javascript Выпадающее меню в стиле windows 7