MENU style KWIX (accordéon)

[Margate]

Bonjour à tous

Savez vous comment réaliser un menu dans WA identique à celui de KWIX dans Rapidweaver ? comme un accordéon avec des icônes ?

bises
Margate
http://www.yourhead.com

[Margate]

l' hyperlien en bas correspond à l'adresse de la boite qui a conçu le menu KWIX

[Babyl]

Bonsoir Margate
Je ne connais pas mais super comme effet.
J'ai donc cherché à en savoir plus et j'ai trouvé 2 liens qui pourraient peut-être t'intéresser.
Pour le moment je manque de temps, mais dès que possible je testerai.
1 lien ici
et l'autre là
Peut-être que les amis connaissent.

[james]

Bonsoir Margate,

Le site : http://www.cssplay.co.uk/ est rempli de centaines de choses toutes plus formidables les unes que les autres
(déja publié sur ce forum ... mais où ?).
C'est de l'exploitration de CSS à fond, comme on peut s'en douter d'après le titre.

En particulier pour les menus "sliding" :
http://www.cssplay.co.uk/search.html?cx=partner-pub-6651950180071236%3Achrtwm-4ria&cof=FORID%3A10&ie=UTF-8&q=sliding+list#1125



testable en vrai grandeur :
http://www.cssplay.co.uk/menu/click_gallery#nogo

Et je suis sûr qu'en fouillant on en trouverait plein d'autres.

Les solutions basées sur les librairies JQuery ou Motools, comme t'a conseillé Babyl, ont l'avantage d'être très puissantes,
d'incorporer les toutes dernières trouvailles technologiques et d'être, parait il, facile à mettre en oeuvre.

Mais au fait, à propos de KWIX, il y a aussi la solution de l'acheter puisque ce n'est pas cher du tout !
moins 12 USD, donc, à vérifier, moins de 10 € ... ?



Cordialement
.

[Margate]

merci pour toutes ces pistes très intéressantes , je m'en vais les explorer.
Quant à acheter KWIX, je veux bien mais c'est un plugin pour rapidweaver et non pour WA. Et j'utilise WA...
Je vous tiens au courant de mes explorations!

[Margate]

Babyl,
Pour le site ccsplay, très complet, comment insére t-on un code sur WA. J'ai testé via un code html mais j'ai uniquement le code qui s'inscris .... AS tu déjà tenté des insertions ?

[Babyl]

Dans cssplay que James nous indique, il y a beaucoup d'exemples.
As-tu choisi celui que James a mis en photo ?
et peux tu me donner le ou les codes que tu as insérés.
car il doit manquer quelque chose, très certainement des balises.

[Margate]

je n'ai pas essayé ce code car je ne l'ai pas trouvé !
J'ai essayé celui de Gularu mais sans aller jusqu'au bout càd insére le Prototoype.. Car ça m'a l'air compliqué et avant d me lancer j'aurais aimé être sûre que ça fonctionne avec WA...

[Babyl]

Oui le code gularu est faisable avec WA
Mais avec quelques modifs
Tout d'abord envoyer à la racine du site le répertoire "js" contenant les 3 fichiers .js

il faudra mettre ce code dans le head de la page (clique droit sur le fond de la page > Propriété de la page > Avancé)

Code:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
<script type="text/javascript" src="js/accordion.js"></script>

et ensuite placer toujours dans le head de la page
le css, c'est à dire ce code

Code:

<style type="text/css">
#container-selector {
   height: 600px;
   width: 750px;
   margin: 0 auto;
   position:relative;
   top:100px;
}

.accordion_toggle {
   display: block;
   height: 40px;
   width: 730px;
   background: #3469A0;
   padding: 0 10px 0 10px;
   line-height: 36px;
   color: #ffffff;
   font-weight: normal;
   text-decoration: none;
   outline: none;
   font-size:100%;
   border-bottom: 1px solid #cde99f;
   cursor: pointer;
   margin: 0 0 0 0;
   font-family:Verdana,Arial;
}

.accordion_toggle_active {
   background: #A53A47;
   color: #ffffff;
   border-bottom: 1px solid #f68263;
}

.accordion_content {
   background-color: #ffffff;
   color: #444444;
   overflow: hidden;
}
   
   .accordion_content h2 {
      margin: 15px 0 5px 10px;
      color: #0099FF;
   }
   
   .accordion_content p {
      line-height: 150%;
      padding: 5px 10px 15px 10px;
   }
</style>

c'est dans ce css que l'on peut modifier le style du menu

Ensuite sur la page WA dans une zone de code, le code du prototype

Code:

<script type="text/javascript">
   Event.observe(window, 'load', function() {
      var options = "resizeSpeed : 8, classNames : {toggle : 'accordion_toggle',toggleActive : 'accordion_toggle_active',content : 'accordion_content'},defaultSize : {height : null, width : null},direction : 'vertical', onEvent : 'click'";
      new accordion('container-selector', options);
   });
</script>

et pour finir dans une zone de code sur la page de WA et l'emplacement désiré le code du menu accordéon

Code:

<div id="content">
   <div id="container-selector">
      <!-- BLOCK -->
      <h2 class="accordion_toggle">Accueil</h2>
      <div class="accordion_content">Accueil_content</div>
      <!-- Fin BLOCK -->
      <h2 class="accordion_toggle">A propos</h2>
      <div class="accordion_content">A propos_content</div>
      <h2 class="accordion_toggle">Contact</h2>
      <div class="accordion_content">Contact_content</div>
   </div>
</div> <!-- Fin content -->

test ici valide au W3C

[Margate]

c'est presque ça, le menu s'affiche sauf qu'il ne bouge pas ! mais j'ai compris le concept .. en théorie !

[Babyl]

as-tu bien placé les fichiers js, ils doivent avoir cette adresses :
tonsite/js/fichier.js

[Babyl]

Je reposte au cas ou tu aurais déjà lu

j'avais oublié, il faut publier pour que ça fonctionne, ça ne peut pas marcher en teste.

[Margate]

le dossier JS doit être à la racine du site c'est à dire dans le dossier www ?
Sinon dans le même genre, sais tu comment réaliser un menu onglet animés : des boutons alignés horizontalement (entrées de menu) et lorsqu'on clique dessus, l'onglet se baisse ou s'allonge ? tu vois ?
Est ce à faire en flash ou en css ?

[Babyl]

la racine du site c'est là ou se trouvent les pages de ton site, si ton site est dans www tu dois mettre le répertoire js dans www
Pour les onglets animés, je n'ai rien sous le coude, si je trouve quelque chose je te ferai signe.