PapyClic - Design

PapyClic - Design

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

Accueil  Menu latéral Précédente

 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.

 

 

 

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.

 

blocHTML-1.png blocHTML-2.png

 

blocHTML-3.png blocHTML-4.png

 

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

 

<script type="text/javascript">// <![CDATA[
$(document).ready(function() {

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

 

insertionScript.png

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.

  1. le CSS dans le CSS personnalisé
  2. le javascript dans "Bordures du blog", zone du bas
  3. 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)
      mn_onglets-capture-0.png


    • 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.
      mn_onglets-capture-1.png


    • ensuite cliquez sur "Mise à jour" pour passer le composeur en mode texte.
      mn_onglets-capture-2.png


 

 

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
    mn_onglets-capture-3.png
    mn_onglets-capture-4.png


  • des listes de liens  images
    mn_onglets-capture-5.png


  • des images animées
  • voire des vidéos

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

Aperçus dues onglets ...

mn_onglets-capture-6.png mn_onglets-capture-8.png
mn_onglets-capture-7.png

 

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 :
  1. cliquez sur  Nouveau bloc
  2. dans la liste déroulante "Choisissez un modèle de bloc" cliquez sur "Code HTML"
  3. vous mettez un intitulé ou pas, si vous avez besoin de préciser aux visiteurs ce qu'ils trouveront dans ce bloc.
  4. cliquez sur "Créer", puis sur la petite roue et "Modifier le code HTML"
  5. collez le code copié et cliquez sur "Enregistrer"
  6. 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

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 165 autres membres