Un menu d'accueil magnifique

[Kemsey]

Bonjour alors voila je ne vais pas vous faire perdre votre temps je vais être bref
Comment est t-il possible de faire un menu d'accueil comme ce forum:

http://www.rpgmakervx-fr.com/forum.htm

Spoiler:

C'est magnifique:

Donc ma Demande se fait en 3 question:

01: Comment faire des onglet sur la page d'accueil
02: Comment faire un panneaux comme: Le Staff de la commu
03: Comment faire plusieurs fenêtre

Merci de m'aider

[Invité]

Bonjour!

Commençons pas le tableau à onglets:
1. Copiez, enregistrez et hébergez ce fichier .js:

Code:

function changeOnglet(_this){
    var getOnglets    = document.getElementById('mes_onglets').getElementsByTagName('li');
    for(var i = 0; i < getOnglets.length; i++){
        if(getOnglets[i].id){
            if(getOnglets[i].id == _this.id){
                getOnglets[i].className = 'mon_onglet_selected';
                document.getElementById('c' + _this.id).style.display            = 'block';
            }
            else{
                getOnglets[i].className = 'mon_onglet';
                document.getElementById('c' + getOnglets[i].id).style.display    = 'none';
            }
        }
    }         
}

2.Placez ceci dans votre feuille CSS ( à personnaliser):

Code:

ul, li{
  list-style: none;
}
.mon_onglet{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #000;
  background: #ffffff;
  border: 1px solid #ff0000;
  cursor: pointer;
  margin-bottom: -1px;
}
.mon_onglet:hover{
  background: #b8efa1;
}         
.mon_onglet_selected{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #000;
  background: #ffffff;
  border-top: 1px solid #ff0000;
  border-right: 1px solid #ff0000;
  border-left: 1px solid #ff0000;
  border-bottom: 1px solid #ffffff;
  cursor: pointer;
  margin-bottom: -1px;
}           
.clear{
  clear: both;
}
.mon_contenu{
  color: #000;
  background: #ffffff;
  border: 1px solid #ff0000;
  padding: 10px;
        margin: -1px;         
}
#mes_contenus, #mes_onglets{
  width: 400px;
}

3.Et voici le code du message d'accueil (à personnaliser):

Code:

<script src="ADRESSE_DU_FICHIER.js"></script><div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</li>
        <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Onglet 4</li>
        <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu">Mon contenu 1</div>
    <div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
    <div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
    <div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
</div></ul>

Pour le staff c'est un système d'infobulles:
Le code infobulle à inserer dans le message d'accueil et à personnaliser:

Code:

<div class="infobulle"><a href="lien ou apparait l'infobulle"><br /><span>Contenu de la bulle</span></div>

La feuille CSS (à personnaliser):

Code:

.infobulle{position: relative;z-index: 0;}

.infobulle:hover{background-color: transparent;z-index: 50;}

.infobulle span{
position: absolute;
background-color: #000000;
padding: 5px;
left: -1000px;
visibility: hidden;
color: #FFFFFF;}

.infobulle span img{border: 1px;padding: 5px;}

.infobulle:hover span{
visibility: visible;
top: 70px;
left: 35px;
width: 150px ;
color:#FFFFFF;
border: 1px outset #e47509;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;}

Pour la question 3, je 'ai pas compris ...

Cordialement.

[Kemsey]

Excuse moi mais tu n'a pas fait d'erreur pour le fichier .js: ?

[Invité]

Euh ...
Ce script n'est pas de moi, je l'ai recherché à la base pour ce sujet :
Onglets en page d'accueil . Je l'ai testé et cela fonctionne.
Mais je suis effectivement une débutante, il est donc possible que ce soit imparfait sans que je le sache. J'ai copié le script je l'ai enregistré en .js puis hébergé, et ça a fonctionné.
Si vous avez un correctif à apporter, je suis toute ouïe, car si le système peut être amélioré , ce n'en sera qu'encore mieux.

Cordialement.

[Kemsey]

J'explique je suis sous-débutant je sais que c'est du java mais je ne sais ni l'enregistré ni l'héberger

[Invité]

Bonsoir,

Pas de soucis, je vous présente mes excuses pour cette méprise. Pour vous faciliter la tâche je vous donne l'adresse du script que j'utilise:

Code:

http://sd-2.archive-host.com/membres/up/86411517957321821/onglet.js

Si vous souhaitez l'héberger, inscrivez vous sur https://www.archive-host.com . Copiez/coller le script dans le bloc-note window et enregistrez le en mettant .js à la fin du nom. Vous n'aurez plus qu'à le telecharger sur Archive-Host pour obtenir l'adresse du fichier.

Cordialement.

[Kemsey]

Ah ah ah c'était si simple donc je vais bosser dessus encore 30,40min pour voir

Merci pour tout vos indication et bonne chance pour la suite