En poursuivant votre visite de ce site, vous acceptez l'utilisation de cookies pour permettre ses différents services. Voir les Mentions légales.
 
  • Sur ce site, vous trouverez : Camera ! Évidemment...

    ...mais aussi des carousels : WaterwheelCarousel par exemple...

  • ... des informations sur les iFrames responsives

    Une solution élégante pour rendre les iFrames (cadres, dans lesquels on intègre d'autres pages) "responsive design" : Ils s'adapteront automatiquement et de manière proportionnelle à la dimension de la page.

    Lisez le tutoriel

    Lisez également ces trois tutoriels : ici , ici  et  ici

    pour créer un bandeau "responsive design", constitué de cellules indépendantes, au contenu varié, à placer en haut, en bas, dans la boite édito, dans un article...de votre site.

  • ...un Audio Player dans un Iframe... ...un autre, simple, intégré dans Guppy... et... JPlayer ... intégré, lui aussi.

  • ...des images qui changent au survol de la souris... ...par exemple :

    ...mais bien d'autres effets à découvrir, notamment celui que vous êtes en train d'utiliser...

  • ...et bien sûr des skins pour habiller vos sites GuppY V5...la série "Transparences" avec ici FeatureCarousel

  • Camera

    Camera

    ¤ Camera est un slider développé par Manuel Masia. On peut l'utiliser très facilement dans GuppY. Dans ses différentes options possibles, on peut faire varier les transitions, les apparitions de titres, les vignettes de pagination. Camera peut même intégrer des vidéos ! Sur ce site quelques tutoriels pour mieux maitriser Camera.

    Informations Camera

    ¤ Deux carousels de Brian Osborne sont disponibles lisez les tutoriels : WaterwheelCarousel et FeatureCarousel.

    ¤ Deux "slideshows" sont disponibles avec ou sans JQuery : lisez les tutoriels : Accordion (CSS) et Circle Nav (JQuery).

  • iFrames

    iFrames responsives

    Une solution élégante pour rendre les iFrames (cadres, dans lesquels on intègre d'autres pages) "responsive design" : Ils s'adapteront automatiquement et de manière proportionnelle à la dimension de la page.

    Lisez le tutoriel

    Lisez également ces trois tutoriels : ici , ici  et  ici

    pour créer un bandeau "responsive design", constitué de cellules indépendantes, au contenu varié, à placer en haut, en bas, dans la boite édito, dans un article...de votre site.

  • Audio-Players

    Audio-Players

    ¤ Un Audio-player à mettre en place dans un iFrame. Léger et "customisable", quelques skins en téléchargement lui sont destinées.

    Lisez le tutoriel

    ¤ Un Audio-player simple avec playlist également peut être intégré directement dans GuppY.

    Lisez le tutoriel

    ¤ Un autre Audio-player (JPlayer) avec playlist également peut être intégré directement dans GuppY.

    Lisez le tutoriel

  • Effets au survol

    Effets au survol

    Des astuces amusantes, surtout en CSS, pour agrémenter les sites.

    Au survol de la souris : des images qui changent, qui pivotent et font apparaitre un nouveau contenu, les boutons déroulants offrant de nouvelles informations, une boîte-menu déroulante (celle-là même que vous utilisez)... et d'autres, à venir, sans doute.

    La possibilité aussi de personnaliser des infobulles dans une image mappée cliquable générée par Gimp (traitement d'image libre et gratuit). Lisez le tutoriel

    Des liens vers des tutoriels sont disponibles dans le menu "Astuces>Changements au survol"

  • Skins

    Skins pour GuppY V5

    Quelques skins sont disponibles en téléchargement pour habiller les sites GuppY. Elles sont toutes compatibles "Config Look" et adaptées aux dernières versions (à partir de GuppY 5.03.00) moyennant quelques champs à adapter dans "Config Look". Elles peuvent être testées sur Démo-skins en version 5.03.00 (et au-delà...) -ce sont celles qui sont proposées en téléchargement-.

    Démo-skins

    Zone de téléchargement

 
 
 
 
 
 
Vous êtes ici :   Accueil » Des boutons fixes déployables
 
    Imprimer la page...
    Imprimer la section...
 

Des boutons fixes déployables

  • Contenu 1

    DU TEXTE, DES LIENS... : TEXTE ALÉATOIRE

    Quoique bien armé, suivant la foule, le dandy ou le révolutionnaire exigent l'unité, car pression sociale et élan d'amour qui les tuera !

    Ne criez pas, je serais sûrement très surpris ! Imaginez-vous qu'elle vient de mon arrière-grand-père donc, qui était réellement surprenant dans la personne que j'aime. Je fais observer qu'il trouverait bien moyen d'utiliser le vent qui lui arrivait dans le port du salut. Or si vous n'y manquez donc pas, à moi, un manant qui paraissait avoir onze ans. Visitez ces couvents, sans doute. Pourrions-nous en finir avec mes misères, d'adopter votre enfant comme ça à présent !

    Calmez-vous, mon enfant ; si vous recourez au magistrat et au pouvoir du moindre de nos caprices, de la saine raison ne doit pas vouloir parvenir au plus haut prix où il s'agirait de prison.

  • Contenu 2

    DES IMAGES

    cube3D.jpg

  • Contenu 3

    UNE VIDÉO HÉBERGÉE SUR VOTRE SITE (OU EMBED... BIEN SÛR...)

  • Contenu 4

    UN IFRAME QUI CONTIENT CE QUE VOUS SOUHAITEZ....

  • Contenu 5

    Beaucoup de contenus sont possibles, avec certaines limites toutefois...

    Les balises <div> </div> et <section> </section> utilisées dans les contenus désorganiseront l'affichage : En effet, celles-ci sont déjà utilisées et définies dans le style du procédé...

Des boutons fixes qui se déploient lors du survol de la souris
pour faire apparaitre un bandeau.

C'est le procédé qui est visible sur la gauche de ce site. Sur celui-ci, les contenus reprennent ceux du menu linéaire et de la boite-menu déroulante (qui ont sensiblement la même fonction...). C'est uniquement pour montrer le fonctionnement.

Ce procédé est grandement inspiré par le mini menu vertical à étiquettes glissantes présenté sur ce site https://www.outils-web.com/page-script-html-css-menu.asp . Mais de nombreux aménagements ont été nécessaires pour ce menu fixe.

Ci-contre, un exemple dont le code est détaillé ci-dessous (pas le contenu qui n'est là que pour illustrer). Les boutons ne sont pas fixés évidemment, mais il est très facile de reprendre le code source, de le placer dans une boite libre et de le fixer.

Lorsque les boutons sont survolés. Un bandeau déroulant se déploie et offre de nouvelles informations qui peuvent être des liens, des images... Le bandeau déroulant recouvre (en principe... *) le contenu qui se trouve à sa droite sans l'affecter. Les dimensions de ces boutons et la largeur des bandeaux sont déterminées en pixels, il faudra donc les réserver à un affichage précis et non "responsive design".

Le contenu des bandeaux peut très facilement se gérer directement dans l'éditeur de texte de GuppY !

(* Il peut y avoir des soucis de superposition liés à l'utilisation de z-index, qui ne s'avère pas aussi simple à utiliser que je ne le croyais. J'en ai résolu quelques uns, n'hésitez pas à poster sur le forum en cas de souci, je tenterai de trouver une solution...)

Attention toutefois :

L'effet produit, d'après mes tests, est possible sur les différents navigateurs sur les ordinateurs. Sur tablette et sur smartphone, pour ce que j'ai pu essayer, cela fonctionne de manière imparfaite (le survol sur un écran tactile ne fonctionne pas, il faut "cliquer"). Donc ce n'est pas vraiment "Mobile Friendly" et c'est plutôt à réserver à des articles ou des boites libres qui seront visionnés sur ordinateurs ou tablettes. Il convient donc de réfléchir à ce que l'on veut obtenir.

Les imagettes qui servent aux boutons vont par deux, sont de 192px*192px et sont redimensionnées dans le code. A vous d'adapter les liens et les imagettes à vos souhaits.

Ci-dessous le code de la partie <style> </style> à copier-coller au début du code source d'une boite libre (ou dans votre fichier styleplus.css), puis la structure du code à placer dans le code source de la boite libre en remplissant les intitulés et les contenus à votre goût.

Remplacez comme vous le souhaitez Item1, Item2... à votre choix mais pensez à modifier les appels à ces classes.

title="Item 1" etc ... servent aux intitulés des info-bulles

<style type="text/css">
#boutons-deployables {
    position:relative; /* mettre
fixed pour fixer */
    /*z-index:5000;*/ /* facultatif... tout dépend où et comment ce dispositif est installé, mais z-index élevé pour être superposé au reste de la page */
    top:10px; /* position en haut */
    left:10px; /* position à gauche */
}
#boutons-deployables li{ /* Attributs d'une ligne d'un bouton */
    list-style:none;
    height:50px; /* hauteur */
    padding:0px;
    width:50px; /* largeur */
}
#boutons-deployables section{ /* Attributs du bandeau non survolé */
    left:50px; /* position à gauche d'où juxtaposé avec son bouton*/
    padding:0px;
    position:absolute;
    opacity:0; /* opacité = 0 donc non visible */
    transform:scale(0); /* échelle 0 : donc non visible */
    transform-origin:0 0; /* déroulement à partir du haut à gauche */
    transition:all 0.7s ease; /* vitesse et mode de transition ease, linear, ease-in, ease-out...*/
}
#boutons-deployables div{ /* Attributs du div d'un bouton = idem li ci-dessus */
    height:50px; /* hauteur */
    width:50px; /* largeur */
    display:block;
    position:relative;
}
#boutons-deployables div:hover section{ /* Attributs du bandeau survolé */
    position:relative;
    width:650px; /* largeur  en pixels */
    height:auto; /* hauteur : auto donc s'adapte en hauteur au contenu */
    padding:5px; /* marges intérieures du bandeau */
    display:block;
    border-radius:6px; /* arrondis */
    opacity:1; /* opacité = 1 donc visible */
    transform:scale(1); /*échelle 1 : donc visible*/
 }
#boutons-deployables .
Item1 { /* Attributs du bouton 1 non survolé */
    background:url('img/NavLat/clock2.png')no-repeat;  /* URL de l'image */
    background-size:48px; /* taille obtenue pour l'affichage, ici 48px*48px */
}
#boutons-deployables .
Item1:hover { /* Attributs du bouton 1 survolé */
    background:url('img/NavLat/clock.png')no-repeat; /* URL de l'image */
    background-size:48px; /* taille obtenue pour l'affichage, ici 48px*48px */
}
#boutons-deployables .
Item1 section { /* Attributs du bandeau 1 */
background-color:#E1F8FD; /* couleur de fond */
color:inherit; /* couleur du texte */
border:2px solid #0E97B5; /* bordure : épaisseur nature couleur */
}
#boutons-deployables .
Item2 { /* idem ci-dessus et compléter les autres items */
    background:url('img/NavLat/layers2.png')no-repeat;
    background-size:48px;
}
#boutons-deployables .
Item2:hover {
    background:url('img/NavLat/layers.png')no-repeat;
    background-size:48px;
}
#boutons-deployables .
Item2 section {
    background-color:#DEE1E4;
    color:inherit;
    border:2px solid #434951;
}
#boutons-deployables .
Item3 {
    background:url('img/NavLat/creditcard2.png')no-repeat;
    background-size:48px;
}
#boutons-deployables .
Item3:hover {
    background:url('img/NavLat/creditcard.png')no-repeat;
    background-size:48px;
}
#boutons-deployables .
Item3 section {
    background-color:#EEEEEE;
    color:inherit;
    border:2px solid #A0A0A0;
}
#boutons-deployables .
Item4 {
    background:url('img/NavLat/settings2.png')no-repeat;
    background-size:48px;
}
#boutons-deployables .
Item4:hover {
    background:url('img/NavLat/settings.png')no-repeat;
    background-size:48px;
}
#boutons-deployables .
Item4 section {
    background-color:#F5E0E0;
    color:inherit;
    border:2px solid #C53D3D;
}
#boutons-deployables .
Item5 {
    background:url('img/NavLat/piechart2.png')no-repeat;
    background-size:48px;
}
#boutons-deployables .
Item5:hover {
    background:url('img/NavLat/piechart.png')no-repeat;
    background-size:48px;
}
#boutons-deployables .
Item5 section {
    background-color:#E9D9F4;
    color:inherit;
    border:2px solid #762FAC;
}
</style>


<div style="float:left;margin-right:40px;">
    <div>
        <ul id="boutons-deployables">
            <li>
                <div class="
Item1" href="#" title="Item 1">
                    <section>
                        <p>
Contenu 1</p>
                    </section>
                </div>
            </li>
            
            <li>
                <div class="
Item2" href="#" title="Item 2">
                    <section>
                        <p>
Contenu 2</p>
                    </section>
                </div>
            </li>
            
            <li>
                <div class="
Item3" href="#" title="Item 3">
                    <section>
                        <p>
Contenu 3</p>
                    </section>
                </div>
            </li>
            
            <li>
                <div class="
Item4" href="#" title="Item 4">
                    <section>
                        <p>
Contenu 4</p>
                    </section>
                </div>
            </li>
            
            <li>
                <div class="
Item5" href="#" title="Item 5">
                    <section>
                        <p>
Contenu 5</p>
                    </section>
                </div>
            </li>
        </ul>
    </div>
</div>

Pour installer proprement cette série de boutons fixes sur le côté de votre site, il faut ne pas faire apparaitre le titre de la boite libre, pour cela faites-le précéder du symbole §

§BoutonsLat par exemple...

et dans votre fichier styleplus placez (en remplaçant FB246 par votre n° de boite libre) au moins cela :

.tblbox.FB246  {  /* Corps boite BoutonsLat */
    background: transparent;   
}

Puis déclarez simplement en admin>Config boites, votre nouvelle boite libre sur une ligne du TopBoxes (boites du haut), avec un pourcentage d'occupation non nul (de 10% par exemple mais 1% suffit, ce qui laisse 99% pour les deux emplacements du reste de la ligne).

Pour toute aide afin d'utiliser ce dispositif, vous pouvez poster sur le forum de ce site.


Date de création : 23/06/2017 @ 15:06
Catégorie : Astuces - Changements au survol
Page lue 94019 fois


Réactions à cet article


Personne n'a encore laissé de commentaire.
Soyez donc le premier !