Menu

Menu "en Accordéon" [Fermé]

- - Dernière réponse :  Synopsis - 27 mai 2010 à 11:57
Bonjour,

Je suis Webmaster, je cherche un programme/plugin me permettant de faire un menu "en accordéon", c'est un peu dur à expliquer, c'est un menu avec des titres horizontaux et quand on clique sur un des titres, les autres se décalent pour laisser place à du texte sous le titre selectionné. Vous me suivez ? Le tout dans la même page sans rechargement du reste de la page.
Au cas où, je travaille sur le logiciel Cariboost Premium.

Merci beaucoup d'avance pour vos réponses,
Merci aussi à votre site qui m'est très utile.
Cordialement, Fenril'Willem.
Afficher la suite 

12 réponses

Meilleure réponse
6
Merci
Bonjour,


Menus en accordéons :


Rapide : (Début de solutions) :


Menus déroulants verticaux :

http://css.alsacreations.com/modelesmenus/vd1.htm


Script de "Alsacréations" pour un menu en accordéon :

Forum "Alsacréations"

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>

Aides à la créations : (Tutoriels) :

Un menu déroulant en CSS et XHTML (horizontal et vertical) - Alsacréations

Plugin menu accordéon pour SPIP :

"le plugin jQuery Accordion", SIC, transformé en plugin pour SPIP

jQuery plugin : Accordion :

http://bassistance.de/jquery-plugins/jquery-plugin-accordion/

CITATION :

This plugin creates an accordion menu. It works with nested lists, definition lists, or just nested divs. Options are available to specify the structure, if necessary, the active element (to display at first) and to customize animations.

Google Traduction : (lien)

Ce plugin crée un menu d'accordéon. Cela fonctionne avec les listes nichées, la définition énumère, ou les divs nichés justes. Les options sont disponibles pour indiquer la structure, au besoin, l'élément actif (pour montrer au début) et pour adapter des animations aux besoins du client.


Merci...

Dire « Merci » 6

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 57878 internautes nous ont dit merci ce mois-ci

2
Merci
Bonjour, merci beaucoup pour votre réponse, j'ai réussi à faire quelque chose, mais par contre, ce que je cherche, ce n'est pas un menu deroulant, c'est le même principe mais il n'y a pas des sous menu en dessous, mais du texte.

Exemple :

- Presentation
- Texte de présentation
- Recrutement
- Texte de Recrtutement
- Explications avancées
- Texte des Explications avancées.

Au pire, je peux faire une ligne par sous menu, mais ce n'est pas très pratique. Merci beaucoup de toutes vos réponses.
2
Merci
Bonjour, merci pour ta réponse, je la comprends mieux que les autres, J'ai trouvé la mise en forme que je veux :
http://css.alsacreations.com/modelesmenus/vd1.htm
Mais, j'aimerais, plutôt que des liens un espaces de texte.

En fait, j'ai découvert ce programme sur un Mac, sur le logiciel RapidWeaver, le pup gien s'appelait "Accordion".

Je ne m'y connais pas beaucoup en informatique, mais je veux bien faire tout mon possible. Sur cette page, tu verras ce que j'ai reussi à faire, mais si possible j'aimerais faire tu texte à la place des ous-menus, ou si ça ne l'est pas, donner des liens aux sous-menus.
http://www.groupe-midgard.com/

Merci pour tout !
Dalida
Messages postés
6766
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
1306 -
ok !!!

on est arrivé à la même solution.
si tu mettre du texte à la place des liens il faut remplacer la liste <ul> par du texte <p>.
en clair, tu as ça :
				<ul>
					<li><a href="#">Midgard</a></li>
					<li><a href="#">Groupes</a></li>

					<li><a href="#">Conseil Suprême</a></li>
					<li><a href="#">Branches</a></li>
				</ul>

tu peux le remplacer par ça :
				<div>
					<p>un paragraphe de texte</p>
					<p>un autre paragraphe de texte</p>
					<p>un troisième paragraphe de texte</p>
				</div>

ou pour ajouter des liens :
				<ul>
					<li><a href="http://www.mapage1.com">Midgard</a></li>
					<li><a href="http://www.mapage2.com"">Groupes</a></li>

					<li><a href="http://www.mapage3.com"">Conseil Suprême</a></li>
					<li><a href="http://www.mapage4.com"">Branches</a></li>
				</ul>

j'ai bien compris ?
1
Merci
Bonjour, excelent, tu réponds à toutes mes questions en un post. Merci à tous et surtout à toi, j'ai parfaitement compris, je vais le tester. Merci encore !
Dalida
Messages postés
6766
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
1306 -
bonjour,

