Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

Drop Down menu bar


  • Please log in to reply

#16
Michael

Michael

    Retired Staff

  • Retired Staff
  • 1,869 posts
Which one is the one?

And who do you want to help?

Edited by Michael, 17 May 2007 - 01:03 AM.

  • 0

Advertisements


#17
NEW ZEALAND

NEW ZEALAND

    Member

  • Topic Starter
  • Member
  • PipPip
  • 93 posts
The CelestialTeardrop guy who postet that link i need that type of navigation bar!

And help would be from anyone!! especially you michael :whistling:

cheers

Edited by NEW ZEALAND, 17 May 2007 - 01:17 AM.

  • 0

#18
Michael

Michael

    Retired Staff

  • Retired Staff
  • 1,869 posts
:whistling:

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

  • menu.png

  • 0

#19
NEW ZEALAND

NEW ZEALAND

    Member

  • Topic Starter
  • Member
  • PipPip
  • 93 posts
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 :whistling:
  • 0

#20
Michael

Michael

    Retired Staff

  • Retired Staff
  • 1,869 posts
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.
  • 0

#21
NEW ZEALAND

NEW ZEALAND

    Member

  • Topic Starter
  • Member
  • PipPip
  • 93 posts
i see true true

thx man :whistling:

really appreciated your help :blink:
  • 0

#22
NEW ZEALAND

NEW ZEALAND

    Member

  • Topic Starter
  • Member
  • PipPip
  • 93 posts
have u finished? :whistling:
  • 0

#23
Michael

Michael

    Retired Staff

  • Retired Staff
  • 1,869 posts
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 :whistling:
  • 0

#24
NEW ZEALAND

NEW ZEALAND

    Member

  • Topic Starter
  • Member
  • PipPip
  • 93 posts
have u finished now? :whistling:
  • 0

#25
Michael

Michael

    Retired Staff

  • Retired Staff
  • 1,869 posts
I was having FTP problems :whistling: plus I had an exam today.

http://codefisher.or...menu/menu.xhtml
  • 0

Advertisements


#26
NEW ZEALAND

NEW ZEALAND

    Member

  • Topic Starter
  • Member
  • PipPip
  • 93 posts
i see =.=

The webpage is not working!!! :whistling: 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!! :blink:

cheers man

Edited by NEW ZEALAND, 18 May 2007 - 09:28 AM.

  • 0

#27
CelestialTeardrop

CelestialTeardrop

    Member

  • Member
  • PipPipPip
  • 262 posts
I hope Michael will not mind that I post this.

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 &amp; 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 &amp; 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 &amp; 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

#28
NEW ZEALAND

NEW ZEALAND

    Member

  • Topic Starter
  • Member
  • PipPip
  • 93 posts
Ah THanks VEry MUCH man!!!!


Im creating a a navigation bar right now and ill show u if you be intrested! :whistling:!!!! THanks again Michael and CelestialTeardrop!!

Its just what i need it!!!

Thanks again guys!!!
  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP