Menu accordéon Horizontal [résolu, merci !]

[eavane]

Salut

Alors voila... j'aimerais avoir une page d'accueil en accordéon horizontal.
Bien entendu, j'ai chercher partout sur forum actif, et sur google pour voir des tutos.. mais je dois avouer que je ne m'y connais vraiment pas, alors c'est du japonais total pour moi.

Alors en faite, j'aimerais savoir si une personne s'y connaitrait, dans les codes de menu en accordéon horizontal... le modèle que je cherche.. surtout est comme suis :

http://www.portalzine.de/Horizontal_Accordion_Plugin_2/index.html

le modèle qui m'intéresse ? le deuxième

IL me faudrait bien sure les codes de base... et un peu de travaille pour le personnalisé sur mon forum.. bien entendu.. avec l'aide d'une personne qui sera bien aimable et patient avec moi lol

J'apprends vite et je suis prête à travailler fort fort

Merci d'avance pour toute l'aide que vous m'apporterez

Cordialement
Maxence

[eavane]

Up ?

[eavane]

Up ?

[eavane]

ouin... c'est plein de monde ici ! lol

Up !!

[Lixyr]

Je up avec toi !

[Administrateurman]

Je me lance dans un petit tuto pour vous expliquer cela !
Rendez-vous demain aux alentours de avant 19h ou apres minuit .
Vous aurez tout expliqué demain ou après demain !
Ps : Quel type d'acordéon voulez-vous ? sur votre lien ?

[eavane]

le 2ème type montrer dans ce lien :

http://www.portalzine.de/Horizontal_Accordion_Plugin_2/index.html

[Administrateurman]

En fait c'est un peu dur à expliquer ....
Mais dites moi ce que vous voulez mettre dedans !
En gros remplissez ceci :

Code:

[b]Accordéons[/b] :
-Nombre :
-Contenu du 1:
-Contenu du 2:
-Contenu du 3:
...
-adresse de l'image des accordéons ( dans l'exemple : http://www.portalzine.de/Horizontal_Accordion_Plugin_2/images/blade_grey.png )
-adresse de l'image en haut à gauche de l'accordéon 1 :
-adresse de l'image en haut à gauche de l'accordéon 2 :
...


[eavane]

oki je fais ca bientot.. car la je suis.. trop crever lol
merci pour votre aide

[eavane]

bon alors voilà

J'aimerais qu'il y ait 4 accordéons

Les images seront celles ci pour le moment (je les modifierai en temps voulue):

Spoiler:

Je ne les numéroterai pas pour le moment, ni ne les identifierai pas. Car je dois en faire pour que se soit un beau design alors celles ci feront l'affaire pour l'instant

Sinon, dans le premier accordéon, je vais y mettre deux choses, mon message de bienvenue, et mes membres d'administration. Seulement pour le moment, je n'ai que mon message de bienvenue et le voici :

Spoiler:

Bien entendu.. j'aimerais qu'il soit centré, en haut de la page en accordéon. En dessous de celui ci, je mettrai mes membres d'administration.

Pour la deuxième page....

Spoiler:

je ne mettrai que cela pour le moment... bien entendu.. tout est centré

La troisième page... bah...

Spoiler:

En dessous de cela, j'aimerais écrire en haut à gauche : Royaumes Nordiques
En haut a droite : Royaumes Côtiers
En bas a droite : Terres du Milieux
En bas a gauche : Empire Noir

Bien entendu... je vais y mettre de petite description en dessous de chacun.

Sur la dernière page, il y aura mes tops sites et mes partenariats.. et pour le moment.. je n'ai que cela :

Spoiler:

Bon je sais.. c'est vague.. et peu détaillé, mais je ne veux que faire la base pour le moment. Avoir la base du tableau en accordéon. Je m'occuperai du reste du mieux que je peux, et si j'ai des questions ou des problèmes... bah je reviendrai chercher de l'aide ^^
M'en fin.. j'ai tendance à mal m'expliquer, alors à votre choix.. je veux toujours faire des exemples visuels

Merci pour tout

[Lixyr]

Up. ^^

[eavane]

Up

[Sen Hime]

Alors, la première chose importante par rapport au menu accordéon que vous voulez, c'est que les explications sur le code sont là :
http://www.portalzine.de/index?/Horizontal_Accordion

Non seulement les explications, mais aussi un fichier à télécharger. En fait, il s'agit d'une librairie Javascript qui utilise la librairie JQuery, JQuery est déjà utilisée par Forumactif et donc inclue dans les pages de votre forum, mais pas cette librairie personnalisée se basant dessus. Il faut donc normalement télécharger le fichier disponible en fin de page (avant les commentaires et sous les explications).
Il s'agit d'une archive zip, qui contient la librairie et des exemples. Ce qui nous intéresse, ce sont les dossiers lib/ (qui contient les fichiers Javascript) et css/ (qui contient le css par défaut et des exemples de personnalisation).
Normalement, pour que le code donné puisse fonctionner sur votre forum, vous devez héberger sur internet ces fichiers, et les inclure sur votre forum. Cependant, sachant que les fichiers sont déjà hébergés sur le site qui distribue la librairie, je vais utiliser ici des URLs vers http://www.portalzine.de/ pour mes explications, mais je tiens à préciser qu'il est mieux de ne pas lier directement les fichiers de ce site et de ré-héberger les fichiers soi-même :)

Etape 1 : Inclure les fichiers
Le code pour inclure le fichier CSS d'apparence par défaut (à savoir que vous pouvez aussi plutôt choisir de copier son contenu dans votre CSS personnalisé, au risque de le surcharger, mais de façon à le personnaliser plus facilement) :

Code:

<link rel="stylesheet" type="text/css" href="http://www.portalzine.de/Horizontal_Accordion_Plugin_2/css/jquery.hrzAccordion.defaults.css">

Le code pour inclure les fichiers Javascript nécessaires au bon fonctionnement de la librairie (qui ne sont pas encore inclus dans Forumactif) :

Code:

<script type="text/javascript" src="http://www.portalzine.de/Horizontal_Accordion_Plugin_2/lib/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://www.portalzine.de/Horizontal_Accordion_Plugin_2/lib/jquery.hrzAccordion.js"></script>

Où placer ces codes ? La meilleure pratique, c'est d'inclure les fichiers css et javascript entre les balises "head" de la page, et donc, en modifiant le template "overall_header" et en le plaçant par exemple juste avant la balise "</head>", mais ça marchera aussi correctement si vous incluez ce code directement dans le message de la page d'accueil, donc si vous ne pouvez/souhaitez pas modifier les templates, ou par facilité, rien ne vous en empêche.

Etape 2 : Le code HTML
Je vais alléger le code au maximum, pour permettre de bien comprendre comment il est structuré. Je vous fais confiance pour remplir avec votre code HTML, cela dit en cas de problème on peut examiner page par page avec un exemple visuel de ce que vous voulez comme rendu, mais ça sort du cadre de l'accordéon en lui-même :)

Code:

<ul class="monaccordeon">
  <li><div class="handle"><img src="http://img146.imageshack.us/img146/6121/accueilu.png" /></div>
    <h3>Titre 1</h3>
    <p>Contenu 1</p>
  </li>

  <li><div class="handle"><img src="http://img146.imageshack.us/img146/6121/accueilu.png" /></div>
    <h3>Titre 2</h3>
    <p>Contenu 2</p>
 </li>

  <li><div class="handle"><img src="http://img146.imageshack.us/img146/6121/accueilu.png" /></div>
    <h3>Titre 3</h3>
    <p>Contenu 3</p>
 </li>

  <li><div class="handle"><img src="http://img146.imageshack.us/img146/6121/accueilu.png" /></div>
    <h3>Titre 4</h3>
    <p>Contenu 4</p>
 </li>
 
</ul>

Qu'en retenir ? Qu'il s'agit seulement d'une liste (<ul>) dont chaque élément "<li>" correspond au contenu d'une page. Ici mon contenu est chaque fois un titre <h3> et un paragraphe <p>, mais il est évidemment possible de choisir totalement autre chose. Une div avec l'attribut class "handle" permet de définir le contenu de la zone sur laquelle l'utilisateur passera la souris pour ouvrir la page (ici j'ai repris l'image que vous aviez donnée)

Etape 3 : Le code Javascript qui va appliquer l'effet d'accordéon sur le code HTML ci-dessus

Code:

<script type="text/javascript">
jQuery(document).ready(function() {
   jQuery(".monaccordeon").hrzAccordion({eventTrigger:"mouseover",openOnLoad:"1",handlePositionArray: "left,left,right,right,right"});
    
 });
</script>

jQuery(".monaccordeon") va rechercher l'élément <ul> auquel j'avais donné l'attribut class "monaccordeon" pour lui appliquer l'effet Javascript d'accordéon. On peut définir plusieurs options qui sont expliquées sur le site de la librairie, dans ce cas "OpenOnLoad" choisit la page ouverte au début, "eventTrigger" réglé sur "mouseover" permet l'effet d'ouverture au passage de la souris, et "handlePositionArray" définit la position, une fois leur contenu ouvert, des "handle", ces éléments sur lequel l'utilisateur passera la souris.

