michel.pageperso crée

Bien entendu, nous reprenons les fichiers créés précédemment. Vous souvenez-vous? Lors de la préparation pour la mise en place des boutons "3D" pour le menu de navigation, nous avions rendu le bloc > sous-menu invisible. Maintenant, il nous faut rendre ce bloc visible tout simplement en supprimant les lignes de code: #menu ul li ol li {display:none;}
N'oubliions pas de créer un nouveau fichier .CSS et de lier à notre fichier .HTML d'exemple.
Maintenant, nous allons donner au bloc > sous-menu (pour nous #menu ul li ol) un aspect se rapprochant du style des boutons "3D". Souvenons nous que la plupart héritent des propriétés de leurs pères; il faudra donc annuler ces propriétés par des background:none;border:0;border-radius:0;box-shadow:0 0 0 0; et pour se simplifier l'existence, n'hésitons pas à copier-coller... Voici le code des sous-menus:
#menu ul li ol{position:absolute;width:105px;margin-left:-10px;margin-top:5px; background: rgb(122,188,255); /* Old browsers */ background: -moz-linear-gradient(top, rgba(122,188,255,1) 0%, rgba(11,123,234,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(122,188,255,1)), color-stop(100%,rgba(11,123,234,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(11,123,234,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(11,123,234,1) 100%); /* Opera 11.10+ */ border-radius:0 0 7px 7px; border:1px solid rgba(64,150,238,.7); box-shadow:0 0 10px rgba(64,150,238,.7),0 -1px 0 rgba(122,188,255,.7) inset;} #menu ul li ol li{margin:0;padding:2px 10px;background:none;border:0;border-radius:0;box-shadow:0 0 0 0;} #menu ul li ol li a{text-transform:none;font-weight:normal;font-size:.8em;} #menu ul li ol:hover{background: rgba(11,123,234,.8);} #menu ul li ol li:hover{background:none;border:0;border-radius:0;box-shadow:0 0 0 0;}

Le but du jeu est d'animer ces sous-menus en donnant l'impression qu'ils sortent des boutons "3D".
Pour cela, lorsque rien de ne passe, rendons le sous-menu (pour nous #menu ul li ol) invisible, tout-petit, caché derrière le bouton "3D" par opacity:0;height:0;margin-top:-30px;z-index:-5; puis lorsque notre souris survole le bouton (pour nous #menu ul li:hover), rendons le sous-menu visible, de bonne taille, placé juste à sa place par opacity:0;height:0;margin-top:-30px;z-index:-5;
Mais il nous faut animer ces effets. Pour ceci créons une transition entre les 2 états du sous-menu par -moz-transition:1s opacity,.5s height,1s margin-top,1s z-index;-webkit-transition:1s opacity,.5s height,1s margin-top,1s z-index;-o-transition:1s opacity,.5s height,1s margin-top,1s z-index;
Le code final des sous-menus sera:
/*sous-menu de navigation*/ #menu ul li ol{position:absolute;width:105px;margin-left:-10px;margin-top:5px; background: rgb(122,188,255); /* Old browsers */ background: -moz-linear-gradient(top, rgba(122,188,255,1) 0%, rgba(11,123,234,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(122,188,255,1)), color-stop(100%,rgba(11,123,234,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(11,123,234,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(11,123,234,1) 100%); /* Opera 11.10+ */ border-radius:0 0 7px 7px; border:1px solid rgba(64,150,238,.7); box-shadow:0 0 10px rgba(64,150,238,.7),0 -1px 0 rgba(122,188,255,.7) inset; opacity:0;height:0;margin-top:-30px;z-index:-5; -moz-transition:1s opacity,.5s height,1s margin-top,1s z-index;-webkit-transition:1s opacity,.5s height,1s margin-top,1s z-index;-o-transition:1s opacity,.5s height,1s margin-top,1s z-index;} #menu ul li:hover ol { opacity:1;height:75px;margin-top:5px;z-index:5; -moz-transition:1s opacity,.5s height,1s margin-top,1s z-index;-webkit-transition:1s opacity,.5s height,1s margin-top,1s z-index;-o-transition:1s opacity,.5s height,1s margin-top,1s z-index;} #menu ul li ol li{margin:0;padding:2px 10px;background:none;border:0;border-radius:0;box-shadow:0 0 0 0;} #menu ul li ol li a{text-transform:none;font-weight:normal;font-size:.8em;} #menu ul li ol:hover{background: rgba(11,123,234,.8);} #menu ul li ol li:hover{background:none;border:0;border-radius:0;box-shadow:0 0 0 0;}