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.