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

Soyez le premier à donner votre avis sur cette source.

Vue 18 938 fois - Téléchargée 2 488 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
Messages postés
4
Date d'inscription
jeudi 26 juin 2008
Statut
Membre
Dernière intervention
14 février 2014

Merci
Messages postés
27
Date d'inscription
dimanche 6 décembre 2009
Statut
Membre
Dernière intervention
13 février 2010

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 ?
Messages postés
151
Date d'inscription
mercredi 8 janvier 2003
Statut
Membre
Dernière intervention
8 octobre 2013

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 !
Messages postés
81
Date d'inscription
vendredi 19 juillet 2002
Statut
Membre
Dernière intervention
3 août 2010

Parfait ^_^

Merci beaucoup Heirem ;o)
Messages postés
22
Date d'inscription
dimanche 16 juillet 2006
Statut
Membre
Dernière intervention
25 novembre 2011

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.