And who do you want to help?
Edited by Michael, 17 May 2007 - 01:03 AM.
Need help with your computer or device? Want to learn new tech skills? You're in the right place!
Geeks to Go is a friendly community of tech experts who can solve any problem you have. Just create a free account and post your question. Our volunteers will reply quickly and guide you through the steps. Don't let tech troubles stop you. Join Geeks to Go now and get the support you need!
Edited by Michael, 17 May 2007 - 01:03 AM.
Edited by NEW ZEALAND, 17 May 2007 - 01:17 AM.
Edited by NEW ZEALAND, 18 May 2007 - 09:28 AM.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:role="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#" xmlns:aaa="http://www.w3.org/2005/07/aaa"> <head> <script type="text/javascript" src="alt.js"></script> <title>ARIA Menu</title> <script type="text/javascript">var ie = false;</script> <!--[if IE]><script type="text/javascript">var ie = true;</script><![endif]--> <script type="text/javascript"> <!--//--><![CDATA[//><!-- var obj = {object:null} function loadMenu(menuid,dir) { setEventListener(document,'click',clickOut,true); setEventListener(document,'focus',clickOut,true); var menu = document.getElementById(menuid); menu.setAttribute('role','role:menu'); var lastItem = null; setEventListener(menu,'keydown',keydown,true); function crawl(ul,depth){ var listItems = ul.childNodes; var i = 0; var prevSib = null; while(listItems[i]) { if(listItems[i].nodeName.toLowerCase() == 'li'){ if(dir == 'horizontal' && depth == 1){ setClass(listItems[i],'horizontal'); listItems[i].style.cssFloat = 'left'; listItems[i].style.float = 'left'; } if(dir == 'vertical' && depth == 1){ setClass(listItems[i],'vertical'); } if(depth == 1){ listItems[i].direction = dir; setClass(listItems[i],'top'); } else { listItems[i].direction = 'vertical'; setClass(listItems[i],'sub'); } listItems[i].menu = menu; listItems[i].setAttribute('role','role:menuitem'); setAaaAttri('level',listItems[i],depth) listItems[i].style.display = 'block'; listItems[i].liPrev = lastItem; if(lastItem != null){ lastItem.liNect = listItems[i]; } lastItem = listItems[i]; listItems[i].liSibPrev = prevSib; if(prevSib != null){ prevSib.liSibNext = listItems[i]; } prevSib = listItems[i]; var list = listItems[i].childNodes; var j = 0; setEventListener(listItems[i],'mouseover',hover,true); setEventListener(listItems[i],'focus',focus,true); while(list[j]){ var nodeName = list[j].nodeName.toLowerCase(); if(nodeName == 'ul'){ listItems[i].ul = list[j]; setClass(listItems[i],'hasub'); list[j].setAttribute('role','role:menu'); list[j].style.display = "none"; crawl(list[j],depth+1); } j++; } } i++; } } crawl(menu,1); } function hover(event){ try{ var item = event.srcElement; item.parentNode; } catch(e) { var item = this; } while(item.nodeName.toLowerCase() != 'li' && item != null){ item = item.parentNode; } if(isClass(item,'active') != null){ return true; } var par = item; var out = true; parActive = false; while(par != null){ if(isClass(par,'active') != null){ parActive = true; } if(par == obj.object){ out = false; par = null; } else { par = par.parentNode; } } if(out != false && parActive != true){ hoverOut(obj.object); } if(out == true && parActive == true){ onmouseoutItem(obj.object); } showMenu(item,true); obj.object = item; return false; } function keydown(event){ if(event.srcElement){ var menu = event.srcElement; } else { var menu = this; } item = menu.focused; var dir = item.direction; if(event.keyCode == 37){ if(dir == 'horizontal'){ item.liSibPrev.focus(); } else { itme.ul.style.display = "none"; } } if(event.keyCode == 39){ item.liSibPrev.focus(); } if(event.keyCode == 38){ item.liSibPrev.focus(); } if(event.keyCode == 40){ item.liSibPrev.focus(); } } function showMenu(menu,bool){ if(menu.nodeName.toLowerCase() != 'li'){ showMenu(menu.parentNode,bool); return false; } if(isClass(menu,'active') != null && bool == true){ return false; } if(bool == true){ setClass(menu,'active'); if(isClass(menu,'top') != null){ setClass(menu,'topactive'); } menu.menu.focused = menu; } else { removeClass(menu,'active'); menu.menu.focused = null; if(isClass(menu,'top') != null){ removeClass(menu,'topactive'); } } var list = menu.childNodes; var i = 0; while(list[i]) { if(list[i].nodeName.toLowerCase() == 'ul'){ if(bool == true){ var menuHight = menu.clientHeight; var width = menu.offsetWidth; var right = document.body.offsetWidth-findPosX(menu)-width; var bottom = document.body.offsetHeight-findPosY(menu); if(right < width){ var left = true; } else { var left = false; } list[i].style.display = "block"; if(ie){ var itemHight = list[i].clientHeight; } else { var itemHight = list[i].firstChild.clientHeight; } if(bottom < itemHight && findPosY(menu) > itemHight){ var bottomBool = true; } else { var bottomBool = false; } if(menu.direction == 'vertical'){ list[i].style.position = 'absolute'; if(left == false){ list[i].style.left = menu.offsetLeft+width-2+'px'; } else { list[i].style.left = menu.offsetLeft-width+'px'; } if(bottomBool == false && !ie){ list[i].style.top = menu.offsetTop+'px'; } else { if(ie){ list[i].style.top = '-2px'; } else {alt(itemHight); list[i].style.top = findPosY(menu)-itemHight+menuHight+'px'; } } } } else { list[i].style.display = "none"; } } i++; } return false; } function findPosX(obj) { var curleft = 0; if(obj.offsetParent) while(1) { curleft += obj.offsetLeft; if(!obj.offsetParent) break; obj = obj.offsetParent; } else if(obj.x) curleft += obj.x; return curleft; } function findPosY(obj) { var curtop = 0; if(obj.offsetParent) while(1) { curtop += obj.offsetTop; if(!obj.offsetParent) break; obj = obj.offsetParent; } else if(obj.y) curtop += obj.y; return curtop; } function clickOut(event){ hoverOut(obj.object); } function onmouseoutItem(menu){ removeClass(menu,'active'); menu.menu.focused = null; if(isClass(menu,'top') != null){ removeClass(menu,'topactive'); } if(menu.ul != null){ menu.ul.style.display = 'none'; } } function hoverOut(item){ if(item == null) { return false; } if(item.nodeName.toLowerCase() != 'li'){ hoverOut(item.parentNode); return false; } var par = item.parentNode; while(par != null){ try { var role = par.getAttribute('role'); if(role == 'role:menu' || role == 'role:menuitem'){ showMenu(par,false); } } catch(e) {} par = par.parentNode; } showMenu(item,false); return true; } function setEventListener(item,event,func,bool) { if(item.addEventListener){ item.addEventListener(event,func,bool); } else { item.attachEvent('on'+event,func,bool); } } function noAction(event){ try{ event.stopPropagation(); event.preventDefault(); } catch(e){ event.cancelBubble = true; } return false; } function getAaaAttri(aAttri,aElem){ if(aElem.setAttributeNS) { return parseInt(aElem.getAttributeNS("http://www.w3.org/2005/07/aaa", aAttri)); } else { return parseInt(aElem.getAttribute("aaa:" + aAttri)); } return null; } function setAaaAttri(aAttri,aElem,value){ if(aElem.setAttributeNS) { aElem.setAttributeNS("http://www.w3.org/2005/07/aaa", aAttri, value); } else { aElem.setAttribute("aaa:" + aAttri, value); } return true; } function setClass(item,value){ if(value != null){ var valueNow = item.className; if(valueNow == null){ return null; } item.className = valueNow + ' ' + value; } return null; } function removeClass(item,value){ var valueNow = item.className; if(valueNow == null){ return null; } var classReg = new RegExp(value,'gi'); item.className = valueNow.replace(classReg,''); return null; } function isClass(item,value){ var valueNow = item.className; if(valueNow == null){ return null; } var classReg = new RegExp(value,'gi'); return valueNow.match(classReg); } //--><!]]> </script> <style type="text/css"> <!--/*--><![CDATA[/*><!--*/ html{ font-family:Tohoma, sans-serif; background:#f6f6f6; } h1 { color:#005A9C; font-size:2.5em; } #menu1 ul { padding:0; margin:0; } #menu1 li { border:1px solid #fff; background-color:#e6e9f4; text-align:center; padding:0; margin:0; } #menu1 li.horizontal { float:left; display:block; } #menu1 li.top a { color:#fff; } #menu1 li.sub a { color:#000; } #menu1 li.sub { padding:2px; width:146px; } * html #menu1 li.sub { width:150px; position:relative; margin-right:-2px; } #menu1 a { text-decoration:none; } #menu1 li.top.active, #menu1 li.top.active.hasub { background-color:#506ab6; } #menu1 li.hasub, #menu1 li.active { background-color:#c4d2e8; } #menu1 li.top, #menu1 li.hasub.top { width:150px; background-color:#2f3f72; } #menu1 li.horizontal.active ul { position:relative; right:1px; } /* For IE must be last */ #menu1 li.topactive { background-color:#506ab6; } /*]]>*/--> </style> </head> <body onload="loadMenu('menu1','horizontal');"> <h1>ARIA Menu</h1> <p> An example of the ARIA teconology (Accessiable Rich Internet Applications) used to make a menu. </p> <p> It is also highly customizable, so you can make it look how ever you want </p> <div style="margin:0 auto;width:800px"> <ul id="menu1"> <li><a href="/">Codefisher</a></li> <li><a href="/toolbar_button/">Toolbar Buttons</a> <ul> <li><a href="/toolbar_button/thunderbird">ThunderBird Toolbar Buttons</a></li> <li><a href="/toolbar_button/firefox">FireFox & Flock Toolbar Buttons</a></li> <li><a href="/toolbar_button/">Toolbar Buttons</a> <ul> <li><a href="/toolbar_button/thunderbird">ThunderBird Toolbar Buttons</a></li> <li><a href="/toolbar_button/firefox">FireFox & Flock Toolbar Buttons</a></li> <li><a href="/toolbar_button/screen_shots">Screen Shots of Toolbar Buttons</a></li> <li><a href="/toolbar_button/button_list">Button List</a></li> <li><a href="/toolbar_button/add-on">Add-on Toolbar Buttons</a></li> </ul> </li> <li><a href="/toolbar_button/screen_shots">Screen Shots of Toolbar Buttons</a></li> <li><a href="/toolbar_button/button_list">Button List</a></li> <li><a href="/toolbar_button/add-on">Add-on Toolbar Buttons</a></li> </ul> </li> <li><a href="/projects/">Michael's Projects</a> <ul> <li><a href="/projects/minimize_to_tray_enhancer">Minimize To Tray Enhancer</a></li> <li><a href="/projects/fright">Fright</a></li> <li><a href="/projects/comic_gallery">Comic Gallery</a></li> <li><a href="/projects/computer_words">Computer Words</a></li> <li><a href="/projects/fright_explained">Fright Explained</a></li> <li><a href="/projects/comment-fright">Fright</a></li> <li><a href="/projects/site_themes">Site Themes</a></li> <li><a href="/projects/comment-comic_gallery">Comic Gallery</a></li> </ul> </li> <li><a href="/codefisher/">Text Editor</a></li> <li><a href="/css_tutorials/">CSS Tutorials</a> <ul> <li><a href="/toolbar_button/add-on">Add-on Toolbar Buttons</a></li> <li> <a href="http://codefisher.org/css_tutorials/beginner/">Intoduction To CSS</a> <ul> <li> <a href="http://codefisher.org/css_tutorials/beginner/start_css_code">Starting to Code CSS</a> </li> <li> <a href="http://codefisher.org/css_tutorials/beginner/css_property_values">CSS Property and Values</a> </li> <li> <a href="http://codefisher.org/css_tutorials/beginner/adding_it_in">Adding the CSS into your page</a> </li> <li> <a href="http://codefisher.org/css_tutorials/beginner/keeping_things_inline">Keeping Things Inline</a> </li> <li> <a href="http://codefisher.org/css_tutorials/beginner/css_optimization">CSS optimization</a> </li> <li> <a href="http://codefisher.org/css_tutorials/beginner/css_selectors">CSS Selectors</a> </li> <li> <a href="http://codefisher.org/css_tutorials/beginner/css_selectors_two">CSS Selectors Continued</a> </li> <li> <a href="http://codefisher.org/css_tutorials/beginner/css_units">CSS Units Of Length</a> </li> </ul> </li> <li><a href="/toolbar_button/thunderbird">ThunderBird Toolbar Buttons</a></li> <li><a href="/toolbar_button/firefox">FireFox & Flock Toolbar Buttons</a></li> <li><a href="/toolbar_button/screen_shots">Screen Shots of Toolbar Buttons</a></li> <li><a href="/toolbar_button/button_list">Button List</a></li> <li><a href="/toolbar_button/add-on">Add-on Toolbar Buttons</a></li> </ul> </li> </ul> </div> </body> </html>
0 members, 0 guests, 0 anonymous users
Community Forum Software by IP.Board
Licensed to: Geeks to Go, Inc.