content de faire ton bonheur !
n'oublie pas de marquer le post comme résolu.
-;o)

bon dimanche à tous !!!
0
Merci
Bonjour, merci, pour toutes vos réponses, je n'ai pas compris le dernier message... Je pense que je vais prendre le premier code, mais savez vous comment programmer des liens dans le premier ?
Merci beaucoup pour toutes vos réponses,
Si vous avez quelque chose à proposer, n'hésitez pas.
0
Merci
Merci de ta réponse, j'ai bien étuidier le code Source de cette page, je n'ai trouvé que peut de liens et les codes ne marchent pas sur mon script. Merci quand même.
Dalida
Messages postés
6766
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
1306 -
salut,

j'ai suivi la discussion depuis le début et je comprends mal ce qui a été répondu.
comme tu n'as toujours pas eu de réponse qui te convienne je te propose la solution qui m'est venue à l'esprit en lisant ta question.

dans le premier exemple j'ai codé une liste qui correspond à ce que j'ai compris de ce que tu appelles un "menu en accordéon". il est mis en page avec CSS et ne réagit donc qu'au survol.

comme tu veux l'afficher au clic, j'ai ajouté un peu de JavaScript pour gérer le clic de l'utilisateur. je ne suis pas un spécialiste de JS (ça doit être mon deuxième script…) donc si quelqu'un de plus expérimenté lis ces lignes j'espère qu'il corrigera mes éventuelles erreurs. par ailleurs le script peut être amélioré, il faudrait qu'en affichant un sous-menu il masque le sous-menu déjà affiché.
si cela t'intéresse je veux bien que l'on essaie ensemble, j'adore essayer JavaScript que je n'utilise jamais pour moi.
christophe.therrien
Messages postés
102
Date d'inscription
lundi 25 mai 2009
Dernière intervention
9 juin 2010
> Dalida
Messages postés
6766
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
-
Bonjour Dalida,

Serait-ce possible de donner le code de ta page en css?

Merci
Christophe
Dalida
Messages postés
6766
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
1306 > christophe.therrien
Messages postés
102
Date d'inscription
lundi 25 mai 2009
Dernière intervention
9 juin 2010
-
salut,

le voilà !
suffisait de regarder dans le code source…
-;o)
<link rel="stylesheet" type="text/css" href="styles/menu_accordeon.css">
> Dalida
Messages postés
6766
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
-
Bonsoir
je sais que j'arrive un peu tard, mais je voudrais faire un menu en accordeon sur mon site et je n'y arrive pas.
j'ai copié le code que tu propose, ainsi que le css mais seul le menu en java (donc par clic) marche.
alors que justement c'est plutot le premier style de menu (survol) qui m'interesse.
je suis debutante en programmation alors je fais peut etre n'importe quoi... ^^
j'aimerais bien savoir ce qui ne marche pas.
as-tu des conseils ?

merci !

Nariel

PS : pour le menu en survol, il n'y a pas besoin de Java ?
0
Merci
Vous allez rire, je trouve pas le bouton éditer...
Dalida
Messages postés
6766
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
1306 -
tu dois avoir un bouton option en haut de ton message initial.
regarde cette capture.
> Dalida
Messages postés
6766
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
-
Bonjour,


Merci "Dalida" pour tes propositions de solutions possibles ! :-)


J'ai proposé des liens ; ça peut servir à d'autres ...

Concernant l'affichage de la source de la page Web proposée comme exemple, qui contient des "menus en accordéons", c'est plus simple de sauvegarder la page, soit "complètement", soit en ".mht" (sauvegarde page Web IE7) ; vous pouvez voir tous les fichiers séparéments et hors-ligne ; ou alors, sur une seule page de code en ".mht" (IE7) ; (et aussi hors-ligne;).

Le fonctionnement des "menus en accordéons" de la page Web proposée contient des balises de types tableaux. (Je pense aux sections verticales modifiables "facilements" en sections horizontales ou inversement). (Par ailleurs) ; La présentation d'une page ; (page Web proposée comme exemple), contenant des "menus en accordéons", peut être modifiée et adaptée.


... Pour la programmation, et donc des exemples de codes, c'est pas mon truc, du moins pour css java et co. (Nécessite une pratique quotidienne ou presque). (J'ai fait quelques trucs (pour moi, pour l'instant) dans d'autres domaines ; (programmation)). ...


Les boutons d'éditions d'articles sur "CCM FORUM" n'apparaissent que pour les personnes inscrites. Dommage et valable aussi pour moi-même.


Merci...
0
Merci
J'ai pas, je pense que c'est parce que je ne suis pas inscrit, j'ai juste ecrit comme ça, sans m'inscrire.
0
Merci
Salut... moi je suis bloqué depuis 3 jours !! :(

disons que j'utilise joomla CMS; aussi j'ai implémenté le plugin SBD Accordion Menu comme menu. Mais je voudrais faire un menu comme celui-ci : http://www.maureletprom.fr si quelqu'un peu me venir en aide. je serai ravis aussi de l'aider dans un autre domaine.

Merci

Dave
0
Merci
Menu accordéon : AJAX SPRY DW CS4
-1
Merci
Bonjour,


MENUS PAGES WEB (INTERNET) EN "ACCORDÉONS" :


Certaines pages de "FAQs" ou "D'AIDEs" de Microsoft, (de mémoire récente), fonctionnent, ou plutôt s'affichent avec ce type de procédé.

Un plus (+), mais pas toujours, situé en début de ligne indique, pour l'utilisateur ou plutôt le lecteur, un développement possible de texte sous la première ligne.

Les lignes du dessous sont décalées vers le bas et aucun téléchargement n'est effectué.

Certaines pages peuvent mêmes fonctionnés hors ligne.

[...] (Début suggestion rapide ; à améliorer)
((Pour le fonctionnement, "hors ligne" : suggestion : "sauvegarde au format ".mht" avec "Microsoft Windows Internet Explorer 7" par exemple ; notez que ce format est lisible, notamment, sous "Outlook Express 6" ; je pensais ce format trop "propriétaire", (Microsoft). Ajoutez l'extension ".eml", qui ne modifie rien ou presque, et glissez le fichier vers "Outlook Express 6")).
[...] (Fin suggestion rapide ; à améliorer)


LIENS ET EXEMPLES :

ON NE PEUT PAS TROUVER MEILLEUR PAGE :

 ;-) *1 NON *2 HUMM * COOL * NON MERCI * SAUF ERREURS * (EN PLUS)

 ((L'espace en début de ligne est un espace non sécable : code touche "Alt" + 0160))

Page contenant des menus en "accordéons" :

"Les programmes Windows Genuine Advantage"

        <div class="question">
          <table>
            <tr>
              <td class="quesAnsLabel"><b>Q.</b></td>
              <td><a href="javascript:toggleQuestion('sec1_ques3');">Est-il obligatoire d'activer et/ou d'enregistrer
        mes logiciels Microsoft ?</a></td>
            </tr>
          </table>
        </div>
        <div class="answer" id="sec1_ques3" style="display: none;">
          <table>
            <tr>
              <td class="quesAnsLabel"><b>R.</b></td>
              <td>
                <p>L'activation est obligatoire pour de nombreux
        utilisateurs de Microsoft Windows et Office s'ils
        souhaitent bénéficier de toutes les fonctions de leurs
        logiciels. Si l'activation de Windows est obligatoire, vous
        y êtes invité durant l'installation et devez procéder à
        l'activation dans les 30 jours suivant la première
        utilisation. Si l'activation d'Office est obligatoire, vous
        y êtes invité dès la première exécution d'une application
        Office. Vous devez procéder à l'activation avant
        50 utilisations (Office XP et ultérieur).
        L'enregistrement est conseillé mais n'est pas
        obligatoire.</p>
              </td>
            </tr>
          </table>
        </div>

Merci...
-1
Merci
Bonjour,


Le lien pour un exemple, "pratique", des menus en "accordéons", est le lien "Les programmes Windows Genuine Advantage".


Après avoir affiché la page Web, ("Les programmes Windows Genuine Advantage"), vous pouvez "Affiché la source" ; afin de pouvoir observer comment fonctionne la page ; page Web qui contient des menus en accordéons.

Suite à l'étude du fonctionnement de cette page, vous pourrez être mieux à même de savoir quoi choisir, et vous pouvez éventuellement demander des informations, sur comment faire pareil ; mais sans copier le code. (Je ne puis, moi-même, vous aidez sur ce point).

_________________
_________________
_________________


Les liens avec la mention "(EN PLUS)" à droite des six liens (6) sur la même ligne ne sont là que, "(EN PLUS)".

Ils illustrent la phrase : "ON NE PEUT PAS TROUVER MEILLEURE PAGE".

En général, certaines personnes n'apprécient pas Microsoft, et notamment son programme "Windows Genuine Advantage" ; "WGA".

L'aide et l'information, mêmes sérieuses, peuvent êtres agrémentées d'une touche d'humour. La manoeuvre n'a qu'un but d'illustration. (Non négatif).

_________________
_________________


((J'aime bien, et nous aimons bien, Microsoft, Linux, Mac, Etc.))

_________________



Merci...