And who do you want to help?
Edited by Michael, 17 May 2007 - 01:03 AM.
Drop Down menu bar
Started by
NEW ZEALAND
, May 15 2007 01:13 AM
#16
Posted 17 May 2007 - 01:02 AM
Michael
-
- Retired Staff
-
- 1,869 posts
Retired Staff
And who do you want to help?
#17
Posted 17 May 2007 - 01:17 AM
NEW ZEALAND
- Topic Starter
-
- Member
-
- 93 posts
Member
The CelestialTeardrop guy who postet that link i need that type of navigation bar!
And help would be from anyone!! especially you michael
cheers
And help would be from anyone!! especially you michael
cheers
Edited by NEW ZEALAND, 17 May 2007 - 01:17 AM.
#18
Posted 17 May 2007 - 01:24 AM
Michael
-
- Retired Staff
-
- 1,869 posts
Retired Staff
I forgot I had not made it compatible with IE yet, it only works in Firefox. I should fix that. See the attachment of what I see in Firefox
Attached Thumbnails
#19
Posted 17 May 2007 - 01:28 AM
NEW ZEALAND
- Topic Starter
-
- Member
-
- 93 posts
Member
yep thats the one i need!!
all good!! do u know the codec for that?? if do u could u tell me?
i really appreciated it aye
cheers
all good!! do u know the codec for that?? if do u could u tell me?
i really appreciated it aye
cheers
#20
Posted 17 May 2007 - 01:37 AM
Michael
-
- Retired Staff
-
- 1,869 posts
Retired Staff
I fix it up now if I can, I think I know where it would be going wrong. That is my menu.
I am writing it as an example of the use of ARIA, which is supposed to help disabled users who relay on screen readers.
I am writing it as an example of the use of ARIA, which is supposed to help disabled users who relay on screen readers.
#21
Posted 17 May 2007 - 01:40 AM
NEW ZEALAND
- Topic Starter
-
- Member
-
- 93 posts
Member
i see true true
thx man
really appreciated your help
thx man
really appreciated your help
#23
Posted 17 May 2007 - 05:53 AM
Michael
-
- Retired Staff
-
- 1,869 posts
Retired Staff
IE is being #&$*)#(*$ horrible. So it is taking long than I thought.
I really wish IE would just follow the standards set by W3C and not make up its own
I really wish IE would just follow the standards set by W3C and not make up its own
#24
Posted 18 May 2007 - 07:59 AM
NEW ZEALAND
- Topic Starter
-
- Member
-
- 93 posts
Member
have u finished now?
#26
Posted 18 May 2007 - 09:26 AM
NEW ZEALAND
- Topic Starter
-
- Member
-
- 93 posts
Member
i see =.=
The webpage is not working!!! would it be possible if u send me the code!!!
content
cell phones*
part2 phones
email*
part2 email
Chat*
part2 chat
internet*
part2 internet
i need that type if u got one! if u move ur mouse to content it comes up with cell phones phones, email, chat, internet and then if you mvoe mouse to actual * they will show a part2 of that word!
u know? what i mean! I know im asking a lot but if u know the code it would be
really help full! michael!!
cheers man
The webpage is not working!!!
would it be possible if u send me the code!!!content
cell phones*
part2 phones
email*
part2 email
Chat*
part2 chat
internet*
part2 internet
i need that type if u got one! if u move ur mouse to content it comes up with cell phones phones, email, chat, internet and then if you mvoe mouse to actual * they will show a part2 of that word!
u know? what i mean! I know im asking a lot but if u know the code it would be
really help full! michael!!
cheers man
Edited by NEW ZEALAND, 18 May 2007 - 09:28 AM.
#27
Posted 18 May 2007 - 11:07 AM
CelestialTeardrop
-
- Member
-
- 262 posts
Member
I hope Michael will not mind that I post this.
Here is the page source for http://codefisher.or...menu/menu.xhtml
Here is the page source for http://codefisher.or...menu/menu.xhtml
<?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>
#28
Posted 18 May 2007 - 07:02 PM
NEW ZEALAND
- Topic Starter
-
- Member
-
- 93 posts
Member
Ah THanks VEry MUCH man!!!!
Im creating a a navigation bar right now and ill show u if you be intrested!!!!! THanks again Michael and CelestialTeardrop!!
Its just what i need it!!!
Thanks again guys!!!
Im creating a a navigation bar right now and ill show u if you be intrested!
!!!! THanks again Michael and CelestialTeardrop!!Its just what i need it!!!
Thanks again guys!!!
Similar Topics
0 user(s) are reading this topic
0 members, 0 guests, 0 anonymous users
As Featured On:
Sign In
Create Account
