Tutoriel - Barre Plus Menu
Barre plus
Barre plus
Suite de mon projet de modifications de BRIC A BRAC, création d'une barre supplémentaire, à côté de la barre des modules du système Blog4ever. Cette "Barre Plus" double le nombre d'options, mais il faudra être en version payante, pour pouvoir utiliser la bordure gauche/droite.
Préparation de l'emplacement de ce menu
La barre créée par le système automatique, contenant les 4 modules de Blog4ever, n'utilise pas toute la largeur du "Conteneur" ou "Cadre", dans les modèles ou DizPerso.
Donc nous avons la possibilité d'employer l'espace restant pour créer une seconde barre identique, voire différente, l'essentiel est de rester dans la limite de ce pseudo ruban.
Au moment où j'écris cet article, j'ai déjà supprimé la barre menu et déplacé le menu des modules dans un bloc positionné à la gauche de ma bannière. J'ai supprimé également l'option "Articles" qui faisait double emploi avec l'option "Tous les articles" du menu de gauche. Tout ceci pour éventuellement par la suite créer une nouvelle barre personnalisée.
Pour faire au plus simple, je choisis dans un premier temps, de composer une barre du même style que celle du modèle de base comme le DizPerso. Dans la démo que j'ai mise en ligne vous constaterez, que j'ai réduit au maximun la largeur de la barre, pour contenir les 4 options du menu, sa position complétement à gauche, pour libérer à droite de l'espace pour ma "Barre Plus".
Création du bloc Barre Plus
Les dimensions de ce "DIV" sont à calculer selon la place restante pour la largeur, la hauteur sera identique à celle de la barre, pour le placement l'attribut "position" a comme valeur "absolute" en mettant les valeurs adéquates aux attributs "top" et "left".
Voir dans la "Démo 1" les modifications et ajouts de la feuille de style et le code HTML composant un exemple de menu.
A votre disposition une "démo" exemple d'installation de ce menu "Barre Plus" avec détails et surtout ,je pense, plus visuelle, avec également les liens sur des fichiers contenant le code CSS et le code HTML les composant....
Démo 1 et le code source complet de cette démo à télécharger
Code HTML de ma Barre Plus sur la démo 1...
<!-- ************************* -->
<!-- Création de Barre Plus -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div id="barre_plus">
<ul>
<li><a href="http://sd-1.archive-host.com/membres/up/183822970129391303/Demos_sources/barreplus_CSS_1demo.txt" target="_blank" title="Ouvre le fichier contenant les modifications du CSS.">Code CSS</a></li>
<li><a href="http://sd-1.archive-host.com/membres/up/183822970129391303/Demos_sources/barreplus_HTML_1demo_CodeSource.htm" target="_blank" title="Ouvre le fichier contenant les modifications du HTML.">Code HTML</a></li>
<li><a href="http://bricabrac.blog4ever.com/blog/index-490.html" target="_blank" title="Ouvre BRICABRAC.">BRICABRAC</a></li>
<li><a href="http://test.blog4ever.com/blog/forum-2.html" target="_blank" title="Ouvre le forum aide de Blog4ever.">Forum d'aide</a></li>
<li><a href="http://www.blog4ever.com/faq/index.php" target="_blank" title="Ouvre la FAQ Blog4ever.">Aide Blog4ever</a></li>
</ul>
</div>
Code CSS de ma Barre Plus sur la démo 1...
/* ========================================
Ajout ou modifications pour Barre Plus
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* nouvelles valeurs de la barre origine */
#barre
{
width : 417px;
height : 30px;
margin-top : 5px;
border: 0px solid #000;
}
/* règle ajoutée pour créer Barre Plus */
#barre_plus
{
position: absolute;
top:89px;
left:422px;
width : 550px;
height : 30px;
border: 0px solid #000;
}
/* aux règles suivantes ajout de ID #barre_plus */
#barre ul, #barre_plus ul
{
list-style-type : none;
}
#barre li, #barre_plus li
{
float : left;
}
#barre a, #barre_plus a
{
background : #004000;
color : #EEF4E2;
text-decoration : none;
width : 100px;
height : 23px;
margin-left : 2px;
border-width : 1px;
border-style : solid;
border-color : #000000;
text-align : center;
display : block;
}
#barre a:hover, #barre_plus a:hover
{
background : #C5D5A7;
border : 1px solid #004000;
}
/* ~~~~~~~ fin modifications Barre Plus ~~~~~~~~~ */
Ajout ou modifications pour Barre Plus
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* nouvelles valeurs de la barre origine */
#barre
{
width : 417px;
height : 30px;
margin-top : 5px;
border: 0px solid #000;
}
/* règle ajoutée pour créer Barre Plus */
#barre_plus
{
position: absolute;
top:89px;
left:422px;
width : 550px;
height : 30px;
border: 0px solid #000;
}
/* aux règles suivantes ajout de ID #barre_plus */
#barre ul, #barre_plus ul
{
list-style-type : none;
}
#barre li, #barre_plus li
{
float : left;
}
#barre a, #barre_plus a
{
background : #004000;
color : #EEF4E2;
text-decoration : none;
width : 100px;
height : 23px;
margin-left : 2px;
border-width : 1px;
border-style : solid;
border-color : #000000;
text-align : center;
display : block;
}
#barre a:hover, #barre_plus a:hover
{
background : #C5D5A7;
border : 1px solid #004000;
}
/* ~~~~~~~ fin modifications Barre Plus ~~~~~~~~~ */
Commentaires
Master Chief site : master-of-halo.blog4ever.com | le 27/08/2009 à 00:38:35Bonjour Papyclic,
J'ai installer votre Barre Plus en version gratuite, et c'est pour vous dire que ça fonctionne sauf qu'il faut entrer le code sur chaques pages... mais j'ai un problème, dans :
#barre a, #barre_plus a
J'ai bien entré
color : #000000;
ca fonctionne pour les liens de la barre mais les liens de la barre_plus reste blanc.
Me contacter sur le forum d'aide ou par mail svp car je ne crois pas que je vais me souvenir de revenir ici.
Merci
Nicolas
Master Chief le 27/08/2009 à 00:51:35
En attendant j'ai mit le code en en htlm dans la page d'accueil.