[Résolu] Menu (Onglets ou sections déroulantes) dans une seule page

Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5
#1
Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: !1.11.x
#~ Url du site : http://www.benhenda.com
#~ Hébergeur / Soft : OVH
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.11.9
#~ Installed Modules:
#~ CMSMailer: 5.2.2
#~ CMSPrinting: 1.0.5
#~ FileManager: 1.4.3
#~ MenuManager: 1.8.6
#~ MicroTiny: 1.2.5
#~ ModuleManager: 1.5.5
#~ News: 2.14.1
#~ Search: 1.7.11
#~ ThemeManager: 1.1.8
#~ TinyMCE: 2.9.12
#~ CMSDumper: 1.3
#~ MysqlDump: 1.3.1
#~ CGSimpleSmarty: 1.7.4
#~ CGExtensions: 1.38.8
#~ CGBlog: 1.12.6
#~ FormBuilder: 0.8
#~ Captcha: 0.5.0
#~ TagCloud: 1.0.2
#~ Disqus: 2.0
#~ CGFeedMaker: 1.0.17
#~ HitCounter: 1.1
#~ Gbook: 2.0
#~ CGFeedback: 1.6.5
#~ ThemesMadeSimple: 0.3
#~ JQueryTools: 1.2.6
#~ Config Information:
#~ php_memory_limit:
#~ process_whole_template:
#~ max_upload_size: 64000000
#~ url_rewriting: none
#~ page_extension:
#~ query_var: page
#~ image_manipulation_prog: GD
#~ auto_alias_content: true
#~ locale: fr_FR.utf-8
#~ default_encoding: utf-8
#~ admin_encoding: utf-8
#~ set_names: true
#~ Php Information:
#~ phpversion: 5.3.29
#~ md5_function: On (Vrai)
#~ gd_version: 2
#~ tempnam_function: On (Vrai)
#~ magic_quotes_runtime: Off (Faux)
#~ E_STRICT: 0
#~ E_DEPRECATED: 8192
#~ memory_limit: 128M
#~ max_execution_time: 120
#~ output_buffering: 4096
#~ safe_mode: Off (Faux)
#~ file_uploads: On (Vrai)
#~ post_max_size: 64M
#~ upload_max_filesize: 64M
#~ session_save_path: /tmp (0700)
#~ session_use_cookies: On (Vrai)
#~ xml_function: On (Vrai)
#~ xmlreader_class: On (Vrai)
#~ Server Information:
#~ Server Api: cgi-fcgi
#~ Server Db Type: MySQL (mysqli)
#~ Server Db Version: 5.5.55
#~ Server Db Grants: Impossible de trouver un privilège "GRANT ALL". Cela peut signifier que vous pourriez avoir des problèmes pour installer ou retirer des modules, ou encore l 'ajout et la suppression d'éléments, y compris les pages.
#~ Server Time Diff: Aucune différence de date du système de fichiers trouvées
#~ ----------------------------------------------
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~


Bonjour à tous

C'est certainement une question qui a déjà été traitée, mais après multi recherches je n'arrive pas à trouver un fil de discussion qui m'éclairerait sur le sujet.

Il s'agit tout simplement de savoir comment créer un menu au sein d'une seule page pour afficher ses différentes rubriques. Pour préciser, j'ai une liste publications que j'affiche par catégorie. J'utilise pour l'instant la solution des ancres, mais avec la longueur de la page qui s'accroit au fil du temps, celle-ci est automatiquement tronquée à la fin [http://www.benhenda.com/site/index.php?p...blications].

Je prévois donc segmenter le contenu de la page soit en créant des onglets horizontaux pour y inclure une catégorie de publications par onglet, soit créer des sous-titre dynamiques (par catégorie) qui s'ouvrent (comme un rideau vertical) dans la même page quand on clique dessus (sans cacher les autres sous-titres).

J'espère m'être bien exprimé.

Merci d'avance

Ben
#1
Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: !1.11.x
#~ Url du site : http://www.benhenda.com
#~ Hébergeur / Soft : OVH
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.11.9
#~ Installed Modules:
#~ CMSMailer: 5.2.2
#~ CMSPrinting: 1.0.5
#~ FileManager: 1.4.3
#~ MenuManager: 1.8.6
#~ MicroTiny: 1.2.5
#~ ModuleManager: 1.5.5
#~ News: 2.14.1
#~ Search: 1.7.11
#~ ThemeManager: 1.1.8
#~ TinyMCE: 2.9.12
#~ CMSDumper: 1.3
#~ MysqlDump: 1.3.1
#~ CGSimpleSmarty: 1.7.4
#~ CGExtensions: 1.38.8
#~ CGBlog: 1.12.6
#~ FormBuilder: 0.8
#~ Captcha: 0.5.0
#~ TagCloud: 1.0.2
#~ Disqus: 2.0
#~ CGFeedMaker: 1.0.17
#~ HitCounter: 1.1
#~ Gbook: 2.0
#~ CGFeedback: 1.6.5
#~ ThemesMadeSimple: 0.3
#~ JQueryTools: 1.2.6
#~ Config Information:
#~ php_memory_limit:
#~ process_whole_template:
#~ max_upload_size: 64000000
#~ url_rewriting: none
#~ page_extension:
#~ query_var: page
#~ image_manipulation_prog: GD
#~ auto_alias_content: true
#~ locale: fr_FR.utf-8
#~ default_encoding: utf-8
#~ admin_encoding: utf-8
#~ set_names: true
#~ Php Information:
#~ phpversion: 5.3.29
#~ md5_function: On (Vrai)
#~ gd_version: 2
#~ tempnam_function: On (Vrai)
#~ magic_quotes_runtime: Off (Faux)
#~ E_STRICT: 0
#~ E_DEPRECATED: 8192
#~ memory_limit: 128M
#~ max_execution_time: 120
#~ output_buffering: 4096
#~ safe_mode: Off (Faux)
#~ file_uploads: On (Vrai)
#~ post_max_size: 64M
#~ upload_max_filesize: 64M
#~ session_save_path: /tmp (0700)
#~ session_use_cookies: On (Vrai)
#~ xml_function: On (Vrai)
#~ xmlreader_class: On (Vrai)
#~ Server Information:
#~ Server Api: cgi-fcgi
#~ Server Db Type: MySQL (mysqli)
#~ Server Db Version: 5.5.55
#~ Server Db Grants: Impossible de trouver un privilège "GRANT ALL". Cela peut signifier que vous pourriez avoir des problèmes pour installer ou retirer des modules, ou encore l 'ajout et la suppression d'éléments, y compris les pages.
#~ Server Time Diff: Aucune différence de date du système de fichiers trouvées
#~ ----------------------------------------------
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~


Bonjour à tous

C'est certainement une question qui a déjà été traitée, mais après multi recherches je n'arrive pas à trouver un fil de discussion qui m'éclairerait sur le sujet.

Il s'agit tout simplement de savoir comment créer un menu au sein d'une seule page pour afficher ses différentes rubriques. Pour préciser, j'ai une liste publications que j'affiche par catégorie. J'utilise pour l'instant la solution des ancres, mais avec la longueur de la page qui s'accroit au fil du temps, celle-ci est automatiquement tronquée à la fin [http://www.benhenda.com/site/index.php?p...blications].

Je prévois donc segmenter le contenu de la page soit en créant des onglets horizontaux pour y inclure une catégorie de publications par onglet, soit créer des sous-titre dynamiques (par catégorie) qui s'ouvrent (comme un rideau vertical) dans la même page quand on clique dessus (sans cacher les autres sous-titres).

J'espère m'être bien exprimé.

Merci d'avance

Ben
#2
Bonjour,

Beaucoup de solutions s'offrent à toi avec l'aide de différentes technologies.
JQuery UI en est une :
Onglets
ou encore menus dépliants (accordéon)
#2
Bonjour,

Beaucoup de solutions s'offrent à toi avec l'aide de différentes technologies.
JQuery UI en est une :
Onglets
ou encore menus dépliants (accordéon)
#3
Les frameworks CSS peuvent avoir leurs propres solutions, par exemple Accordion / Tabs chez Foundation : https://foundation.zurb.com/sites/docs/accordion.html
#3
Les frameworks CSS peuvent avoir leurs propres solutions, par exemple Accordion / Tabs chez Foundation : https://foundation.zurb.com/sites/docs/accordion.html
#4
Merci beaucoup pour vos réactions, avec mes meilleurs voeux pour 2018.

Je profite de vos réponses pour vous demander de m'éclairer sur un autre point qui peut m'être utile pour d'autres situations.

Dans les liens proposés notamment par Jean le chauve, le code source (html) proposé contient la partie méta de l'entête (<head>) qui ne peut aller dans les containers d'une page CMSMS (car supprimés automatiquement dès qu'on passe en mode WYSIWYG).

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Accordion - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#accordion" ).accordion();
} );
</script>
</head>
<body>

<div> ...


Pourtant cette partie contient les liens vers les feuilles de style et les sources des scripts à utiliser. Ma question est où faudrait-il ajouter cette partie méta dans CMSMS pour qu'elle soit prise en compte dans l’exécution du module Jquery (ou tout autre module) ?

Merci d'avance

Ben
#4
Merci beaucoup pour vos réactions, avec mes meilleurs voeux pour 2018.

Je profite de vos réponses pour vous demander de m'éclairer sur un autre point qui peut m'être utile pour d'autres situations.

Dans les liens proposés notamment par Jean le chauve, le code source (html) proposé contient la partie méta de l'entête (<head>) qui ne peut aller dans les containers d'une page CMSMS (car supprimés automatiquement dès qu'on passe en mode WYSIWYG).

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Accordion - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#accordion" ).accordion();
} );
</script>
</head>
<body>

<div> ...


Pourtant cette partie contient les liens vers les feuilles de style et les sources des scripts à utiliser. Ma question est où faudrait-il ajouter cette partie méta dans CMSMS pour qu'elle soit prise en compte dans l’exécution du module Jquery (ou tout autre module) ?

Merci d'avance

Ben
#5
Rebonjour

Je crois avoir trouvé la réponse à ma question précédente en fouinant dans l'historique. Un container spécifique aux métadonnées se trouve dans l'onglet des options d'une page. Il permet d'y saisir les méta y compris les sources Javascripts. Ca a bien marché pour ma question sur les Tabs et les menus en accordéon.

Merci beaucoup pour votre réactivité

Ben
#5
Rebonjour

Je crois avoir trouvé la réponse à ma question précédente en fouinant dans l'historique. Un container spécifique aux métadonnées se trouve dans l'onglet des options d'une page. Il permet d'y saisir les méta y compris les sources Javascripts. Ca a bien marché pour ma question sur les Tabs et les menus en accordéon.

Merci beaucoup pour votre réactivité

Ben
#6
Il y a plusieurs emplacements, selon les besoins :

Le gabarit de page en lui-même : si tous les entêtes sont les mêmes quelle que soit la page, c'est la place à privilégier, en utilisant bien sûr les balises qui gèrent en dynamique le title / meta description etc... de chaque page
Les metadonnées globales dans les préférences du CMS
Les métadonnées de chaque page dans le gestionnaire de contenus : à utiliser si les données sont trop spécifiques par page

Bonne continuation !
#6
Il y a plusieurs emplacements, selon les besoins :

Le gabarit de page en lui-même : si tous les entêtes sont les mêmes quelle que soit la page, c'est la place à privilégier, en utilisant bien sûr les balises qui gèrent en dynamique le title / meta description etc... de chaque page
Les metadonnées globales dans les préférences du CMS
Les métadonnées de chaque page dans le gestionnaire de contenus : à utiliser si les données sont trop spécifiques par page

Bonne continuation !


Atteindre :


Utilisateur(s) parcourant ce sujet : 1 visiteur(s)