Tuto - Barre Plus avec menus déroulants (2)

 Barre plus - Menus déroulants
 Barre plus - Menus déroulants

Suppression de la barre des modules du système Blog4ever pour réaliser une barre complète, "Barre Plus" avec des options directes et des menus déroulants, toujours pour les versions payantes, utilisation la bordure gauche/droite pour y mettre le javascript et le code HTML.



Emplacement de ce menu

La "Barre Plus" remplacera la barre automatique du système, il faut donc désactiver cette barre. Pour cela dans le CSS, la règle #barre contiendra l'attribut display avec la valeur none soit : #barre:{display:none;}

La "Barre Plus" peut s'étendre sur toute la largeur du cadre ou conteneur, en-dessous du titre, bannière ou logo.

Les 4 premières options de cette nouvelle barre seront les liens directs sur les modules, comme dans l'ancienne barre: Accueil, Articles, Photos et Forum.

Une démo de cette barre permet de visualiser le résultat après quelques modifications du CSS, dans la règle #barre_plus, la largeur, la position left et la marge gauche. Les autres règles ne seront pas modifiées, sauf la largeur des cellules "dl" qui contiennent les options directes ou les titres de menus déroulants, dans la démo je donne plus d'explications à ce sujet. Vous trouverez également des fichiers textes sont à votre disposition, avec le code CSS et HTML.

Voir démo 3
Tuto Barre Plus avec menus déroulants(1) lien ou la démo 2
Tuto Barre Plus lien ou la démo 1


 

 

Le code javascript pour les menus déroulants à mettre dans la bordure gauche/droite de votre blog


<!-- ************** Script ********************* -->
<!-- Code à mettre dans la colonne gauche/droite -->
<!-- =========================================== -->
<script type="text/javascript">
<!--
window.onload=montre_mb;
function montre_mb(id) {
var d = document.getElementById(id);
 for (var i = 1; i<=100; i++) {
  if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
 }
if (d) {d.style.display='block';}
}
//-->
</script>




Code CSS de ma Barre Plus sur la démo 3...

<!-- ****************  CSS  ******************** -->
<!-- Code à mettre dans la colonne gauche/droite -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!--      ou dans votre feuille de style         -->
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<style type="text/css">
<!--
/* ================================= */
/*     supprimer barre normale       */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#barre{display:none;}
/* ====================================== */
/* la règle ajoutée pour créer Barre Plus */
/* modifiée, largeur et marge de gauche  */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#barre_plus
{
position: absolute;
top:89px;
left:0px;
width : 963px;
margin-left: 6px;
height : 20px;
border: 1px solid #000;
}
/* ================================= */
/*   règles des menus de barre plus  */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menubarre {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 100%; /* précision pour Opera */
}
#menubarre dl {
float: left;
width: 107px;
background: #009900;
color:#FFF;
}
#menubarre dt {
text-align: center;
font-weight: bold;
border: 1px solid gray;
margin: 1px;
}
#menubarre dd {
display: none;
border: 1px solid gray;
background:#EBEDAB;
}
#menubarre dt a
{
color: #FFFFFF;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menubarre dt a:hover
{
background: #eee;
color: #EE8320;
cursor:pointer;
}
#menubarre li
{
text-align: center;
}
#menubarre li a
{
color: #009900;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menubarre li a:hover
{
background: #eee;
color: #EE8320;
cursor:pointer;
}
-->
</script>
<!-- ~~~~~~ fin barreplus et menu barre ~~~~~~~~ -->




Code HTML de ma Barre Plus sur la démo 3...

<!-- **************** HTML ********************* -->
<!-- Code à mettre dans la colonne gauche/droite -->
<!-- =========================================== -->
<!-- *************************** -->
<!--  Création de Barre Plus     -->
<!--     avec OPTIONS DIRECTES   -->
<!--     et menus déroulants     -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div id="barre_plus">
<div id="menubarre">
<dl>
<dt onmouseover="javascript:montre_mb();"><a href="http://diztest.blog4ever.com/blog/index-205392.html" target="_seft" title="Retour Accueil">ACCUEIL</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre_mb();"><a href="http://diztest.blog4ever.com/blog/article-205392.html" target="_seft" title="Tous les articles.">ARTICLES</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre_mb();"><a href="http://diztest.blog4ever.com/blog/photo-205392.html" target="_seft" title="Album photos.">PHOTOS</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre_mb();"><a href="http://diztest.blog4ever.com/blog/forum-205392.html" target="_seft" title="Forum de DizTest.">FORUM</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre_mb();"><a href="http://sd-1.archive-host.com/membres/up/183822970129391303/Demos_sources/barreplus_CSS_3demo.txt" title="Ouvre le fichier contenant les modifications du CSS.">Code CSS</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre_mb();"><a href="http://sd-1.archive-host.com/membres/up/183822970129391303/Demos_sources/barreplus_HTML_3demo.txt" title="Ouvre le fichier contenant les modifications du HTML.">Code HTML</a></dt>
</dl>  
<dl> 
<dt onmouseover="javascript:montre_mb('smenu1');">Blog4ever</dt>
 <dd id="smenu1" onmouseover="javascript:montre_mb('smenu1');" 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('smenu1');">Forum Aide</a></li>
       <li><a href="http://www.blog4ever.com/faq/index.php" target="_blank" title="Blog4ever Aide FAQ" onclick="cache('smenu1');">Aide - FAQ</a></li>
       <li><a href="http://www.blog4ever.com/annuaire.php" target="_blank" title="Blog4ever Annuaire des blogs" onclick="cache('smenu1');">Annuaire</a></li>
       <li><a href="http://rapidechange.com/" target="_blank" title="Rapidechange Echange et Hébergement de divers fichiers" onclick="cache('smenu1');">Rapidechange</a></li>      
  </ul>
 </dd>
</dl> 
<dl> 
<dt onmouseover="javascript:montre_mb('smenu2');">Favoris</dt>
 <dd id="smenu2" onmouseover="javascript:montre_mb('smenu2');" onmouseout="javascript:montre_mb('');">
  <ul>
   <li><a href="http://diztest.blog4ever.com/" target="_blank" title="DizTest par PapyClic - Outil dédié au Diz Perso de Blog4ever" onclick="cache('smenu2');">DizTest/DizPerso</a></li>
       <li><a href="http://www.aidenet.com/css/index.htm" target="_blank" title="Aidenet Sommaire du CSS" onclick="cache('smenu2');">Aidenet CSS</a></li>
       <li><a href="http://www.liensutiles.org/sitesuti.htm" target="_blank" title="Outils informatiques pour Webmasters, multitude de liens divers sur Internet" onclick="cache('smenu2');">Liens utiles</a></li>
  </ul>
 </dd>
</dl>
<dl> 
<dt onmouseover="javascript:montre_mb('smenu3');">Tutoriels</dt>
 <dd id="smenu3" onmouseover="javascript:montre_mb('smenu3');" onmouseout="javascript:montre_mb('');">
  <ul>
   <li><a href="http://bricabrac.blog4ever.com/blog/lirarticle-490-969211.html" target="_blank" title="Tutoriel par PapyClic - Création barre menu supplémentaire." onclick="cache('smenu3');">Barre Plus(1)</a></li>
       <li><a href="http://bricabrac.blog4ever.com/blog/lirarticle-490-907798.html" target="_blank" title="Tutoriel par PapyClic - Création colonne complémentaire." onclick="cache('smenu3');">Colonne Plus</a></li>
       <li><a href="http://bricabrac.blog4ever.com/blog/lirarticle-490-902551.html" target="_blank" title="Tutoriel par PapyClic - Création barre de navigation flottante." onclick="cache('smenu3');">Barre flottante</a></li>
       <li><a href="http://bricabrac.blog4ever.com/blog/lirarticle-490-906395.html" target="_blank" title="Tutoriel par PapyClic - Organisation du bas de page" onclick="cache('smenu3');">Bas de page</a></li>
  </ul>
 </dd>
</dl> 
</div><!-- menubarre -->
  </div>




 

 





11/10/2008
9 Poster un commentaire

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 133 autres membres