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
» A propos des attributs de fichier
par Oscaribout Aujourd'hui à 1:53

» Problème de math
par Marc37 Hier à 23:04

» Problème de math
par braveen Hier à 21:40

» I Love You
par papydall Hier à 19:22

» Un petit "coucou" à tous les Panoramiciens !
par mindstorm Hier à 17:06

» MARK_ON déclenche un événement ON_CLICK à la place de ...
par Jean Claude Mer 18 Oct 2017 - 18:08

» mise a jour calculatrice
par joeeee2017 Mer 18 Oct 2017 - 15:57

» [solved] 3D_LINE How to ?
par Jicehel Mer 18 Oct 2017 - 11:01

» Convertisseur de base 10 de 2 à 36
par gigi75 Mar 17 Oct 2017 - 18:49

» calculatrice avec touches movibles
par joeeee2017 Dim 15 Oct 2017 - 1:11

» CORTANA
par gigi75 Sam 14 Oct 2017 - 16:32

» Calculatrice
par Jean Claude Sam 14 Oct 2017 - 12:30

» Compilateur FBPano
par jean_debord Jeu 12 Oct 2017 - 9:53

» KGF_dll - nouvelles versions
par Klaus Mar 10 Oct 2017 - 18:49

» à propos de Panoramic_Editor [Résolu]
par Klaus Mar 10 Oct 2017 - 3:19

Navigation
 Portail
 Index
 Membres
 Profil
 FAQ
 Rechercher
Rechercher
 
 

Résultats par :
 
Rechercher Recherche avancée
Octobre 2017
LunMarMerJeuVenSamDim
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
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 : 10074
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 : 7994
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: