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
» Mac OS X sierra
par Irikte Aujourd'hui à 11:38

» Concours de Morpions
par Froggy One Aujourd'hui à 10:29

» Synedit Parameters
par Jean Claude Aujourd'hui à 10:08

» Bienvenue à Irikte
par UltraVox Aujourd'hui à 10:04

» Recherche de traductions de mots (@Klaus).
par Klaus Aujourd'hui à 9:44

» Version instantanée V 0.9.28i10 du 24/06/2017
par Yannick Hier à 22:52

» Panoramic et ses curiosités
par Jack Hier à 8:15

» Utilitaire de suppression de fichiers
par Yannick Ven 23 Juin 2017 - 23:03

» Code à vérifier SVP (Oups ! résolu)
par Jean Claude Jeu 22 Juin 2017 - 21:16

» Compilateur FBPano
par jean_debord Jeu 22 Juin 2017 - 9:56

» Bienvenue à Virtualalan !
par UltraVox Jeu 22 Juin 2017 - 9:18

» ShortName$(F) [Cloturé]
par papydall Mer 21 Juin 2017 - 16:19

» Remplacer espace par tiret dans noms des dossiers / fichiers
par papydall Mer 21 Juin 2017 - 15:27

» Menu personalisé avec icones et menu contextuel
par Laurent (Minibug) Mer 21 Juin 2017 - 12:44

» La liste des choses à faire ...
par Jack Mar 20 Juin 2017 - 22:49

Navigation
 Portail
 Index
 Membres
 Profil
 FAQ
 Rechercher
Rechercher
 
 

Résultats par :
 
Rechercher Recherche avancée
Juin 2017
LunMarMerJeuVenSamDim
   1234
567891011
12131415161718
19202122232425
2627282930  
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 : 9976
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 : 7839
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
-
» Menu déroulant couleur (besoin code html)
» Intégrer un code HTML dans le menu vertical de la page d'accueil du forum ?
» Menu déroulant avec page HTML
» Menu déroulant moderne (HTML & CSS3)
» Rajouter une page HTML dans le menu

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