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 ~~~~~~~~~ */








25/09/2008
2 Poster un commentaire

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 132 autres membres