Tuto - Barre Plus avec menus déroulants (1)
Barre plus - Menus déroulants
Barre plus - Menus déroulants
Amélioration de la barre supplémentaire, à côté de la barre des modules du système Blog4ever. "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
Dans cette version améliorée l'emplacement est le même que dans mon tuto précédent "Barre Plus".
J'ai fait cette page Demo, de façon à visualiser exactement le résultat obtenu, ne pouvant utiliser la barre de menu de "BRICABRAC" étant déjà modifiée, différente et surtout évoluera encore.
Le bloc contenant le menu est le même que dans la démo précédente, sa dimension sera à calculer selon le modèle employé.
Sur les démos je me suis servi de la structure de DizTest avec le modèle Diz Perso, très employé dans Blog4ever.
J'ai fait cette page Demo, de façon à visualiser exactement le résultat obtenu, ne pouvant utiliser la barre de menu de "BRICABRAC" étant déjà modifiée, différente et surtout évoluera encore.
Le bloc contenant le menu est le même que dans la démo précédente, sa dimension sera à calculer selon le modèle employé.
Sur les démos je me suis servi de la structure de DizTest avec le modèle Diz Perso, très employé dans Blog4ever.
Consultez les démos, des fichiers textes sont à votre disposition, avec le code CSS, HTML et le Javascript.
Voir l'article précédent lienou voir la Demo 1
Barre avec menus déroulants Demo 2
Code source complet de la Demo2 : télécharger
Voir l'article précédent lienou voir la Demo 1
Barre avec menus déroulants Demo 2
Code source complet de la Demo2 : télécharger
Le code javascript à mettre dans la bordure gauche/droite de votre blog
<script type="text/javascript">
// à mettre dans la bordure gauche/droite
<!--
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 2...
<!-- **************** CSS ******************** -->
<!-- Code à mettre dans la colonne gauche/droite -->
<!-- ------------------------------------------- -->
<!-- ou dans votre feuille de style -->
<!-- =========================================== -->
<style type="text/css">
<!--
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* 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;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* 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: 110px;
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;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* règles des liens directs */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~ */
#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;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* règles des liens dans menu déroulant */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#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 barre plus et ses menus ~~~~~~~~ -->
Code HTML de ma Barre Plus sur la démo 2...
<!-- ************************* -->
<!-- Création de Barre Plus -->
<!-- avec menus déroulants -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div id="barre_plus">
<div id="menubarre">
<dl>
<dt onmouseover="javascript:montre_mb();"><a href="http://sd-1.archive-host.com/membres/up/183822970129391303/Demos_sources/barreplus_CSS_2demo.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_2demo_CodeSource.htm" 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="https://www.blog4ever.com/faq/index.php" target="_blank" title="Blog4ever Aide FAQ" onclick="cache('smenu1');">Aide - FAQ</a></li>
<li><a href="https://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="https://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="https://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="https://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="https://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>
