H-Hill
Padawan
Nombre de messages : 30
Age : 45
Date d'inscription : 04/02/2007
 |  Sujet: encore un menu...  Dim 18 Fév 2007 - 6:32 | |
| Hi, voici un autre script de menu sos Js... Interessant comme vous allez le constater car vraiment dynamique... - Citation :
- <script type="text/javascript">
function creerMenuOnglet() {
// Constructeur du menu
this.onglets=new Array();
this.print=printMenuOnglet;
this.addOnglet=addOnglet;
this.addLien=addLien;
this.onOnglet=onOnglet;
}
function addOnglet(libelle) {
// Méthode d'ajout d'un onglet
var onglet=new Object();
onglet.libelle=libelle;
onglet.liens=new Array();
this.onglets[this.onglets.length]=onglet;
}
function addLien(libelle, url, target) {
// Méthode d'ajout d'un lien sur l'onglet précédemment ajouté
var lien=new Object();
lien.libelle=libelle;
lien.url=url;
if (target==undefined) {
target="_self";
}
lien.target=target;
var indice=this.onglets[this.onglets.length-1].liens.length
this.onglets[this.onglets.length-1].liens[indice]=lien;
}
function printMenuOnglet() {
// Méthode d'affichage
var txtMenu="<div id=\"onglets\">";
for (var noOnglet=0; noOnglet<this.onglets.length ; noOnglet++) {
txtMenu+="<div id=\"onglet"+noOnglet+"\" class=\"onglet\" onmouseover=\"menuOnglet.onOnglet("+noOnglet+")\">"+this.onglets[noOnglet].libelle+"</div>";
}
txtMenu+="</div><div id=\"sousOnglet\"><div> </div></div></div>";
document.write(txtMenu);
}
function onOnglet(indice) {
for (var noOnglet=0; noOnglet<this.onglets.length ; noOnglet++) {
document.getElementById("onglet"+noOnglet).className="onglet";
}
document.getElementById("onglet"+indice).className="ongletON";
var txtSousOnglet="";
for (var noSousOnglet=0; noSousOnglet<this.onglets[indice].liens.length ; noSousOnglet++) {
var sousOnglet=this.onglets[indice].liens[noSousOnglet];
txtSousOnglet+="<div><a href=\""+sousOnglet.url+"\" target=\""+sousOnglet.target+"\">"+sousOnglet.libelle+"</a></div>";
}
document.getElementById("sousOnglet").innerHTML=txtSousOnglet;
}
var menuOnglet=new creerMenuOnglet();
menuOnglet.addOnglet("Javascript");
menuOnglet.addLien("Tout Javascript.com", "http://www.toutjavascript.com");
menuOnglet.addLien("Editeur Javascript.com", "http://www.editeurjavascript.com");
menuOnglet.addOnglet("PHP");
menuOnglet.addLien("PHP.net", "http://www.php.net");
menuOnglet.addLien("InfoPHP.net", "http://www.infophp.net");
menuOnglet.addOnglet("Webmaster");
menuOnglet.addLien("WebmasterClub", "http://www.WebmasterClub.fr");
menuOnglet.addOnglet("Hébergement");
menuOnglet.addLien("Binghost", "http://www.Binghost.com");
menuOnglet.addLien("OVH", "http://www.ovh.fr");
</script>
<style type="text/css">
#onglets {
display:block;
}
#onglets div {
display:inline;
font-family:arial;
font-size:12px;
margin-right:10px;
padding:5px;
padding-bottom:0px;
border:1px solid #999;
border-bottom-width:0px;
font-weight:bold;
cursor: hand;
}
.onglet {
color:#000;
background-color:#fff;
}
.ongletOn {
color:#fff;
background-color:#999;
}
#sousOnglet {
display:block;
background-color:#999;
padding:2px;
margin:0px;
}
#sousOnglet div,a {
font-family:arial;
font-size:12px;
display:inline;
padding:2px;
margin-right:10px;
color:#fff;
}
</style>
<body>
<p>Titre de la page...</p>
<script type="text/javascript">
menuOnglet.print();
</script>
<p>Contenu de la page</p>
</body> | |
|
