Un menu Side-Bar en HTML/CSS

Une autre démonstration d'un menu vertical auto-dépliant, en utilisant les fonctions de gestion du WebBrowser de KGF.dll:

Voici le code HTML, à déposer dans le dossier CURRENT_DIR$, sous le nom de menu2.html:

Code:: <!DOCTYPE html>

<style type="text/css">
* {
margin: 0px;
padding: 0px;
}

body {
background: #e5e5e7;
}

nav {
font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 13px;
line-height: 1.5;
margin: 50px auto;
width: 200px;
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

.menu-item {
background: #fff;
width: 200px;
}

/*Menu Header Styles*/
.menu-item h4 {
border-bottom: 1px solid rgba(0,0,0,0.3);
border-top: 1px solid rgba(255,255,255,0.2);
color: #fff;
font-size: 15px;
font-weight: 500;
padding: 7px 12px;

/*Gradient*/
background: #a90329; /* Old browsers */
background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}

.menu-item h4:hover {
background: #cc002c; /* Old browsers */
background: -moz-linear-gradient(top, #cc002c 0%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cc002c), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #cc002c 0%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #cc002c 0%,#6d0019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #cc002c 0%,#6d0019 100%); /* IE10+ */
background: linear-gradient(top, #cc002c 0%,#6d0019 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc002c', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */

}

.menu-item h4 a {
color: white;
display: block;
text-decoration: none;
width: 200px;
}

/*ul Styles*/
.menu-item ul {
background: #fff;
font-size: 13px;
line-height: 30px;
height: 0px;
list-style-type: none;
overflow: hidden;
padding: 0px;

/*Animation*/
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
-ms-transition: height 1s ease;
transition: height 1s ease;
}

.menu-item:hover ul {
height: 93px;

}

.menu-item ul a {
margin-left: 20px;
text-decoration: none;
color: #aaa;
display: block;
width: 200px;
}

/*li Styles*/
.menu-item li {
border-bottom: 1px solid #eee;
}

.menu-item li:hover {
background: #eee;
}

/*First Item Styles*/
.alpha p {
padding: 8px 12px;
color: #aaa;
}

.alpha p a {
color: #aaa;
font-style: italic;
}

.alpha p a:hover {
color: #ccc;
}
</style>

<html>
<head>
<meta charset="utf-8"></meta>
<meta content="description" name="description"></meta>
<title></title>
<link href="style.css" media="screen" rel="stylesheet"></link>
</head>
<body>
<nav>
<div class="menu-item alpha"><h4>
<a href="http://KGF_menu_home.html">Home</a>
</h4>
<p>
Démo d'un menu vertical dynamique
</p></div>
<div class="menu-item"><h4>
<a href="#">Applications</a>
</h4>
<ul>
<li>
<a href="http://KGF_menu_Site.html">Site</a>
</li>
<li>
<a href="http://KGF_menu_Imprimer.html">Imprimer</a>
</li>
<li>
<a href="http://KGF_menu_Autres.html">Autres</a>
</li>
</ul></div>
<div class="menu-item"><h4>
<a href="#">A-propos</a>
</h4>
<ul>
<li>
<a href="http://KGF_menu_Historique.html">Historique</a>
</li>
<li>
<a href="http://KGF_menu_auteurs.html">Auteurs</a>
</li>
<li>
<a href="http://KGF_menu_Remerciements.html">Remerciements</a>
</li>
</ul></div>
<div class="menu-item"><h4>
<a href="#">Contact</a>
</h4>
<ul>
<li>
<a href="http://KGF_menu_telephone.html">Téléphone</a>
</li>
<li>
<a href="http://KGF_menu_email.html">Email</a>
</li>
<li>
<a href="http://KGF_menu_Adresses.html">Adresses</a>
</li>
</ul></div>
</nav>
</body>
</html>

Et voici le programme de démo, à déposer dans le fichier test_menu_side_bar_HTLM_CSS.bas:

Code:: ' test_menu_side_bar_HTLM_CSS.bas
label fonction

dim res%, WB_menu%, url$, txt$, s$

dll_on "KGF.dll"

full_space 0

memo 1 : top 1,10 : left 1,500 : width 1,300 : hide 1
on_change 1,fonction

WB_menu% = dll_call1("WB_Create",handle(0))
res% = dll_call5("WB_Locate",WB_menu%,0,0,250,height(0)-80)

url$ = "file:///"+dir_current$ + "\menu2.html"
res% = dll_call2("WB_Url",WB_menu%,adr(url$))

txt$ = "http://kgf_menu_"
res% = dll_call3("WB_InterceptURL",WB_menu%,handle(1),adr(txt$))

memo 10 : top 10,10 : left 10,260 : width 10,200 : height 10,500
font_names_load 10

end

' interceptions des liens HTML du menu du WebBrowser
fonction:
s$ = item_read$(1,1)
if instr(s$,"_home.html")>0 then message "Page d'accueil"
if instr(s$,"_site.html")>0 then message "Site"
if instr(s$,"_imprimer.html")>0 then message "Imprimer"
if instr(s$,"_autres.html")>0 then message "Autres"
if instr(s$,"_historique.html")>0 then message "Historique"
if instr(s$,"_auteurs.html")>0 then message "Auteurs"
if instr(s$,"_remerciements.html")>0 then message "Remerciements"
if instr(s$,"_telephone.html")>0 then message "Téléphone"
if instr(s$,"_email.html")>0 then message "E-mail"
if instr(s$,"_adresses.html")>0 then message "Adresses"
return

Vous voyez, c'est très court, mais c'est spectaculaire ! L'objet WebBrowser est vraiment très utile !

Juste un petit "nota bene" en apparté.
Si vous souhaitez reprendre des objets du site du Mag pour les adapter à vos besoins.
Une copie du site sous *.zip est sur mon webdav.
Il vous suffit de piocher dedans c' est "open bar", servez vous... Laughing

» Un menu déroulant type "Side Bar"
» Menu personalisé avec icones et menu contextuel
» Couleurs HTML
» Fichiers HTML
» Sub de conversion Html -> Texte