Menu accordéon horizontal

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Résolu Menu accordéon horizontal

Message par Nially le Mar 9 Nov 2010 - 23:50

Bonjour Smile
Ca fait un moment que je cherche un tuto pour réaliser un message d'accueil de ce style sur mon forum:
http://www.dezinerfolio.com/wp-content/uploads/accordemo/05.html

Mais je n'ai toujours rien trouvé de pertinent.
Quelqu'un aurait-il un code ou un tuto à partager, s'il vous plaît?


Dernière édition par Nially le Mer 10 Nov 2010 - 12:52, édité 1 fois

Nially
****

Féminin
Messages : 277
Inscrit(e) le : 22/07/2006

http://patientszero.jdrforum.com/
Nially a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu accordéon horizontal

Message par Adam_sfp le Mar 9 Nov 2010 - 23:57

Bonsoir

En faisant une recherche via google Jquery accordion menu

Vous devriez trouver des exemples et tutos..
Cordialement.

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu accordéon horizontal

Message par Nially le Mer 10 Nov 2010 - 1:07

Merci pour la réponse Smile

Alors j'ai farfouillé avec ces mots-clé là, mais ils me renvoient à du javascript et j'ignore comment installer un fichier .js sur mon forum.
Sachant que j'ai hébergé ce fameux fichier .js sur Archive-Host.

Nially
****

Féminin
Messages : 277
Inscrit(e) le : 22/07/2006

http://patientszero.jdrforum.com/
Nially a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu accordéon horizontal

Message par Adam_sfp le Mer 10 Nov 2010 - 9:38

Bonjour

Vous pourriez donner un exemple ou lien du menu que vous avez choisi?
Tout dépend ou vous voulez mettre ce menu?
Vous pouvez faire des essais sur une page HTML et il faut certainement mettre le lien de votre fichier js après <head>...
Ou peut être passer par les templates..

Cordialement.


Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu accordéon horizontal

Message par Nially le Mer 10 Nov 2010 - 10:55

Bonjour Smile Alors pour l'exemple que j'ai donné dans mon 1er post, j'ai trouvé une archive à télécharger qui contient le code source.
http://www.dezinerfolio.com/2007/07/19/simple-javascript-accordions/

Mais je ne sais malheureusement pas comment installer ><

Nially
****

Féminin
Messages : 277
Inscrit(e) le : 22/07/2006

http://patientszero.jdrforum.com/
Nially a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu accordéon horizontal

Message par Adam_sfp le Mer 10 Nov 2010 - 11:58

Bonjour

Si on prend votre exemple il faut éditer par exemple basic html héberger le fichier JS accordianpack.js

Et ensuite mettre le lien dans la page html...
Ensuite à vous de faire les modifs et remplacer home about us download par ce que vous voulez ainsi que le texte etc...

Ce qui donne ceci normalement...à tester en page d'accueil..
Code:
<!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>Simple Javascript Accordions - by www.dezinerfolio.com</title>
<style type="text/css">
* {
   margin:0;
   padding:0;
   list-style:none;
}
body {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 11px;
   margin:10px;
}

#basic-accordian{
   border:5px solid #EEE;
   padding:5px;
   width:350px;
   
}

.accordion_headings{
   padding:5px;
   background:#99CC00;
   color:#FFFFFF;
   border:1px solid #FFF;
   cursor:pointer;
   font-weight:bold;
}

.accordion_headings:hover{
   background:#00CCFF;
}

.accordion_child{
   padding:15px;
   background:#EEE;
}

.header_highlight{
   background:#00CCFF;
}

</style>
<script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/37821634957680146/accordianpack.js"></script>
</head>
<body onload="new Accordian('basic-accordian',5,'header_highlight');">
<div id="basic-accordian" ><!--Parent of the Accordion-->


<!--Start of each accordion item-->
  <div id="test-header" class="accordion_headings header_highlight" >THIS IS ONLY A TEST</div><!--Heading of the accordion ( clicked to show n hide ) -->
 
  <!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->
 
  <div id="test-content"><!--DIV which show/hide on click of header-->
 
     <!--This DIV is for inline styling like padding...-->
    <div class="accordion_child">
    BLA BLA BLA BLABLA BLA BLA BLA BLA ETC.....
    </div>
   
  </div>
<!--End of each accordion item-->


<!--Start of each accordion item-->
  <div id="test1-header" class="accordion_headings" >About Us</div><!--Heading of the accordion ( clicked to show n hide ) -->
 
  <!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->
 
  <div id="test1-content"><!--DIV which show/hide on click of header-->
 
     <!--This DIV is for inline styling like padding...-->
    <div class="accordion_child">
       Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.
    </div>
   
  </div>
<!--End of each accordion item-->



<!--Start of each accordion item-->
  <div id="test2-header" class="accordion_headings" >Downloads</div><!--Heading of the accordion ( clicked to show n hide ) -->
 
  <!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->
 
  <div id="test2-content"><!--DIV which show/hide on click of header-->
 
     <!--This DIV is for inline styling like padding...-->
    <div class="accordion_child">
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ligula nisl, egestas non, pharetra vel, scelerisque accumsan, lacus. Proin nibh. Aenean dapibus. Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.<br />
    </div>
   
  </div>
<!--End of each accordion item-->







</div><!--End of accordion parent-->





</body>
</html>


Cordialement.

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu accordéon horizontal

Message par Nially le Mer 10 Nov 2010 - 12:31

Merci beaucoup, Adam!

J'ai encore deux petites questions, s'il vous plaît. Après, je vous laisse tranquille Razz

1/ J'aurais voulu recentrer mon forum qui, avec le code, s'est collé sur la gauche.
2/ Serait-il possible de positionner le menu accordéon à la droite du petit dragon au lieu d'en-dessous?

Spoiler:

Nially
****

Féminin
Messages : 277
Inscrit(e) le : 22/07/2006

http://patientszero.jdrforum.com/
Nially a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Menu accordéon horizontal

Message par Adam_sfp le Mer 10 Nov 2010 - 12:38

Bonjour

Aie il doit y avoir une "boulette" quelque part....
IL faut déjà trouver pourquoi le forum se décale et on s'occupera du petit dragon ensuite... Wink

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu accordéon horizontal

Message par Nially le Mer 10 Nov 2010 - 12:40

Pour le petit dragon, j'ai pensé à un tableau à 2 colonnes et ai réussi à placer le code au bon endroit. Smile
Par contre je ne trouve pas d'où vient le décalage... :s

EDIT/ Sous IE ça marche correctement mais pas sous Firefox :s

EDIT 2/ J'ai trouvé d'où venait le problème (margin).

Merci infiniment pour votre aide!

Nially
****

Féminin
Messages : 277
Inscrit(e) le : 22/07/2006

http://patientszero.jdrforum.com/
Nially a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu accordéon horizontal

Message par Adam_sfp le Mer 10 Nov 2010 - 12:54

thumright

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum