Tuto - Barre Plus avec menus déroulants (3)
Déplacement du menu des modules du système Blog4ever pour gagner de la place sur "Barre Plus", création d'un menu à gauche du titre, toujours pour les versions payantes, utilisation la bordure gauche/droite pour y mettre le javascript et le code HTML.
Emplacement de ce menu
Création d'un "menu_h" qui remplacera la barre automatique du système, sous la forme d'une liste, que je place à gauche du titre, avec les liens sur les 4 modules : Accueil, Articles, Photos, Forum. Possibilité comme sur BRICABRAC de supprimer le lien Articles, dans le menu gauche il y a une catégorie pour accéder à la liste de "Tous les articles".
Il faut également désactiver la barre module comme dans le tuto précédent, dans le CSS, la règle #barre contiendra l'attribut display avec la valeur none
soit : #barre:{display:none;}
La "Barre Plus" ainsi bénéficiera de 4 emplacements supplémentaires, dans lesquels il sera possible de mettre des liens directs ou des menus déroulants.
Une démo de cette barre permet de visualiser le résultat, la création du menu modules "menu_h", son placement après diminution de la largeur de la partie titre et quelques modifications du CSS expliquées dans cette démo. Vous trouverez dans le fichier texte "Code CSS" appelé dans "Barre Plus" le code complet et également le "Code HTML" de la construction des 2 menus.
Voir la Démo 4
Voir absolument toutes les démos sur cette "Barre Plus" et les tutos évidemment, vous trouverez certainement celle qui vous conviendra le mieux.
Les liens ci-dessous vous permettrons d'afficher dans des PopUps le code utilisé pour installer la "Barre Plus", vous pouvez le copier et le modifier pour l'adapter au design de votre blog. En cas de problème pour afficher les PopUps, vous pouvez également récupérer tous les codes dans la démo.
Le "Script" à mettre dans la bordure gauche/droite de votre blog, entre des balises javascript(voir dans code HTML), il servira pour tous les menus déroulants de "Barre Plus".
Le "Code CSS" à mettre dans la bordure gauche/droite ou dans votre feuille de style "fichier CSS" de votre modèle graphique.
Je rappelle à cette occasion, pour ceux qui utilisent DizPerso, toutes modifications directes dans le CSS, n'étant pas reconnues par l'Assistant, seront automatiquement supprimées du fichier lors de la validation. Ce qui signifie, en cas de rajouts en direct dans le fichier CSS, vous ne pouvez plus utiliser l'Assistant, le DizPerso devient comme tout autre modèle graphique, les modifications se feront toujours en passant par le deuxième onglet.
Cependant, il y a toujours une solution, pas très simple, mais réalisable en étant méthodique. Vous copiez, les rajouts non reconnus par l'Assistant, dans un fichier texte, enregistré sur votre disque dur, ils pourront être remis dans le fichier CSS en les collant après validation des modifications faites avec l'Assistant.
De toutes façons je recommande, avant modifications, avec l'Assistant ou en direct, de faire une copie de sauvegarde de tout le code, en cas de problème ou de résultat insatisfaisant, pour revenir à une version antérieure, comme dans Windows les points de restauration.
Si vous avez fait cette sauvegarde, vous pouvez sans problème changer les valeurs des attributs des différentes parties du DizPerso, valider ces modifications, revenir sur "Modification en direct du CSS", pour y remmettre vos règles personnelles, en les copiant sur votre sauvegarde puis en les collant dans le nouveau fichier CSS.
Le "Code HTML" à mettre dans la bordure gauche/droite de votre blog, dans lequel vous pourrez remplacer les liens, mis en exemple, par les vôtres, modifier la disposition des options ou menus déroulants. Les modifications de style seront à faire dans le CSS.
Ce code source est présenté dans un fichier HTML, vous pouvez copier en sélectionnant la totalité ou partiellement, pour le modifier dans un éditeur de texte ou un logiciel spécifique.
Nouvelle présentation avec PopUps
J'ai opté pour cette présentation car elle a un énorme avantage, en sauvegardant ce code source sur votre disque dur en format texte vous pouvez y apporter directement vos modifications, puis en l'enregistrant avec l'extention .html à la place de .txt, quand vous lancerez ce fichier il s'ouvrira dans votre navigateur, vous pourrez ainsi visualiser le résultat de vos modifications.
J'aimerai avoir vos commentaires sur cette nouvelle présentation, car je vais maintenant, si possible, me servir de ce système pour mes tutoriels.
Modifications menus déroulants...J'ai donc modifié mon code Html et même rajouté à une régle en
CSS, le survol des nom de menus (dt:hover), de façons à donner la même apparence que les liens directs de cette barre.
Maintenant sur chaque titre, au survol de la souris, un commentaire s'affiche décrivant le contenu du menu, puis en cliquant le menu se développe. Si vous ne cliquez pas sur une option, dés que la souris sort du menu, il se réduit automatiquement.
Modification des codes CSS et HTML
Le code CSS
/* ********************************************** */
/* Rendre l'apparence identique des liens directs */
/* et des titres des menus déroulants cliquables. */
/* ============================================== */
#menubarre dt a:hover, #menubarre dt:hover
{
background: #eee;
color: #EE8320;
font: bold 10pt Trebuchet MS;
cursor:pointer;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
Le code HTML
La ligne de la balise <dt>, du code HTML pour un lien direct, ne change pas, la balise d'ouverture contient la commande javascript "onmouseover", activée au survol du lien par la souris et affiche le texte du lien selon les paramètres(couleur du fond et du texte etc...) de style CSS prévus au survol des liens. D'où le code HTML complet pour un lien direct :
<dl>
<dt onmouseover="javascript:montre_mb();">
<a href=" *** adresse du lien *** " title=" ***text commentaire *** "> ***texte du lien *** </a></dt>
</dl>
<dl>
La première ligne de la balise <dt>, du code HTML pour un menu déroulant change, la commande javascript est différente, on remplace "onmouseover" par "onclick", on y ajoute l'ordre d'afficher un commentaire au survol de la souris soit : title=" *** Texte du commentaire *** ". Le nom du menu s'affichera selon les paramètres(couleur du fond et du texte etc...) de style prévus au survol de la balise dt:hover( voir la modification du CSS). Cette nouvelle commande "onclick" oblige l'internaute à cliquer sur le nom du menu pour qu'il se développe.
D'où le code HTML suivant pour la première ligne d'un menu déroulant :
<dt onclick="javascript:montre_mb(' item du menu ');" title=" ***text commentaire *** "> *** nom du menu *** </dt>
Exemple d'un menu déroulant complet, qu'il faut bien sûr inséré dans les balises de votre menu barre, avec d'autres menus ou lien directs.
<dl>
<dt onclick="javascript:montre_mb('smenu2');" title="Tout l'environnement de Blog4ever à consulter sans modération.">Blog4ever</dt>
<dd id="smenu2" onmouseover="javascript:montre_mb('smenu2');" onmouseout="javascript:montre_mb('');">
<ul>
<li><a href="http://test.blog4ever.com/blog/forum-2.html" target="_blank" title="Blog4ever Forum d'aide" onclick="cache('smenu2');">Forum Aide</a></li>
<li><a href="https://www.blog4ever.com/faq/index.php" target="_blank" title="Blog4ever Aide FAQ" onclick="cache('smenu2');">Aide - FAQ</a></li>
<li><a href="https://www.blog4ever.com/annuaire.php" target="_blank" title="Blog4ever Annuaire des blogs" onclick="cache('smenu2');">Annuaire</a></li>
<li><a href="http://rapidechange.com/" target="_blank" title="Rapidechange Echange et Hébergement de divers fichiers" onclick="cache('smenu2');">Rapidechange</a></li>
</ul>
</dd>
</dl>
