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
» Problème de compilateur.
par Pedro Alvarez Hier à 20:01

» COMPILATEUR V 0.9 beta 8 du 18 aout 2017
par Pedro Alvarez Hier à 19:54

» Pb 17 (en analyse): ITEM_SELECT ne fonctionne pas
par Jack Jeu 17 Aoû 2017 - 19:26

» Compilateur FBPano
par Mike Jeu 17 Aoû 2017 - 13:52

» un nouveau editeur panobasic
par Jean Claude Jeu 17 Aoû 2017 - 10:18

» Le compilateur.
par Pedro Alvarez Jeu 17 Aoû 2017 - 8:36

» Pb 16 (en analyse): ON_CLOSE plante à l'exécution
par Jack Mer 16 Aoû 2017 - 20:00

» Pb 15 (en analyse): TIMER_ON plante à l'exécution
par Jack Mer 16 Aoû 2017 - 19:58

» KGF_dll - nouvelles versions
par Yannick Dim 13 Aoû 2017 - 17:35

» probleme d'outil
par Yannick Dim 13 Aoû 2017 - 17:32

» Carte de France des régions
par Yannick Sam 12 Aoû 2017 - 21:33

» Pb 14 (en analyse): PRINT_LOCATE plante à l'exécution
par Jack Ven 11 Aoû 2017 - 22:37

» Petit avertissement [Mots réservés]
par papydall Ven 11 Aoû 2017 - 13:45

» Distances sur plan
par JL35 Jeu 10 Aoû 2017 - 21:29

» Tracé : Triangle, Carrée, Dents de scie, Sinusoïde redressée
par papydall Jeu 10 Aoû 2017 - 14:52

Navigation
 Portail
 Index
 Membres
 Profil
 FAQ
 Rechercher
Rechercher
 
 

Résultats par :
 
Rechercher Recherche avancée
Août 2017
LunMarMerJeuVenSamDim
 123456
78910111213
14151617181920
21222324252627
28293031   
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 : 10062
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 : 7968
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
» Rajouter une page HTML dans le menu
» Menu déroulant vertical: comment mettre des liens de page html ? Est-ce possible ?

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: