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
» Planétarium virtuel.
par Pedro Alvarez Hier à 16:57

» Roues dentées
par jean_debord Hier à 10:40

» Attention arnaque !
par mindstorm Jeu 19 Juil 2018 - 19:18

» Qui fait quoi ?
par silverman Mer 18 Juil 2018 - 15:21

» ITEM_SELECT N,L pour synedit
par silverman Mer 18 Juil 2018 - 15:20

» Boussole
par jean_debord Mer 18 Juil 2018 - 11:06

» Roue à n faces
par Marc Dim 15 Juil 2018 - 22:16

» Exemple d'une nouvelle version d'un GRID
par Jean Claude Ven 13 Juil 2018 - 10:32

» Une simple question
par Oscaribout Sam 7 Juil 2018 - 23:20

» BUG sur l'objet TAB
par Jack Sam 7 Juil 2018 - 21:12

» Monopoly moderne
par jjn4 Sam 7 Juil 2018 - 15:06

» Récapitulatif ludothèque panoramic jjn4
par jjn4 Ven 6 Juil 2018 - 17:41

» Lignes ondulées
par JL35 Ven 6 Juil 2018 - 17:39

» bug off_activate 0 : sans d'effet
par silverman Ven 6 Juil 2018 - 13:02

» Position des objets d'un conteneur dans FBPano et Panoramic
par Navigateur Ven 6 Juil 2018 - 12:59

Navigation
 Portail
 Index
 Membres
 Profil
 FAQ
 Rechercher
Rechercher
 
 

Résultats par :
 
Rechercher Recherche avancée
Juillet 2018
LunMarMerJeuVenSamDim
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
CalendrierCalendrier

Partagez | 
 

 Un menu Side-Bar en HTML/CSS

Aller en bas 
AuteurMessage
Klaus

avatar

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

MessageSujet: Un menu Side-Bar en HTML/CSS   Dim 7 Déc 2014 - 1: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 : 8077
Age : 47
Localisation : Bretagne
Date d'inscription : 15/02/2010

MessageSujet: re   Dim 7 Déc 2014 - 3: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
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: