Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
9 mai 2012 3 09 /05 /mai /2012 00:00

 

 

Un menu qui se déplie ça te tente?
En voila un que je viens de mettre au point et ce sans prise de tête, une partie de HTML et une partie de CSS

Partie 1

À mettre dans le HTML de ton article en n'omettant pas de changer les liens et les titres des boites

<div class="ma_boite">
<div class="title_box">Première boite</div>
<div class="content_box" style="overflow: none;">Ici tu peux mettre un lien.</div>
</div>
<div class="ma_boite">
<div class="title_box">Seconde boite</div>
<div class="content_box" style="overflow: none;">Ici tu peux mettre un second lien.</div>
</div>
<div class="ma_boite">
<div class="title_box">troisième boite</div>
<div class="content_box" style="overflow: none;">Ici tu mets un troisième lien.</div>
</div>
<div class="ma_boite">
<div class="title_box">quatrième boite</div>
<div class="content_box" style="overflow: none;">Ici tu mets un quatrième lien.</div>
</div>


Tu peux évidement y mettre autant de boites que tu le désires, il te suffit de recopier à chaque fois  le codage

 

<div class="title_box">le titre</div>
<div class="content_box" style="overflow: none;">Le lien.</div>
</div>

 

Partie2

À mettre dans la CSS, tu peux modifier les couleurs, hauteurs etc

.ma_boite
{background-color:transparent;
width:250px;
height:20px;
overflow:hidden;
transition: height 1s;
-moz-transition: height 1s;
-webkit-transition: height 1s;
-o-transition: height 1s; 
}

.ma_boite:hover
{
height:150px;
}
.title_box
{
color:#FFFFFF;
background-color:#ae7eb0;
border: 1px solid #FFFFFF;
border-radius: 5px;
}
 
Et voilà le résultat


Poésie
Tutoriels pour photofiltre
Aide graphique pour blogs
Aide CSS et HTML

Partager cet article

Repost 0
Publié par Flo-Avril - dans Aide blog HTML CSS
commenter cet article

commentaires

Le Chevalier Dauphinois 05/05/2015 20:53

Bien le bonjour Princesse Flo
Je viens de créer une communauté sur le CSS et HTML
Je serais heureux de vous compter parmi nos membres
https://www.over-blog.com/community/trucs-et-astuces-en-css-et-html

danielle 20/07/2012 20:35

je saisis l'occasion de me faire expliquer le sigle CSS...? merci!

Agnès ❤ Petites Croix et Gourmandises ❤ 30/05/2012 15:11

voilà ça y est je l'ai fait pour mon modul tutos !! merci pour ces astuces !! j'ai aussi réussi à mettre les bords arrondis sur mes différents pages/articles/accueil ! bisettes

René-Pierre 10/05/2012 23:10

Bonsoir Flo,

Magnifique partage, nous trouvons que tu es très forte, pour mettre en ligne de tel programme.
Merci pour cette générosité qui fait partie de ta nature.
Nous sommes heureux d'avoir eu la chance de devenir ton ami.
Nos plus chaleureuses pensées pour vous deux...
Bisous, René et Florence

Marie Soleil 10/05/2012 14:36

Je n'ose pas imaginer ce que cela pourrait donner lol.

Bises et bonne journée.

Marie

j-michel 10/05/2012 13:41

bonjour flo ce menu déroulant je connais mais je n'ai jamais trouvais a l'employer super génial ton article passe une très bonne fin de journée a pluche bisouille

Dicentim 10/05/2012 11:00

Très bon jeudi à toi flo.
bisous
:-)

Sylvie 10/05/2012 08:30

merci pour cette possibilité. suis nullissime en informatique ...
belle journée
amicalement
sylvie

Paquerette 09/05/2012 21:23

bon, c'est peut être bien, mais je ne m'y risquerai pas, tu sais bien!!!
bisous et bonne soirée

Laurent 09/05/2012 20:13

Encore une aide qui va m'être précieuse pour améliorer mon blogsite...
Bonne Soirée ma chère Flo
Bisoux, Lolo

Eliane 09/05/2012 16:19

Hello Flo, ah mais c'est super , bravo je prend note , merci !!
assez gris ce mercredi mais pas froid
un bon café et ça ira > bisous

Valentine :0056: 09/05/2012 16:06

Génial ! Je garde ça sous le coude ; pour le moment je suis un peu dépassée. Bisous, Flo !

daphne44 09/05/2012 15:52

très utile , on a l'impression que c'est simple , mais je pense que c'est encore trop complexe pour moi
bonne journée Flo
bizzzz

Kri 09/05/2012 15:46

C'est sympa ... merci pour l'astuce
Mais il est le dessert? un menu sans dessert! :-O
;-)

canelle56 09/05/2012 14:18

Merci pour ce tutoriat
Bonne idée
Bises

Ymirose 09/05/2012 13:02

Merci pour toutes ces explications, Flo mais j'avoue ne pas avoir tout compris...il faudra que je relise ce billet, que je re-relise et que je revienne...Sourire...Bisous. Bel après-midi !

..Marithé :0010: 09/05/2012 12:42

ou la la compliqué tout ça ...roo bisousssss

dictionnaire 09/05/2012 11:26

Merci pour ce tutoriel

Agnès ❤ Petites Croix et Gourmandises ❤ 09/05/2012 11:01

merci pour cette astuce je la garde précieusement je me pencherai sur le sujet !bisettes

Jean 09/05/2012 10:42

Là, je suis dépassé.... Complètement largué !!!!

Un Sujet En Particulier ?

Sur ce blog il y a

Passe ta souris sur la première lettre de chaque ligne

Blogopotes

Cet ensemble de miniatures, représente mes amis, les personnes chez qui j'aime flâner et faire un petit coucou , laisser un commentaire chaque fois que j'en ai envie.

 

Si vous désirez vous y retrouver, laissez-moi un coucou à votre tour, je me ferai un plaisir de vous y accrocher et j'irai vous écrire une petite bafouille à mon tour.

Pose ton curseur sur les miniatures, tu verras apparaître les pseudonymes et tu auras le lien du blog

 

 

Alain TreiZe Aummani chtinoeil bubuneJoëlCannelle Dany Dix DomSimone Déesse GL katara PatriciaMamyAnnick Marie M-T Michel Nouche Patmamy QuichottineBigornette Nanou SpipAlainJeeretGabClnKinouLCDAndréla-cachinaM_PZip de loupTatarinetteAlinebikerMahinaFrançoisePaqueretteLaurentPatriarchGeoElianeValentineJ-P SilvestreMentaleJeanCricketValerieTiotTimiloKryNefertitiMartineTotoFancriSylfanfleur de lysBrenPhilippeZapiCloMichelOcecoolMartineRogerNadiaD@net

---------------------

Mon troisieme recueil

Thebook edition a classé mon recueil dans la catégorie adultes, certains de mes poèmes étant érotiques

Acheter Foucades en mots tressés

http://a-fleur-de-plume.eklablog.com/

Ah tu es là

Mon premier recueil de poésies

Un second recueil avec une meilleure présentation et de nouveaux poèmes,  vient de voir le jour .

N'hésitez pas à vous l'offrir ou à l'offrir pourquoi pas !

 

Le livre