Encore un menu seo performed and crossbrowser (tested on ff and chrome last version ie7 and 8 (i don't have win7 so ie9 will

Télécharger le projet
Commenter

Description

Je sais, il existe un million de code pour menu. Mais lorsque j'ai chercher je n'ai pas trouver le code qui me convenait. Soit pas adapter a mes besoins techniquement, soit pas SEO (onclick in html...). Alors j'ai décider de créer mon mien (désolé c'est pas très français mais c'est une expression a laquelle je me suis habitue).
Ce code prend en compte les différents browser et est totalement performant pour SEO (aucun javascript cote html si ce n'est l'appel du fichier javascript).
L'utilisation de la class sert uniquement a éviter qu'une autre liste a l’intérieur de la page soit affecte par le script
Le principe est simple, une liste imbriqué dans une liste imbriqué dans une liste....On ouvre la première liste imbriqué au passage de la souris sur la liste supérieur...
Pour le CSS, je vous laisse l’écrire vous même (chqu'un adapte son style a son site donc je ne peut pas vous imposer le mien).

Source / Exemple : 


Le code html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Menu</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/menu.js"></script>
</head>
<body>
<div id="container">
<ul class="menu">
	<li>Menu
		<ul style="display:none;" class="menu">
			<li>Menu</li>
			<li>Menu
				<ul style="display:none;" class="menu">
					<li>Menu</li>
					<li>Menu</li>
					<li>Menu</li>
					<li>Menu</li>
				</ul>
			</li>
			<li>Menu</li>
			<li>Menu</li>
			<li>Menu</li>
		</ul>
	</li>
</ul>
</body>
</html>

Le code Javascript:
window.onload = function(){
	/*Start open/close menu*/
	var tag='ul',nameClass='menu',menus = document.getElementsByTagName(tag);
	for(var i=0,len = menus.length; i < len-1; i++){
		generator(menus,i,tag,nameClass);
	}
	/*End open/close menu*/
};

/*


  •  function generator

  •  menus list of ul elements

  •  i increment number for ul list

*


  •  Open/Close ul sublist in ul list

  • /

var generator = function(menus,i,tag,nameClass){
	(function(Area){
		if(menus[Area].className===nameClass){
			var nextEl;
			if(menus[Area].addEventListener){//for FF and Chrome
				menus[Area].addEventListener('mouseover',function(){//Chrome doesn't support mouseenter
					nextEl = hasNext(this,tag);
					if(nextEl!==false){
						nextEl.style.display="block";
					}
				});
				menus[Area].addEventListener('mouseout',function(){//Chrome doesn't support mouseleave
					nextEl = hasNext(this,tag);
					if(nextEl!==false){
						nextEl.style.display="none";
					}
				});
			}else{//for IE
				menus[Area].attachEvent('onmouseenter',function(){
					nextEl = hasNext(menus[Area],tag);
					if(nextEl!==false){
						nextEl.style.display="block";
					}
				});
				menus[Area].attachEvent('onmouseleave',function(){
					nextEl = hasNext(menus[Area],tag);
					if(nextEl!==false){
						nextEl.style.display="none";
					}
				});
			}
		}
	})(i);
};

/*


  •  function hasNext

  •  elem ul element in the unordered list

  •  searchEl the element we search for in the list

*


  •  return the element searched / false if it doesn't exist 

  • /

function hasNext(elem,searchEl){
	if(elem.hasChildNodes()){	
		return getChildNode(elem,searchEl);
	}
	return false;
}

/*


  •  function getChildNode

  •  elem tag element in the unordered list

  •  searchEl the element we search for in the list

*


  •  return the element searched / false if it doesn't exist

  •  search in multiple downlines

  • /

function getChildNode(elem,searchEl){
	var nextEls = elem.childNodes,result;
	for(var i=0, len=nextEls.length; i < len; i++){
		if(nextEls[i].nodeType===1 && nextEls[i].nodeName.toLowerCase()===searchEl){
			return nextEls[i];
		}
		else if(nextEls[i].nodeType===1 && nextEls[i].hasChildNodes()){
			result = getChildNode(nextEls[i],searchEl);
			if(result) return result;
		}
	}
	return false;
}

Conclusion :


Un menu version javascript 2012. Performance SEO optimal, cross browser.
J'espere que le code menu vous aura plus et surtout servira a quelqu un meme pour l'idee.
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (astro53)