Générateur - Menu onglets dans menu latéral - PapyClic

Générateur - Menu onglets dans menu latéral

GENERATEUR Menu à Onglets

pour le menu latéral

https://static.blog4ever.com/2012/06/704535/artfichier_704535_2923005_201310251254332.png

Ce générateur crée un système de menu avec onglets pour réduire la longueur du
menu latéral, car chaque onglet peut contenir, un menu ou diverses informations regroupées.

Ce système fonctionne sur les versions payantes ayant la fonction avancée "Menu latéral" ou utilisant le système myDesign.
En principe compatible avec tous les principaux navigateurs dans leur dernière version.

La seule information à fournir est le nombre d'onglets que vous pensez avoir besoin. Vu la largeur réduite, 4 sera certainement un maximum, selon le texte de chaque onglet, pour voir la présentation optez pour 4, vous modifierez par la suite.

Nombre d'onglets :

Ci-dessous le code HTML.

Ce code HTML copié est à coller dans un bloc HTML du menu latéral.

Espace de gestion → VOTRE BLOG → Fonctions avancées → Menu latéral.

Si votre espace de gestion est ouvert, cliquez sur : lien

Ci-dessous le CSS.

Le code ci-dessus est à copier et à coller dans la zone de personnalisation du CSS de l'assistant du DizPerso.

Espace de gestion → VOTRE BLOG → Design du blog → CSS/HTML → CSS personnalisé.

Si votre espace de gestion est ouvert, cliquez sur : lien

N'oubliez pas, après de cliquer sur "Appliquer" en bas de la colonne.

Avant de copier les codes vous pouvez en cliquant sur le bouton ci-dessous, afficherz un aperçu des codes générés et ainsi vous rendre compte de la présentation et du fonctionnement.

Si vous souhaitez personnaliser les couleurs, vous cliquez sur les codes couleurs, vous pourrez choisir sur un ColorPicker.

La palette de 5 couleurs, ci-dessous, permet de gérer toute la présentation du bloc.
Dans le tableau vous avez les indications où seront appliquées les couleurs. Si en affichant l'exemple, le résultat n'est pas bon, vous changez les codes jusqu'à obtention de ce que vous souhaitez.

Cette opération met le code CSS automatiquement à jour, vous n'avez rien de plus à faire.

Couleur du fond		Fond onglets au survol et Texte titre	Couleur des textes
Bloc	Onglets	Fond onglets au survol et Texte titre	Onglet survol/actif et Contenu	Onglets

Pour vous aider, dans la liste ci-dessus, vous trouverez quelques exemples, les codes couleur seront changés et vous pourrez voir le résultat en cliquant sur "Afficher exemple". Là également le code CSS est mis à jour automatiquement.

Les exemples s'ouvrent dans un nouvel onglet, vous pouvez donc conserver plusieurs exemples, pour faire votre choix plus tard. En plus vous pouvez récupérer les codes HTML et CSS.

Pour faire fonctionner le système des onglets, il faut le script ci-dessous.

// menu onglets dans menu latéral
$("#mntab_menu-1 .tab_content").hide();
$("#mntab_menu-1 ul.tabs li:first").addClass("active").show();
$("#mntab_menu-1 .tab_content:first").show();

// Evènement clic
$("#mntab_menu-1 ul.tabs li").click(function() {
$("#mntab_menu-1 ul.tabs li").removeClass("active");
$(this).addClass("active");
$("#mntab_menu-1 .tab_content").hide();
var activeTab_1 = $(this).find("a").attr("href");
$(activeTab_1).fadeIn();
return false;
});

});
// ]]></script>

Ce code est à coller dans la bordure basse de votre blog

Espace de gestion → VOTRE BLOG → Fonctions avancées → Bordures de page.

Ce script sera actif uniquement sur le blog. Ce qui vous permet de pouvoir saisir le contenu dans chaque bloc de l'article.

Si votre espace de gestion est ouvert, cliquez sur : lien

Pour essayer ce menu avant de le mettre dans le menu latéral, vous le testez dans un nouvel article. Dans un premier temps copiez et collez les codes comme indiqué dans ce tutoriel.

le CSS dans le CSS personnalisé
le javascript dans "Bordures du blog", zone du bas
sélectionnez et copiez le code HTM (CTRL+c) :

rendez vous dans la gestion de votre blog,
ajoutez un nouvel article
ouvrez le composeur en mode HTML (clic sur Html dans le menu)
collez le code copié dans la fenêtre "Editeur de source HTML".
je vous conseille de modifier les textes des onglets, si vous les connaissez déjà, car c'est plus facile.
ensuite cliquez sur "Mise à jour" pour passer le composeur en mode texte.

Dans cet article vous allez pouvoir insérer le contenu de tous les onglets, en utilisant le menu du composeur.

des listes de liens texte
des listes de liens images
des images animées
voire des vidéos

En respectant bien sûr la largeur du menu latéral.

Aperçus dues onglets ...

Vous sauvegardez cet article dans "Brouillons" en cliquant sur "Sauvegarder" en dessous du composeur.
Cet article "Test" sera un outil pour modifier le bloc quand vous voudrez le mettre à jour. En effet vous pourrez en utilisant le composeur, rajouter ou modifier le contenu de chaque onglet, comme vous avez fait pour la création. Puis le copier et le coller à la place de celui en place dans le menu latéral.

Pour copier le code généré par le composeur, vous repassez en mode HTML, puis vous vous rendez dans :

>>> VOTRE BLOG >>> Fonctions avancées >>> Menu latéral :

cliquez sur Nouveau bloc
dans la liste déroulante "Choisissez un modèle de bloc" cliquez sur "Code HTML"
vous mettez un intitulé ou pas, si vous avez besoin de préciser aux visiteurs ce qu'ils trouveront dans ce bloc.
cliquez sur "Créer", puis sur la petite roue et "Modifier le code HTML"
collez le code copié et cliquez sur "Enregistrer"
Il reste à positionner ce bloc en cliquant sur la roue et sur "Monter"

Voir quelques captures cliquez >>> ici

ATTENTION, si vous voulez mettre plusieurs blocs avec onglets, dans le menu latéral, il y a quelques modifications à faire, demandez moi sur le forum dans "Vos tests".

Si cet article vous a été utile, un petit J'aime me fera plaisir.

N'hésitez pas un mettre un commentaire, si vous avez apprécié cet article, mais également si vous n'êtes pas pleinement satisfait.
Pour plus d'explications poster sur le forum

Haut Précédente

24/02/2014

6 J'aime

A découvrir aussi

Retour aux articles de la catégorie Menu latéral -

⨯

Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 167 autres membres