Boîte à onglets / menus et sous-menus / javascript / php / dhtml

5/5 (16 avis)

Vue 19 612 fois - Téléchargée 2 556 fois

Description

Bonsoir,
C'est en partant d'une astuce Javascript, fournie ici :
http://www.css4design.com/blog/index.php/2006/07/05/25-menu-a-onglet-avec-javascript-et-css
qui permet la mise en place d'un menu à onglet simple que je suis parti pour arriver vers où je n'ai pas trouvé d'équivalent. Une petite pincée de PHP et j'ai amélioré le tout à ma façon. A vous de juger.

Ne chercher pas une perfection en dehors des astuces fournies ici, ce script fait parti de mon "laboratoire" et n'est donc pas forcément exploitable tel que :) Merci.

Démo live ici : http://heirem.fr/ecforms/boite_onglets4.php

Source / Exemple :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Boîte à onglets / menus et sous-menus / Javascript / PHP / DHTML</title>
<style type="text/css">
<!--
body {
	font: 13px "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, sans-serif;
	color: #333;
	margin: 0;
	padding: 0;
}

#ecform_container {
	position: relative;
	width: 640px;
	_height: 400px;
	margin: 3em auto;
	text-align: left;	
}
#ecform_container * {
	margin: 0;
	padding: 0;
}
#ecform_title {
	font-size: 1.7em;
	font-weight: bold;
	float: left;	
}
#ecform_entete ul#menu {
	position: relative;
	float: right;
	margin-right: 0;
	/* Hack IE \*/
	margin-right: 6px;
	/* Hack IE \*/	
}
#ecform_entete ul#menu li {
	float: none;
	/* Hack IE \*/
	float: left;
	/* Hack IE \*/
	display: inline;
}
#ecform_entete ul#menu li a {
  cursor: pointer;
	cursor: hand;
	text-align: center;
	display: block;
	width: 80px;
	height: 25px;
	line-height: 25px;
	text-decoration: none;
	border-top: thin #dcdcdc solid;
	border-left: thin #dcdcdc solid;
	border-right: thin #dcdcdc solid;
	border-bottom: thin #e6e6fa solid;
  -moz-border-radius-topleft:6px;
  -moz-border-radius-topright:6px; 
}
#ecform_container ul#menu li a.ghost:hover { 
	background-color: #b0c4de;
	border-bottom: thin #e6e6fa solid;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none;	
}
#ecform_container ul#menu li a.current:hover {
  cursor: default;
  border-bottom: thin #e6e6fa solid;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none;	
}
#ecform_topbar {
  clear: both;
  font-size: x-small;  
  height: 22px;
  padding-top: 5px;
  padding-left: 25px; 
  border: thin #dcdcdc solid;  
	background-image:url(topbar-bg.gif);
  _background-position:left top;
  background-repeat:repeat-x;
  -moz-border-radius-topleft:6px;
  -moz-border-radius-topright:6px; 
}
#ecform_btmbar {
  font-size: x-small;  
  height: 33px;
  padding-top: 5px;
  padding-left: 25px;  
  border: thin #dcdcdc solid;
	background-image:url(btmbar-bg.gif);
  background-position:left top;
  background-repeat:repeat-x;
  -moz-border-radius-bottomleft:6px;
  -moz-border-radius-bottomright:6px;
}
#ecform_btmbar ul .buttons {
	position: relative;
	float: right;
	margin-right: 0;
	/* Hack IE \*/
	margin-right: 6px;
	/* Hack IE \*/	
}
#ecform_btmbar ul li {
	float: none;
	/* Hack IE \*/
	float: left;
	/* Hack IE \*/
	display: inline;
}
#ecform_btmbar ul li a{
  cursor: pointer;
  cursor: hand;
  font-weight: bold;
	text-align: center;
	display: block;
	width: 80px;
	height: 25px;
	line-height: 25px;
	text-decoration: none;
	border: thin #c0c0c0 solid;
	background-color: #f0f8ff;
	-moz-border-radius: 10px;
}
#ecform_btmbar #btsubmit:hover {
  background-color: #b0c4de;
}
#ecform_btmbar #btcancel:hover {
  background-color: #b0c4de;
}
#ecform_btmbar #btsubmit:active {
  background-color: #b0c4de;  
  margin-top: 4px;
  margin-right: -4px;
}
#ecform_btmbar #btcancel:active {
  background-color: #b0c4de;
  margin-top: 4px;
  margin-right: -4px;
  margin-left: 4px;
}
#ecform_content {
  clear: both;
  height: 350px;   
  border-left: thin #dcdcdc solid; 
  border-right: thin #dcdcdc solid;
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom: 1em;
  overflow-x : hidden;  
}
#ecform_content .titcontent {
  float:left; 
  margin-top: 1em;
}
#ecform_entete a.current {
	background-color: #b9dbed;	
}
#ecform_entete a.ghost  {
	background-color: #f0f8ff;
}
#ecform_container .on {
	display: block;
}
#ecform_container .off {
	display: none;
}
.ecform_smenu{
	position: relative;
	float: right;
	font-size: x-small;
	margin-right: -1.4em !important;
}
#ecform_content .smcontent {
  clear: both;
  position: relative;
  padding-top: 1em;
}
.ecform_smenu ul.smenu {
	position: relative;
	float: right;
	margin-right: 0px;
	/* Hack IE \*/
	margin-right: 0px;
	/* Hack IE \*/	
}
.ecform_smenu ul.smenu li {
	display: inline;
	float: none;
	/* Hack IE \*/
	float: left;
	/* Hack IE \*/
}
.ecform_smenu ul.smenu li a {
  cursor: pointer;
	cursor: hand;
	text-align: center;	
	display: block;
	width: 80px;
	height: 20px;
	line-height: 20px;
	text-decoration: none;
	border-top: thin #dcdcdc solid;
	border-left: thin #dcdcdc solid;
	border-right: thin #dcdcdc solid;
	border-bottom: thin #e6e6fa solid;
  -moz-border-radius-bottomleft:6px;
  -moz-border-radius-bottomright:6px; 
}
#ecform_container ul.smenu li a.sghost:hover { 
	background-color: #b0c4de;
	border-bottom: thin #e6e6fa solid;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none;	
}
#ecform_container ul.smenu li a.scurrent:hover {
  cursor: default;
  border-bottom: thin #e6e6fa solid;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none;	
}
a.scurrent {
	background-color: #cee4f2;	
}
a.sghost  {
	background-color: #f0f8ff;
}
.son {
	display: block;
}
.soff {
	display: none;
}
-->
</style>
<script type="text/javascript">
<!--
function multiMenu(eltId) {
	arrLinkId = new Array('_0','_1','_2','_3');
	intNbLinkElt = new Number(arrLinkId.length);
	arrClassLink = new Array('current','ghost');
	strContent = new String()
	for (i=0; i<intNbLinkElt; i++) {
		strContent = "menu"+arrLinkId[i];
		if ( arrLinkId[i] == eltId ) {
			document.getElementById(arrLinkId[i]).className = arrClassLink[0];
			document.getElementById(strContent).className = 'on content';
		} else {
			document.getElementById(arrLinkId[i]).className = arrClassLink[1];
			document.getElementById(strContent).className = 'off content';
		}
	}	
}
function multiSMenu(eltId,pfxContent,n,m) {
  arrLinkId = new Array();
  for (i=0; i<m; i++) {arrLinkId.push('s'+n+i);}			
	arrClassLink = new Array('scurrent','sghost');
	strContent = new String()
	for (j=0; j<arrLinkId.length; j++) {
		strContent = pfxContent+arrLinkId[j];
		if ( arrLinkId[j] == eltId ) {
			document.getElementById(arrLinkId[j]).className = arrClassLink[0];
			document.getElementById(strContent).className = 'son scontent';			
		} else {
			document.getElementById(arrLinkId[j]).className = arrClassLink[1];
			document.getElementById(strContent).className = 'soff scontent';			
		}		
	}	
}
-->
</script>
</head>
<body>
<?php
/*  Insertion d'un sous-menu
    chaîne $pfxContent  : préfix des div de contenu que l'on fait switcher
    nombre $numMenu     : N° du menu dans le script
    array  $strItems    : Tableau des items de sous-menu
    nombre $bwidth      : on peut modifier la largeur des blocks de sous-menu

  • /
function InsertSmenu( $pfxContent, $numMenu, $strItems = array(), $bwidth = 0) { ?> <div class="ecform_smenu"> <ul class="smenu"> <?php $bwidth =($bwidth > 0) ? 'style ="width:'.$bwidth.'px;" ' : ''; for($i=0; $i<count($strItems); $i++) { echo "\t\t".'<li class="smenu'.$i.'">'."\n\t\t"; echo '<a id="s'.$numMenu.$i.'" class="'.(($i == 0) ? 'scurrent':'sghost').'" onclick="multiSMenu(this.id,'."'".$pfxContent."'".','.$numMenu.','.count($strItems).')" alt="smenu_'.$numMenu.$i.'" '.$bwidth.'>'.$strItems[$i].'</a>'."\n"; echo "\t\t".'</li>'."\n"; } ?> </ul> </div> <?php } ?> <div id="ecform_container"> <div id="ecform_entete"> <span id="ecform_title">Titre de la boite</span> <ul id="menu"> <li class="menu_0"> <a id="_0" class="current" onclick="multiMenu(this.id)" alt="menu0">Accueil</a> </li> <li class="menu_1"> <a id="_1" class="ghost" onclick="multiMenu(this.id)" alt="menu1">Menu 1</a> </li> <li class="menu_2"> <a id="_2" class="ghost" onclick="multiMenu(this.id)" alt="menu2">Menu 2</a> </li> <li class="menu_3"> <a id="_3" class="ghost" onclick="multiMenu(this.id)" alt="menu3">Conclusion</a> </li> </ul> </div> <div id="ecform_topbar">Top Bar</div> <div id="ecform_content"> <div id="menu_0" class="on content"> <div class="titcontent"> <h2 >Accueil</h2> <p>Texte Accueil ;)</p> </div> <?php echo InsertSmenu("smenu",0,array('S.Menu 1','S.Menu 2','S.Menu 3','S.Menu 4'));?> <div class="smcontent"> <div id="smenus00" class="son scontent"> <h2>Sous Menu 1</h2> <p>Texte sous menu 1 ;)</p> </div> <div id="smenus01" class="soff scontent"> <h2>Sous Menu 2</h2> <p>Texte sous menu 2 ;)</p> </div> <div id="smenus02" class="soff scontent"> <h2>Sous Menu 3</h2> <p>Texte sous menu 3 ;)</p> </div> <div id="smenus03" class="soff scontent"> <h2>Sous Menu 4</h2> <p>Texte sous menu 4 ;)</p> </div> </div> </div> <div id="menu_1" class="off content"> <div class="titcontent"> <h2 >Titre Menu 1</h2> <p>Texte menu 1 ;)</p> </div> <?php echo InsertSmenu("smenu",1,array('S.Menu 1','S.Menu 2','S.Menu 3','S.Menu 4'),60);?> <div class="smcontent"> <div id="smenus10" class="son scontent"> <?php echo InsertForm1();?> </div> <div id="smenus11" class="soff scontent"> <h2>Sous Menu 2</h2> <p>Texte sous menu 2 ;)</p> </div> <div id="smenus12" class="soff scontent"> <h2>Sous Menu 3</h2> <p>Texte sous menu 3 ;)</p> </div> <div id="smenus13" class="soff scontent"> <h2>Sous Menu 4</h2> <p>Texte sous menu 4 ;)</p> </div> </div> </div> <div id="menu_2" class="off content"> <div class="titcontent"> <h2 >Titre Menu 2</h2> <p>Texte menu 2 ;)</p> </div> </div> <div id="menu_3" class="off content"> <div class="titcontent"> <h2 >Conclusion</h2> <p>Texte Conclusion ;)</p> </div> </div> </div> <div id="ecform_btmbar"> <ul id="ecform_buttons"> <li class="buttons"> <a id="btcancel" alt="Cancel">Annuler</a> </li> <li class="buttons"> <a id="btsubmit" onClick="document.forms.f.submit()" alt="Submit">Valider</a> </li> </ul> </div> </div> </div> </body> </html> <?php /* Insertion d'un formulaire pour vérifier sa tenue dans la boîte inspiré de l'excellent tuto ici : http://a-pellegrini.developpez.com/tutoriels/css/formulaire/
  • /
function InsertForm1() { ?> <link type="text/css" rel="stylesheet" href="form.css" /> <form id="monForm" action="#" method="post"> <fieldset> <legend>Informations personnelles</legend> <p> <label for="form_firstname">Prénom : </label> <input type="text" id="form_firstname" name="firstname" /> </p> <p> <label for="form_lastname">Nom : </label> <input type="text" id="form_lastname" name="lastname" /> </p> <p> <label for="form_gender">Sexe : </label> <input type="text" id="form_gender" name="gender" /> </p> <p> <label for="form_birthday">Date de naissance : </label> <input type="text" id="form_birthday" name="birthday" /> </p> <p> <label for="form_address">Adresse : </label> <input type="text" id="form_address" name="address" /> </p> <p> <label for="form_postal_code">Code postal : </label> <input type="text" id="form_postal_code" name="postal_code" /> </p> <p> <label for="form_city">Ville : </label> <input type="text" id="form_city" name="city" /> </p> </fieldset> </form> <?php } ?>

Conclusion :


Si cela peut servir, tant mieux. Si vous avez des suggestions d'améliorations, tant mieux aussi ;)
Cordialement

Codes Sources

A voir également

Ajouter un commentaire Commentaires
jibe84 Messages postés 4 Date d'inscription jeudi 26 juin 2008 Statut Membre Dernière intervention 14 février 2014
3 juin 2010 à 11:02
Merci
Gr3g69 Messages postés 27 Date d'inscription dimanche 6 décembre 2009 Statut Membre Dernière intervention 13 février 2010
21 janv. 2010 à 03:25
Hello Heirem,

Ton morceau de code fonctionne à merveille, çà ne m'as pas pris trop de temps a "corriger" l' affichage sous IE, mais bon ca reste IE ;-).

Toutefois, j'ai une question, et je ne trouves pas la solution.

J'aimerais pouvoir afficher des boutons à l'intérieur des sous menus (dans ton exemple, à l'intérieur de la fonction InsertForm1()...)

Je suis donc parti a priori sur un événement onClick="multiSMenu(s12,"smenu",1,7)"

Mais ça ne fonctionne pas ...

Ça m'ennuierais vraiment de devoir passer par des if, elseif, ... pour changer le contenu de la class "son scontent"/"soff scontent" cela reviendrais a copier les lignes ci-dessous autant de fois qu'il y a d'entrées dans mon sous-menu.

<form id="monForm" action="" method="post">


<?php echo InsertForm1();?>




<?php echo InsertForm2();?>




<?php echo InsertForm3();?>




<?php echo InsertForm4();?>




<?php echo InsertForm5();?>




<?php echo InsertForm6();?>




<?php echo InsertForm0();?>


</form>

<!--smcontent-->

Aurais-tu une idée ?
jdaviaud Messages postés 151 Date d'inscription mercredi 8 janvier 2003 Statut Membre Dernière intervention 8 octobre 2013
27 août 2009 à 17:03
Tout d'abord merci pour cette excellente source qui représente exactement ce dont j'avais besoin

Le seul problème concerne toujours le pire des navigateurs, IE ...

Autant le résultat est parfait dans FireFox et Chrome ce qui est selon moi normal vu leur qualité ... mais sous IE la barre du bas n'en fait qu'à sa tete

J'ai fait des copies d'écran pour illustrer mon problème :

Firefox : http://www.jdsoft.net/bugie/firefox.gif
Chrome : http://www.jdsoft.net/bugie/chrome.gif
IE : http://www.jdsoft.net/bugie/ie.gif

Bien qu'en plus de cas les boutons sous IE sont un peu en "vrac" mon problème est surtout la barre du bas qui est à 3km du cadre et prend toute la largeur de la page, les boutons n'y apparraissent même pas

J'ai reprit ta source depuis le départ mais je ne vois pas de différence de code j'ai uniquemement changé le contenu des différentes pages appelées par le menu

Et ton exemple marche chez moi sur IE bien que les boutons du menu soit en vrac

Aurais tu une idée d'ou peut venir mon probleme ?
j'ai mi le code de la page dans un fichier texte si ca peut aider : http://www.jdsoft.net/bugie/code.txt

Merci d'avance et surtout merci pour cette excellente source encore une fois !
cs_Valentino Messages postés 81 Date d'inscription vendredi 19 juillet 2002 Statut Membre Dernière intervention 3 août 2010
8 janv. 2009 à 11:30
Parfait ^_^

Merci beaucoup Heirem ;o)
cs_Heirem Messages postés 22 Date d'inscription dimanche 16 juillet 2006 Statut Membre Dernière intervention 25 novembre 2011
8 janv. 2009 à 11:19
Merci Kimjoa,
Pour te dire la vérité j'ai terminé la classe de génération de formulaires adaptée à ma boîte. cela fonctionne bien pour le moment. Mais je peaufine la validation des champs et je suis en train d'écrire une classe javascript destinée à afficher, de façon simple pour le dévellopeur, des tooltips d'information ou d'alerte. Donc dès que tout sera cohérent, débugué et publiable je ferais une mise à jour ici :)
Afficher les 16 commentaires

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.