(Ce code peut être placé directement dans le message d'accueil comme le code HTML donné plus haut)

Etape 4 : Personnalisation du CSS pour obtenir l'affichage voulu
Il faut avouer que jusque là .... Ça marche mais c'est pas tout tout joli, il est donc possible de personnaliser l'affichage. Sachant qu'on dispose des "class" des éléments HTML qu'on a mis en place, on peut modifier absolument comme on veut. Voici un code qui se charge de remettre de bonnes tailles par rapport à l'image utilisée :

Code:

<style type="text/css">
ul.monaccordeon
{
height: 500px;
}

.handle
{
  width: 50px;
  margin: 0px;
  background-image: none;
}

ul.monaccordeon li
{
background-color: none;
}
</style>

(Ce code peut être placé directement dans le message d'accueil au dessus du HTML donné plus haut, ou bien dans la page CSS du forum, attention cependant, pour qu'il "écrase" les valeurs par défaut de la feuille css inclue au tout début, il doit intervenir par après)


Voilà pour une façon de faire, qui permet au moins de comprendre le fonctionnement du code. Cela dit, les images de "handle" pourraient par exemple être plutôt utilisée comme arrière-plan pour la class ".handle" au lieu d'être directement mises dans le HTML.
N'hésitez pas si vous avez des questions :)

[Anzu]

Bonsoir,

Je me permets de poster histoire de régler un point

Comme par hasard, vous avez 4 accordéons dont:

1. Message de bienvenue et membres du staff
2. Messages des membres
3. Royaumes et descriptions
4. Topsites et partenariat

Sur mon forum:

1. Message de bienvenue et membres du staff
2. Régions et descriptions
3. Rp des membres
4. Topsites et partenariat.

C'est fou comme c'est ressemblant ..
Simple Coïncidence ou .. ?

Je ne parle pas du principe du menu accordéon, mais de la disposition et du contenu. Je me serais doutée que ce menu allait apparaître partout à présent, mais ce serait bien de faire un effort au niveau du reste

[eavane]

moi ca ? lol ( doute fort, puisqu'elle n'a pas de menu accordéon encore lol )

et merci Sen Hime

Je vais m'y mettre voir si ca fonctionne

edit : Bon.. jai mis les codes et j'ai essayé de les travailler... et c'est vraiment pas ça que ca me donne et c'est... vraiment catastrophique lol

voici ce que ca donne sur mon forum teste lol : http://everentiis.forum-canada.net/index.htm

[Cever]

Est-ce que c'est quelque chose comme l'exemple 1 que tu veux ?

[eavane]

oui ^^

exactement cette exemple

[Sen Hime]

edit : Bon.. jai mis les codes et j'ai essayé de les travailler... et c'est vraiment pas ça que ca me donne et c'est... vraiment catastrophique lol

voici ce que ca donne sur mon forum teste lol : http://everentiis.forum-canada.net/index.htm

Le résultat est celui du HTML seul : il y a un problème soit avec le CSS, soit avec le Javascript (ou les deux).
Niveau CSS je ne retrouve effectivement pas sur votre forum les codes que j'ai donné, donc je vous conseille de vérifier que vous incluez bien le fichier avec le CSS par défaut (étape 1), c'est le CSS minimum pour que le menu fonctionne (c'est à dire qu'il puisse se cacher et s'ouvrir quand on passe la souris, après visuellement il y a des corrections à faire pour le rendre plus joli). Si le menu s'affiche comme s'il allait se cacher/ouvrir, ça signifiera que le CSS est bien mis. Par contre s'il ne s'ouvre pas au passage de la souris, c'est qu'il faudra aussi vérifier du côté du Javascript.

[Je préviens que je pourrai moins souvent passer sur le forum dans les prochains jours, donc si quelqu'un d'autre passe et peut continuer à aider, qu'il n'hésite pas]

[Lixyr]

Anzu ne t'inquiète pas, j'avais travaillé la page d'accueil avec Eavane il y a de cela quelques semaines déjà. Elle ne copie pas ton forum mais a juste fusionné ses cellules en quatre onglets. ^^

Bon bon je vais tester tout ça. *.* Merci Sen Hime pour l'explication en tout cas.

[eavane]

bon c'est toujours mieux... mais
ca donne quelque chose d'assez weird :S

--- > http://everentiis.forum-canada.net/index.htm

[tupac]

Bonsoir Eavane

Je me suis permis de tester le code et j'ai obtenus le même résulta que toi mais en retirant les images du code HTML le menu fonctionnait déjà mieux.

Code:

<ul class="monaccordeon">
  <li><div class="handle"><img src="image" /></div>
    <h3>Titre 1</h3>
    <p>Contenu 1</p>
  </li>
<li><div class="handle"><img src="image" /></div>
    <h3>Titre 2</h3>
    <p>Contenu 2</p>
 </li>
<li><div class="handle"><img src="image" /></div>
    <h3>Titre 3</h3>
    <p>Contenu 3</p>
 </li>
<li><div class="handle"><img src="image" /></div>
    <h3>Titre 4</h3>
    <p>Contenu 4</p>
 </li>
 </ul>

[eavane]

muahahahah merci...

mais il reste tout de même quelque chose de louche...

--- > http://everentiis.forum-canada.net/index.htm

si vous regarder comme il faut.. les liens enfin.. j'ai fait un screen shot XD

Spoiler:

je doute fort que c'est supposé être là :S

[tupac]

Effectivement c'est pas normal mais j'ai jeté un œil et tout est normal il n'y a pas ce problème.

Quel navigateur utilisez vous?

[eavane]

firefox

vous dites que vous ne le voyez pas ? O.o

[tupac]

J'ai fais un copier coller.

Spoiler:

[eavane]

ben voyons donc.... pourquoi ça fait ça avec moi

pourtant j'ai toujours utilisé firefox et j'ai jamais eu de problème :S

[tupac]

...et c'est apparu depuis que vous retirez les images ou pas?

[eavane]

hmm non je crois pas sec ma remettre l'autre code on va voir.. car je ne suis plus sure

EDIT : et bien oui... même avec l'autre code ça reste toujours là -_-

[Lixyr]

Je pense que ça vient du fait que tu es enregistrée et pas nous. Mais tu peux enlever cette partie si tu le souhaites, en modifiant un template.

[eavane]

oui c'est vrai, je ne le vois pas quand je suis déconnectée ^^

Seulement.. je ne sais pas quel partie enlever des templates pour ça.