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

Soyez le premier à donner votre avis sur cette source.

Vue 3 893 fois - Téléchargée 505 fois

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.

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
48
Date d'inscription
jeudi 18 octobre 2007
Statut
Membre
Dernière intervention
5 août 2009

Salut

Merci pour ton commentaire. J'ai vu un menu uniquement fait en css et oui ca doit etre possible.

J'arrive pas bien a voir comment proceder avec la performance dont tu parles (getElementsByTagName...)

Je n'ai jamais dis que IE ne prend pas en compte onmouseover et onmouseout, en revanche "this" sur IE ne correspond pas a menu[Area].

C'est pourquoi j'ai decider de laisser dans les deux cas menu[Area](clarte du code).

onmouseleave et onmouseenter sont plus performant a mon gout puisque il n'interviennent pas sur les elements enfants contrairement a onmouseover et onmouseout.

Pour FF et Chrome sur l'un des deux browsers onmouseleave et onmouseenter ne fonctionne pas c'est pourquoi j'ai utiliser onmouseover et onmouseout.

Merci pour la verification sous IE9.

A bientot
Astro
Messages postés
226
Date d'inscription
lundi 6 mai 2013
Statut
Membre
Dernière intervention
3 juillet 2014
1
Salut,

un menu de ce style là doit pouvoir être géré uniquement avec du css... Enfin il me semble (si quelqu'un n'est pas d'accord qu'il me le dise).

autre petite remarque :
ta fonction getChildNode, tu pourrais l'optimiser de la manière suivante :
un appel à getElementsByTagName réduirait la liste à parcourir pour trouver la node cherché.

Pour information, IE gère les événeements onmouseover et onmouseout.
Autre information : ton code fonctionne sous IE 9.

Cordialement,
Gigatrappeur

Si mon message te paraît sec, j'en suis désolés, j'ai écrit ces lignes uniquement dans le but de te faire progresser...

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.