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

Télécharger le projet
Commenter

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
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.