Menu accordéon horizontal

2 participants

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

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

  • 0

Résolu Menu accordéon horizontal

Message par Nially 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

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

Adam_sfp
Membre actif

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

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu accordéon horizontal

Message par Nially 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

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

Adam_sfp
Membre actif

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

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu accordéon horizontal

Message par Nially 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

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

Adam_sfp
Membre actif

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

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu accordéon horizontal

Message par Nially 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

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

Adam_sfp
Membre actif

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

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu accordéon horizontal

Message par Nially 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

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 Mer 10 Nov 2010 - 12:54

thumright
Adam_sfp

Adam_sfp
Membre actif

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

http://antonyadam.kanak.fr
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

- Sujets similaires

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

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