• 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 ce tutoriel

    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... ...et un autre intégré dans Guppy

  • ...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 dédiés : WaterwheelCarousel et FeatureCarousel.

  • 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 ce tutoriel

    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. Il affiche les pochettes d'album des morceaux qui sont joués. Léger et "customisable", quelques skins en téléchargement lui sont destinées. Il peut être amélioré ! Adeptes du Javascript... à vos claviers ! wink

    Lisez le tutoriel

    ¤ Un deuxième Audio-player simple 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 à la dernière version (GuppY 5.01.07 et +). Elles peuvent être testées sur Démo-skins.

    Démo-skins

    Zone de téléchargement

    FAQ (voir pour les skins version 5.02.00)

 
Vous êtes ici :   Accueil » Boutons déroulants-2
 
Prévisualiser...  Imprimer...  Imprimer la page...
Prévisualiser...  Imprimer...  Imprimer la section...
Recherche
 
Fermer
Calendrier

imasso.gif

rss Cet article est disponible en format standard RSS pour publication sur votre site web :
http://www.71site.fr/data/fr-articles.xml

Des boutons qui se déploient.
Habillage plus "complexe" et plusieurs occurences de cet effet dans le même article.

Haec ubi

Haec ubi latius fama vulgasset missaeque relationes adsiduae Gallum Caesarem permovissent, quoniam magister equitum longius ea tempestate distinebatur, iussus comes orientis

Nebridius contractis undique militaribus copiis ad eximendam periculo civitatem amplam et oportunam studio properabat ingenti, quo cognito abscessere latrones nulla re amplius memorabili gesta, dispersique ut solent avia montium petiere celsorum.

Illud tamen

Illud tamen clausos vehementer angebat quod captis navigiis, quae frumenta vehebant per flumen, Isauri quidem alimentorum copiis adfluebant, ipsi vero solitarum rerum cibos iam consumendo inediae propinquantis aerumnas exitialis horrebant.

Homines enim eruditos et sobrios ut infaustos et inutiles vitant, eo quoque accedente quod et nomenclatores adsueti haec et talia venditare, mercede accepta lucris quosdam et prandiis inserunt subditicios ignobiles et obscuros.

Voilà un habillage possible plus "complexe" de ces boutons déroulants, réalisé dans sa quasi-totalité dans la partie <style></style>.

Titre texte aléatoire A

Prince, on envoyait des hommes pour leur ôter le droit d'imposer les limites. Voudrez-vous consacrer la dernière heure, soit qu'il le fasse arriver où il veut. Répéter ce qu'il contenait, il courut tout droit à elle, de ses monuments indestructibles et qui n'a perdu que très peu de vrais amis veuillent y rester. Sais-tu bien, j'ai lu tous les documents officiels, je... Seul, il y voulait accompagner ses chères filles de souffrance en gardait un frisson pendant des heures ; aujourd'hui il est en faute.

Titre texte aléatoire B

Flanque-moi la paix, elle paraissait aussi déplacée dans cette triste situation, quand je devrais laisser mes os dans ta force qui tue et qui mérite une mention particulière. Sauf quant à une menace tellement grave qu'il était immobile et calme, et commença sa déposition. Donne-m'en un sur dix, ayant été une fois éclairés, et qui naissent et meurent en ne connaissant de la ville tu y allais. Héroïque, n'est-ce point encore ici la première origine de cette idée. Chacune dispose du bon droit, que les autres ; théoriquement, ils ont un venin semblable au venin d'un crapaud rouge. Tombe sur elle toute la joie que me causait l'impression du lendemain le plaisir que lui a causées l'obstination d'une paysanne ; et il se cassa la jambe. Holà, quelle est ma situation ; mais elle accueillit ma suggestion avec mépris et dédain. Soupçonner une âme jeune est quelquefois un sot rôle, surtout par la droite de l'entrée.

Témoin de la manière de prendre ta part ? Parvenue au terme extrême de la voir s'éprendre de quelque autre animal de cette taille, et qui sous la restauration. Entre tous les peuples de la terre !

Titre texte aléatoire C

Jette-le, qu'on pense de vous, dans le vieux bâtiment qui avait fait des voeux pour qu'il eût pu employer la procédure usuelle.

Assise au petit côté de l'accoudoir, rappel permanent de son ennemi et en retombant, se déployaient pour tout inonder. Vers une heure moins le quart. Elle-même le dit : préparez vous dès aujourd'hui, si vos affaires ne vont pas ensemble ? Versait-elle des larmes, et tous quatre s'acheminèrent vers l'église, sombre, immense, dominatrice, avec un peu plus tôt aujourd'hui !

Étonnée d'abord en boitant, sur le carreau et qu'il savait, par la raison contraire, la bonté d'envoyer le cadeau d'une de ces filles, j'ai essayé... Envie de quoi, au lieu des boyards si impatiemment attendus se firent entendre de l'intérieur de son confessionnal. Refusez-vous de les accepter, puisqu'elle devait si peu durer.

Plus anecdotique sans doute mais qui montre la possibilité d'utiliser plusieurs occurences de cette astuce dans le même article (dans cet article, il y a 4 occurences : chaque affichage horizontal nécessite une occurence). Il suffit alors de copier plusieurs fois le contenu de la série <style></style> en modifiant les identifiants et les classes et en prenant soins de faire la même chose dans le corps de l'article pour l'appel à ces classes.

Il faut aussi prendre soin de modifier les z-index dans le style. Les éléments les plus hauts dans la page doivent avoir les z-index les plus élévés pour recouvrir les autres éléments lors du déploiement.

Voir ci dessous pour la partie <style></style> et plus bas pour la structure du corps de l'article.

<style type="text/css">
#boite_deploiement{ /*espace qui contient les différents boutons à déployer : 1ère ligne horizontale*/
width:96%; /*largeur de tous les boutons ici : 4%+40%+4%+4%+40%+4%*/
height:48px;
margin:0 auto;
}
#boite_deploiement h5 { /*attributs des titres des boutons*/
position:relative;
z-index:8; /*à ajuster en fonction de la position en hauteur de l'élément*/
font-weight:normal; /* ou bold */
text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.4); /*ombre portée du texte, peut être supprimé*/
font-size:1.6em; /*taille du texte*/
border-bottom:1px solid #555555; /*bordure du bouton : épaisseur, nature, couleur*/
border-top:1px solid #aaaaaa; /*bordure haute plus claire, peut être supprimée*/
background:#888888; /*couleur de fond si celle ci-dessous n'est pa reconnue par le navigateur*/
background:linear-gradient(#727272 0%, #CDCDCD 35%, #727272 100%); /*couleur de fond avec dégradé -du haut 0% vers le bas 100%-*/
border-radius:8px; /*arrondis*/
box-shadow: 0 0 5px rgba( 0, 0, 0, 0.8),
            0 -1px 0 rgba( 255, 255, 255, 0.4); /*ombre portée des boutons, peut être supprimée ou simplifiée*/
}
#boite_deploiement h5 a { /*attributs des liens sur les boutons*/
display:block;
padding:12px; /*marges intérieures des boutons*/
text-align:center; /*alignement du texte : left center right*/
color:#333333; /*couleur du texte*/
border-radius:8px; /*arrondis : même valeur que ci-dessus IMPORTANT*/
text-decoration:none; /*... ou ce que l'on veut*/
}
#boite_deploiement h5 a:hover { /*attributs des liens survolés sur les boutons*/
font-weight:normal; /* ou bold */
border-top:1px solid rgba( 0, 0, 0, 0.3); /*bordure haute plus foncée au survol, peut être supprimée*/
box-shadow: 0 4px 5px rgba( 0, 0, 0, 0.8),
            0 -1px 1px rgba( 0, 0, 0, 0.8); /*ombre portée des boutons au survol, peut être supprimée ou simplifiée*/
color:#111111; /*couleur du texte au survol*/            
}
.deploiement { /*Bouton et Bandeau déroulant*/
width:40%; /*largeur du bouton et du bandeau déroulant*/
height:1px; /*IMPORTANT*/
float:left;
margin:0 4%; /*marges extérieures des boutons et bandeaux déroulants*/
}
.deploiement div { /*Attributs du Bandeau déroulant*/
position:relative;
z-index:7; /*à ajuster en fonction de la position en hauteur de l'élément*/
background:linear-gradient(rgba( 0, 0, 0, 0.6), rgba( 0, 0, 0, 1.0)); /*fond dégradé sur l'opacité du noir*/
padding:10px; /*marges intérieures du bandeau déroulant*/
margin-top:-40px; /*marge extérieure haute du bandeau déroulant, à ajuster pour être légèrement couvert par le bouton*/
font-size:1em; /*taille du texte*/
color:#eeeeee; /*couleur du texte*/
border-radius:0px 0px 8px 8px; /*arrondis du bandeau déroulant, ici seulement en bas*/
transform:scaleY(0); /*échelle 0 : donc non visible*/
transform-origin:50% 0; /*déroulement au milieu à partir du haut*/
transition:all 0.5s ease; /*vitesse et mode de transition ease, linear, ease-in, ease-out...*/
}
.deploiement:hover div { /*Attributs du Bandeau déroulant au survol du bouton et du bandeau*/
transform:scaleY(1); /*échelle 1 : donc visible*/
}
.deploiement div p, .deploiement div p a, .deploiement div p a:hover { /*IMPORTANT : ne pas modifier*/
background:transparent;
padding:0;
}

#boite_deploiement2 { /*espace qui contient les différents boutons à déployer : 2ème ligne horizontale*/
width:96%; /*largeur de tous les boutons : ici un seul bouton*/
height:48px;
margin:0 auto;
}
#boite_deploiement2 h5 { /*attributs des titres des boutons*/
position:relative;
z-index:6; /*à ajuster en fonction de la position en hauteur de l'élément*/
font-weight:normal; /* ou bold */
font-size:1.4em; /*taille du texte*/
border:1px solid #FF8000; /*bordure du bouton : épaisseur, nature, couleur*/
background:#FFFF80; /*couleur de fond*/
border-radius:8px; /*arrondis*/
}
#boite_deploiement2 h5 a { /*attributs des liens sur les boutons*/
display:block;
padding:12px; /*marges intérieures des boutons*/
text-align:left; /*alignement du texte : left center right*/
color:#333333; /*couleur du texte*/
border-radius:8px; /*arrondis : même valeur que ci-dessus IMPORTANT*/
text-decoration:none; /*... ou ce que l'on veut*/
}
#boite_deploiement2 h5 a:hover { /*attributs des liens survolés sur les boutons*/
font-weight:normal; /* ou bold */
color:#111111; /*couleur du texte au survol*/            
}
.deploiement2 { /*Bouton et Bandeau déroulant*/
width:96%; /*largeur du bouton et du bandeau déroulant : ici la largeur totale*/
height:1px; /*IMPORTANT*/
float:left;
margin:0 0; /*marges extérieures des boutons et bandeaux déroulants*/
}
.deploiement2 div { /*Attributs du Bandeau déroulant*/
position:relative;
z-index:5; /*à ajuster en fonction de la position en hauteur de l'élément*/
background:#131313; /*couleur du fond*/
padding:10px; /*marges intérieures du bandeau déroulant*/
margin-top:-40px; /*marge extérieure haute du bandeau déroulant, à ajuster pour être légèrement couvert par le bouton*/
font-size:1em; /*taille du texte*/
color:#FFFF80; /*couleur du texte*/
border-radius:0px 0px 8px 8px; /*arrondis du bandeau déroulant, ici seulement en bas*/
transform:scaleY(0); /*échelle 0 : donc non visible*/
transform-origin:50% 0; /*déroulement au milieu à partir du haut*/
transition:all 0.5s ease; /*vitesse et mode de transition ease, linear, ease-in, ease-out...*/
}
.deploiement2:hover div { /*Attributs du Bandeau déroulant au survol du bouton et du bandeau*/
transform:scaleY(1); /*échelle 1 : donc visible*/
}
.deploiement2 div p, .deploiement2 div p a, .deploiement2 div p a:hover { /*IMPORTANT : ne pas modifier*/
background:transparent;
padding:0;
}

#boite_deploiement3 { /*espace qui contient les différents boutons à déployer : 3ème ligne horizontale*/
width:96%; /*largeur de tous les boutons : ici un seul bouton*/
height:48px;
margin:0 auto;
}
#boite_deploiement3 h5 { /*attributs des titres des boutons*/
position:relative;
z-index:4; /*à ajuster en fonction de la position en hauteur de l'élément*/
font-weight:normal; /* ou bold */
font-size:1.4em; /*taille du texte*/
border:1px solid #FF8000; /*bordure du bouton : épaisseur, nature, couleur*/
background:#A6FFFF; /*couleur de fond*/
border-radius:8px; /*arrondis*/
}
#boite_deploiement3 h5 a { /*attributs des liens sur les boutons*/
display:block;
padding:12px; /*marges intérieures des boutons*/
text-align:left; /*alignement du texte : left center right*/
color:#333333; /*couleur du texte*/
border-radius:8px; /*arrondis : même valeur que ci-dessus IMPORTANT*/
text-decoration:none; /*... ou ce que l'on veut*/
}
#boite_deploiement3 h5 a:hover { /*attributs des liens survolés sur les boutons*/
font-weight:normal; /* ou bold */
color:#111111; /*couleur du texte au survol*/            
}
.deploiement3 { /*Bouton et Bandeau déroulant*/
width:96%; /*largeur du bouton et du bandeau déroulant : ici la largeur totale*/
height:1px; /*IMPORTANT*/
float:left;
margin:0 0; /*marges extérieures des boutons et bandeaux déroulants*/
}
.deploiement3 div { /*Attributs du Bandeau déroulant*/
position:relative;
z-index:3; /*à ajuster en fonction de la position en hauteur de l'élément*/
background:#3F3F3F; /*couleur du fond*/
padding:10px; /*marges intérieures du bandeau déroulant*/
margin-top:-40px; /*marge extérieure haute du bandeau déroulant, à ajuster pour être légèrement couvert par le bouton*/
font-size:1em; /*taille du texte*/
color:#A6FFFF; /*couleur du texte*/
border-radius:0px 0px 8px 8px; /*arrondis du bandeau déroulant, ici seulement en bas*/
transform:scaleY(0); /*échelle 0 : donc non visible*/
transform-origin:50% 0; /*déroulement au milieu à partir du haut*/
transition:all 0.5s ease; /*vitesse et mode de transition ease, linear, ease-in, ease-out...*/
}
.deploiement3:hover div { /*Attributs du Bandeau déroulant au survol du bouton et du bandeau*/
transform:scaleY(1); /*échelle 1 : donc visible*/
}
.deploiement3 div p, .deploiement3 div p a, .deploiement3 div p a:hover { /*IMPORTANT : ne pas modifier*/
background:transparent;
padding:0;
}

#boite_deploiement4 { /*espace qui contient les différents boutons à déployer : 4ème ligne horizontale*/
width:96%; /*largeur de tous les boutons : ici un seul bouton*/
height:48px;
margin:0 auto;
}
#boite_deploiement4 h5 { /*attributs des titres des boutons*/
position:relative;
z-index:2; /*à ajuster en fonction de la position en hauteur de l'élément*/
font-weight:normal; /* ou bold */
font-size:1.4em; /*taille du texte*/
border:1px solid #FF8000; /*bordure du bouton : épaisseur, nature, couleur*/
background:#AEFFAE; /*couleur de fond*/
border-radius:8px; /*arrondis*/
}
#boite_deploiement4 h5 a { /*attributs des liens sur les boutons*/
display:block;
padding:12px; /*marges intérieures des boutons*/
text-align:left; /*alignement du texte : left center right*/
color:#333333; /*couleur du texte*/
border-radius:8px; /*arrondis : même valeur que ci-dessus IMPORTANT*/
text-decoration:none; /*... ou ce que l'on veut*/
}
#boite_deploiement4 h5 a:hover { /*attributs des liens survolés sur les boutons*/
font-weight:normal; /* ou bold */
color:#111111; /*couleur du texte au survol*/            
}
.deploiement4 { /*Bouton et Bandeau déroulant*/
width:96%; /*largeur du bouton et du bandeau déroulant : ici la largeur totale*/
height:1px; /*IMPORTANT*/
float:left;
margin:0 0; /*marges extérieures des boutons et bandeaux déroulants*/
}
.deploiement4 div { /*Attributs du Bandeau déroulant*/
position:relative;
z-index:1; /*à ajuster en fonction de la position en hauteur de l'élément*/
background:#585858; /*couleur du fond*/
padding:10px; /*marges intérieures du bandeau déroulant*/
margin-top:-40px; /*marge extérieure haute du bandeau déroulant, à ajuster pour être légèrement couvert par le bouton*/
font-size:1em; /*taille du texte*/
color:#AEFFAE; /*couleur du texte*/
border-radius:0px 0px 8px 8px; /*arrondis du bandeau déroulant, ici seulement en bas*/
transform:scaleY(0); /*échelle 0 : donc non visible*/
transform-origin:50% 0; /*déroulement au milieu à partir du haut*/
transition:all 0.5s ease; /*vitesse et mode de transition ease, linear, ease-in, ease-out...*/
}
.deploiement4:hover div { /*Attributs du Bandeau déroulant au survol du bouton et du bandeau*/
transform:scaleY(1); /*échelle 1 : donc visible*/
}
.deploiement4 div p, .deploiement4 div p a, .deploiement4 div p a:hover { /*IMPORTANT : ne pas modifier*/
background:transparent;
padding:0;
}
</style>

Avec les mêmes code de surlignement que le tutoriel précédent, la structure du contenu des boutons et bandeaux.

<div id="boite_deploiement">
    <div class="deploiement">
        <h5><a href="#">
TITRE 1</a></h5>

        <div style="background:linear-gradient(rgba( 0, 0, 0, 0.6), rgba( 0, 0, 0, 1.0))">
            <p>
CONTENU 1</p>
        </div>
    </div>

    <div class="deploiement">
        <h5><a href="#">
TITRE 2</a></h5>

        <div style="background:linear-gradient(rgba( 0, 64, 128, 0.6), rgba( 0, 64, 128, 1.0))">
            <p>
CONTENU 2</p>
        </div>
    </div>
</div>

<div id="boite_deploiement2">
    <div class="deploiement2">
        <h5><a href="#">
Titre texte aléatoire A</a></h5>

        <div>
            <p>
Contenu Texte aléatoire A</p>
        </div>
    </div>
</div>

<div id="boite_deploiement3">
    <div class="deploiement3">
        <h5><a href="#">
Titre texte aléatoire B</a></h5>

        <div>
            <p>
Contenu Texte aléatoire B</p>
        </div>
    </div>
</div>

<div id="boite_deploiement4">
    <div class="deploiement4">
        <h5><a href="#">
Titre texte aléatoire C</a></h5>

        <div>
            <p>
Contenu Texte aléatoire C</p>
        </div>
    </div>
</div>

Pour plus d'informations ou d'aides pour utiliser ce dispositif, vous pouvez poster sur le forum de ce site.

(NB : Pour la seconde partie de cet article, avec ses 3 boutons superposés, il est sûr que, dans GuppY, en natif, les volets "accordéons" offrent des avantages non négligeables sur cette présente astuce wink.)


Date de création : 16/10/2016 @ 18:42
Catégorie : Astuces - Changements au survol
Page lue 1479 fois


Réactions à cet article

Réaction n°1 

par Alankozh le 29/05/2017 @ 09:45

Bonjour!

C'est vraiment super, il va falloir que je prenne des cours !! A mon age la tête commence à être vraiment pleine et quelquefois il y a des fuitessmileywink

Bonne journée

Alankozh en direct du bout de la Bretagne!coolcoolcoolcoolcool

Merci pour ton commentaire.
JD


Vous êtes ici :   Accueil » Boutons déroulants-2
Préférences

Se reconnecter :
Votre nom (ou pseudo) :
Votre mot de passe


  Nombre de membres 35 membres
Connectés :
( personne )
Snif !!!
Lettre d'information
Pour avoir des nouvelles de ce site, inscrivez-vous à notre Newsletter.
k44Wr3
Recopier le code :
11 Abonnés