FORUM DE DISCUSSION SUR LE LANGAGE PANORAMIC

Développement d'applications avec le langage Panoramic
 
AccueilAccueil  FAQFAQ  RechercherRechercher  S'enregistrerS'enregistrer  MembresMembres  GroupesGroupes  Connexion  
Derniers sujets
» KGF.dll - demandes ou suggestions de modifications ou ajouts
par Klaus Aujourd'hui à 19:48

» KGF_dll - nouvelles versions
par pascal10000 Aujourd'hui à 17:27

» Mah-Jong européen new-look
par Minibug Hier à 22:31

» track_bar circulaire
par Klaus Hier à 13:54

» API Windows
par Klaus Hier à 3:21

» Cartes de voeux, menus, etc.
par JL35 Lun 11 Déc 2017 - 17:48

» a l'aide klaus
par Minibug Lun 11 Déc 2017 - 11:42

» bug SYNEDIT_TARGET_IS_OBJECT
par Jack Lun 11 Déc 2017 - 0:16

» Jukebox : Serge Reggiani
par papydall Sam 9 Déc 2017 - 5:58

» Ecouter la radio fm sur votre pc
par pascal10000 Sam 9 Déc 2017 - 3:42

» anomalie
par Klaus Sam 9 Déc 2017 - 3:21

» hommage
par Jicehel Ven 8 Déc 2017 - 11:29

» Logiciel de soutien scolaire en langues.
par Pedro Alvarez Ven 8 Déc 2017 - 10:43

» carte son
par Klaus Ven 8 Déc 2017 - 2:37

» mise a jour calculatrice
par joeeee2017 Mer 6 Déc 2017 - 22:19

Navigation
 Portail
 Index
 Membres
 Profil
 FAQ
 Rechercher
Rechercher
 
 

Résultats par :
 
Rechercher Recherche avancée
Décembre 2017
LunMarMerJeuVenSamDim
    123
45678910
11121314151617
18192021222324
25262728293031
CalendrierCalendrier

Partagez | 
 

 Un menu Side-Bar en HTML/CSS

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Klaus

avatar

Nombre de messages : 10257
Age : 68
Localisation : Ile de France
Date d'inscription : 29/12/2009

MessageSujet: Un menu Side-Bar en HTML/CSS   Dim 7 Déc 2014 - 3:06

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 !
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://klauspanoramic.comxa.com/index.html
Yannick

avatar

Nombre de messages : 8002
Age : 46
Localisation : Bretagne
Date d'inscription : 15/02/2010

MessageSujet: re   Dim 7 Déc 2014 - 5:00

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
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
 
Un menu Side-Bar en HTML/CSS
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» [Annulée] Demande une page HTML
» [résolu] Lien dans image survolée vers page html
» besion d'aide language html lecteur de musique !! (Résolu)
» commande menu "Enregistrer"
» Xhtml/css: integrer une video avec html

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
FORUM DE DISCUSSION SUR LE LANGAGE PANORAMIC :: PANORAMIC :: Vos sources, vos utilitaires à partager-
Sauter vers: