Effet zoom sur les liens de la Navbar

[LuciDreams]

Bonjour,

très inspiré par le nouveau thème du FDF j'aimerai savoir comment avoir un effet similaire sur ma Navbar, sachant que les liens sont ancrés dans des images.

Merci

[ZekillerPhoenix]

Tu veut tout le CSS que j'ai mis sur mon site va voir : http://lagazette.superforum.fr/

Si sa te plait je te donne mon CSS j'ai juste enlever ce que j'aimait pas ^^

[LuciDreams]

Je veux bien le css, mais j'aimerai savoir s'il s'applique également pour un menu composé d'images comme sur mon forum

[ZekillerPhoenix]

Je ne sais pas mais tien :

Code:

body {
    background: url("http://hpics.li/6b241c5") repeat-x scroll 0 0 #D8E9F6;
    padding: 0;
}
div#wrap {
    background-color: #FBFBFB;
    background-image: url("http://2img.net/i/fa/optimisation_fdf/fr/bg_wrap.png");
    background-position: center bottom;
    background-repeat: repeat-x;
    border-color: -moz-use-text-color #FF0000 #e00303;
    border-top: 0 none;
    box-shadow: 1px 1px 10px;
    padding: 0;
    width: 88%;
}
.headerbar .corners-top {
    display: none;
}
#content-container div#content {
    margin-right: 10px;
}
#content-container div#left {
    margin-left: 11px;
    margin-right: 15px;
}
#page-header .navbar {
    background: url("http://2img.net/i/fa/optimisation_fdf/fr/bg_nav.png") repeat-x scroll center top #FBFBFB;
}
ul.navlinks a.mainmenu {
    -moz-transition-duration: 500ms;
    color: #FFFFFF;
    font-size: 11px;
    outline: medium none;
    text-shadow: 1px 1px 2px #000000;
}
ul.navlinks a.mainmenu:hover {
    color: #FFFF71;
    font-size: 13px;
    font-weight: 700;
    margin-left: 6px;
    margin-right: -1px;
    text-shadow: 1px 1px 10px;
}
ul.navlinks {
    background: url("http://2img.net/i/fa/fdf3/bg_cat.png") repeat-x scroll 0 0 #1675BC;
    border-radius: 0 0 7px 7px;
    border-top: 1px solid #FFFFFF;
    bottom: 9px;
    height: 26px;
    position: relative;
    text-align: center;
}
ul.navlinks span.new-message {
    -moz-transform: rotate(-4deg);
    background: url("http://2img.net/i/fa/email.gif") no-repeat scroll right top transparent;
    color: #FFCC00;
    padding-right: 2em;
}
.quick_connex {
    box-shadow: 0 0 10px !important;
    padding: 5px;
    position: absolute;
    right: 200px;
    top: 185px;
    width: 160px;
}
.quick_connex .connec_close {
    bottom: 3px;
    float: right;
    left: 5px;
    position: relative;
}
#follow_fdf {
    background: url("http://2img.net/i/fa/optimisation_fdf/fr/followus.png") no-repeat scroll 0 5px transparent;
    float: left;
    padding-left: 155px;
}
#follow_fdf img {
    -moz-transition-duration: 400ms;
    max-height: 50px;
    vertical-align: middle;
}
#follow_fdf img:hover {
    -moz-transform: rotate(-10deg);
}
.topiclist.forums dd.lastpost {
    background-color: #DCEAF5;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 1px 1px 1px #FFFFFF;
    margin: 6px 13px;
}
dd.lastpost a img:hover {
    -moz-transform: rotate(10deg);
}
.table-title, .table-title h2 {
    font-size: 12px;
    text-shadow: 1px 1px 1px #000000;
}
#left .module, #profile-advanced-right .module, #postingbox.panel, .panel.introduction, .panel.loginPanel, .portal .module {
    background-image: url("http://2img.net/i/fa/optimisation_fdf/fr/bg_pannel.png");
    background-position: center bottom;
    background-repeat: repeat-x;
    border: 1px solid #C3E0F1;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 1px 1px 1px;
    margin: 3px 1px;
    padding-bottom: 8px;
    padding-top: 4px;
}
#left .module span.corners-bottom, #left .module span.corners-top, #postingbox span.corners-bottom, #postingbox span.corners-top, #profile-advanced-right .module span.corners-bottom, #profile-advanced-right .module span.corners-top, .panel.introduction span.corners-bottom, .panel.introduction span.corners-top, .panel.loginPanel span.corners-bottom, .panel.loginPanel span.corners-top, .portal .module span.corners-bottom, .portal .module span.corners-top {
    display: none;
}
li.header dd, li.header dt {
    font-size: 10px;
    text-align: center;
    text-transform: capitalize;
}
ul.forums dd {
    border-left: 0 none;
}
ul.topiclist dd.dterm {
    width: 62%;
}
dd.posts, dd.topics, dd.views {
    width: 6%;
}
dd.lastpost {
    width: 21%;
}
ul.topics dd.dterm, ul.topics dt {
    width: 50%;
}
ul.topics dd.posts, ul.topics dd.topics, ul.topics dd.views {
    width: 8%;
}
ul.topics dd.lastpost {
    width: 20%;
}
h1.page-title a {
    background: url("http://2img.net/i/fa/optimisation_fdf/fr/bg_posttitle.png") no-repeat scroll 0 0 transparent;
    display: block;
    font-size: 0.9em;
    font-style: italic;
    height: 35px;
    padding-left: 30px;
    text-shadow: 1px 1px 2px #ADD8E6;
}
p.author {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #C3E0F1;
    border-radius: 0 6px 6px 0;
    color: #232323;
    left: -11px;
    margin-top: 7px;
    padding-left: 3px;
    padding-top: 3px;
    position: relative;
    width: 275px;
}
.post .corners-bottom, div.post .corners-top {
    display: none;
}
div.post {
    background-image: url("http://2img.net/i/fa/optimisation_fdf/fr/bg_post.png") !important;
    background-position: center bottom;
    background-repeat: repeat-x;
    border: 1px solid #C3E0F1;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 1px 1px 1px;
    margin: 8px 1px;
    padding-bottom: 8px;
    padding-top: 4px;
}
div.post.online.st-answer, div.post.st-answer {
    background-image: url("http://2img.net/i/fa/optimisation_fdf/fr/bg_post_staff.png") !important;
    background-position: right bottom;
    background-repeat: no-repeat;
}
.postbody h2.topic-title {
    font-size: 1.4em;
    width: 220px;
}
.postbody h2.topic-title img {
    float: left;
    margin-right: 5px;
}
.postbody h2.topic-title a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
ul.profile-icons li img {
    -moz-transition-duration: 400ms;
    opacity: 0.7;
}
ul.profile-icons li img:hover {
    opacity: 1;
}
ul.profile-icons li {
    margin: 0 2px;
}
ul.profile-icons {
    margin-top: 4px;
}
div.post p.right {
    position: relative;
    top: 10px;
}
.content blockquote {
    background: url("http://i42.servimg.com/u/f42/09/02/12/09/commen10.png") no-repeat scroll 4px 9px #FBFBFB;
    border: 1px solid #00A5CD;
    box-shadow: 0 1px 3px;
    color: #006699;
    margin-left: 10px;
    margin-right: 10px;
}
dl.codebox {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #00A5CD;
    box-shadow: 0 1px 3px;
    margin: 3px 10px;
}
dl.codebox dt {
    background: url("http://i42.servimg.com/u/f42/09/02/12/09/script10.png") no-repeat scroll 0 0 transparent;
    border: 0 none;
    color: #0372BE;
    font-size: 0.9em;
    padding-left: 22px;
    text-transform: none;
}
dl.codebox.spoiler dt {
    background: none repeat scroll 0 0 transparent;
    padding-left: 3px;
}
dl.codebox dt a {
    float: right;
}
blockquote dl.codebox {
    background-color: #FBFBFB;
    box-shadow: 0 0 1px;
}
dl.codebox code {
    color: #000000;
    font-family: Monaco,'DejaVu Sans Mono','Bitstream Vera Sans Mono','Lucida Console',monospace;
    font-size: 13px;
    padding: 2px;
}
#search-box input.button2, a.button2, input.button1, input.button2 {
    background-color: #F5F5F5;
    background-image: url("http://2img.net/i/fa/optimisation_fdf/fr/bg_buttons.png");
    background-repeat: repeat-x;
    border: 1px solid #C3E0F1;
    border-radius: 2px 2px 2px 2px;
    box-shadow: 1px 1px 1px;
    color: #666666 !important;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    height: 24px;
    line-height: 27px;
    margin: 5px 6px;
    padding: 0 8px !important;
    text-align: center;
}
#search-box input.button2:hover, a.button1:hover, a.button2:hover, button.button2:hover, input.button1:hover, input.button2:hover {
    background-position: 0 100%;
    border: 1px solid #00A5CD !important;
    box-shadow: 1px 1px 5px !important;
    color: #00A5CD !important;
}
input[type="text"], input[type="password"], select, textarea {
    border: 1px solid #00A5CD !important;
    box-shadow: 1px 1px 1px #FFFFFF;
}
input[type="text"]:hover, input[type="password"]:hover, textarea:hover {
    border: 1px solid #FFB964 !important;
    box-shadow: 1px 1px 3px #FFB964;
}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
    border: 1px solid #FF8A00 !important;
    box-shadow: 1px 1px 5px #FF8A00 !important;
}
#postingbox {
    margin-bottom: 10px !important;
}
#profile-advanced-details {
    background: url("http://2img.net/i/fa/optimisation_fdf/fr/bg_fdf.png") repeat-x scroll 0 1px #D8E9F6;
}
#profile-advanced-details #cp-main h1 {
    color: #FFFFFF;
    margin-top: 0;
    text-shadow: 1px 1px 2px #FFFFFF;
}
#profile-tab-field-profil div.separator {
    border-bottom: 1px dashed #00A5CD;
}
#profile-tab-field-profil dl dt {
    width: 16em;
}
#profile-tab-field-profil dl dd {
    margin-left: 16em;
}
#tabs a {
    background-color: #8BBFE6;
    border-radius: 4px 4px 0 0;
    margin: 0 1px;
}
#tabs a span {
    color: #FFFFFF;
}
#tabs a:hover {
    background-color: #59B9D3 !important;
    background-position: 0 -70px;
}
#tabs a:hover span {
    background-position: 100% -70px;
    color: #FFFFFF !important;
}
#tabs .activetab a {
    background: url("http://2img.net/i/fa/optimisation_fdf/fr/bg_tabs_profil.png") repeat-x scroll 0 0 transparent;
    border-bottom: 0 none;
}
#tabs .activetab a span {
    color: #FFFFFF;
}
#tabs .activetab a span:hover {
    color: #FFFF00;
}
#tabs #new-message-link a {
    background: none repeat scroll 0 0 transparent !important;
}
#page-footer .navbar {
    background: url("http://im1.all-up.com/i/img/act_bottom.png") no-repeat scroll right top transparent;
    height: 65px;
    padding-top: 21px;
}
.img-whois {
    float: right;
}
ul.linklist li.rightside {
    padding-right: 85px;
}
.fade {
    background: -moz-linear-gradient(left center , #EBEADD 0%, rgba(235, 234, 221, 0) 100%) repeat scroll 0 0 transparent;
    display: inline-block;
}
.blur {
    color: #DDDDDD;
    display: inline-block;
    text-shadow: 0 0 6px #AAAAAA;
}
.flipH {
    -moz-transform: scale(-1, 1);
    display: inline-block;
}
.flipV {
    -moz-transform: scale(1, -1);
    display: inline-block;
}
blockquote {
    background: url("http://2img.net/i/fa/prosilver/quote.gif") no-repeat scroll 6px 8px #EBEADD;
    border: 1px solid #DBDBCE;
    font-size: 0.95em;
    margin: 1em 1px 1em 25px;
    overflow: hidden;
    padding: 5px;
}
blockquote div {
    margin-left: 20px;
}
blockquote blockquote {
    background-color: #EFEED9;
    font-size: 1em;
    margin: 0.5em 1px 0 15px;
}
blockquote blockquote blockquote {
    background-color: #EBEADD;
}
blockquote cite {
    display: block;
    font-size: 0.9em;
    font-style: normal;
    font-weight: 700;
}
blockquote cite cite {
    font-size: 1em;
}
blockquote.uncited {
    padding-top: 25px;
}
ul {
    list-style-type: none;
}
ul.ul-icons {
    float: left;
    margin: 0 10px;
}
* html input, * html select, * html table {
    font-size: 100%;
}
* html hr {
    margin: 0;
}
a:link {
    color: #0372BE;
    text-decoration: none;
}
a:visited {
    color: #0372BE;
    text-decoration: none;
}
a:active {
    color: #003BA9;
    text-decoration: underline;
}
a:hover {
    color: #FF8A00;
    text-decoration: none;
}
a.forumtitle {
    color: #0372BE;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 1.2em;
    font-weight: 700;
    text-decoration: none;
}
a.forumtitle:hover {
    color: #FF8A00;
    text-decoration: underline;
}
a.forumtitle:active {
    color: #003BA9;
}
a.topictitle {
    color: #0372BE;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 1.1em;
    font-weight: 700;
    text-decoration: none;
}
div.topic-title-container {
    display: inline;
}
.topic-title {
    display: inline;
    font-size: 12px;
    text-align: left;
}
a.topictitle:hover {
    color: #FF8A00;
    text-decoration: underline;
}
a.topictitle:active {
    color: #003BA9;
}
.headerbar {
    background-color: #1675BC;
    background-image: url("http://2img.net/i/fa/fdf3/bg_header.jpg");
    background-repeat: repeat-x;
    margin-bottom: 4px;
    padding: 0 5px;
}
* html .headerbar {
    height: 1%;
}
* + html .headerbar {
    min-height: 1px;
}
#logo-desc {
    margin: 0;
    padding: 0;
    text-align: center;
}
#logo {
    float: none;
    padding: 5px;
}
a#logo:hover {
    text-decoration: none;
}
indexmenu {
    text-align: justify;
}

[LuciDreams]

Ah merci... je ne suis pas sur que tout le monde soit d'accord pour accéder à la feuille de style aussi facilement mais bon.. je vois la partie responsable de l'animation, mais je serais incapable de l'adapter à mon cas avec les images qui ne sont pas du texte.

Si quelqu'un passe par la ...
En tout cas merci

[LuciDreams]

Up

[LuciDreams]

Up

[LuciDreams]

UpiUp ^^

[Dr. Karlos]

Bonsoir,

Pour faire un zoom sur vos images, vous devrez modifier leur taille au passage de la souris avec du CSS.

Vous devrez utiliser ce code pour faire le zoom à insérer dans votre CSS (PA | Affichage | Images et couleurs | Couleurs | Feuille de style CSS):

Code:

ID DE L'IMAGE  {
width: LARGEUR;
height: HAUTEUR;
}

ID DE L'IMAGE {
height: LARGEUR AU PASSAGE;
width: HAUTEUR AU PASSAGE;}

En premier lieu, voici les différents identifiants (ID) des images dans la barre de navigation;

#i_icon_mini_index = image du lien Index
#i_icon_mini_calendar = image du lien Calendrier
#i_icon_mini_portal = image du lien Portail
#i_icon_mini_faq = image du lien FAQ
#i_icon_mini_search = image du lien Rechercher
#i_icon_mini_members = image du lien Membres
#i_icon_mini_groups = image du lien Groupes
#i_icon_mini_profile = image du lien Profil
#i_icon_mini_message = image du lien MP
#i_icon_mini_new_message = image du lien Nouveaux MP
#i_icon_mini_logout = image du lien Déconnexion
#i_icon_mini_login = image du lien Connexion
#i_icon_mini_register = image du lien S'enregistrer

Vous devrez donc remplacer ID DE L'IMAGE par un identifiant se trouvant plus haut. Par la suite, le premier bout du code correspond aux dimensions originales de votre image. Le deuxième bout du code correspond aux dimensions de votre image après le passage de la souris.

L'opération est à répéter pour chaque image.


Cordialement.

[LuciDreams]

Merci beaucoup, pour l'ID dois-je garder le # devant ? et à en voir le code, je suppose que la transition se fera instantanée, j'aimerai une certaine transition entre les deux tailles d'images. Un peu comme le menu de ce forum, le menu semble vivre dans son intégralité. Mais alors peut être est-ce parce que c'est du texte donc l'animation est plus simple à mettre en œuvre ? Grâce au membres ayant posté précédemment j'ai trouvé le css lié à cette effet, mais alors comment remplacer les images de mon menu, par du texte ?

Voilà deux chemins qui s'offrent à moi. Le second semble peut être plus simple ?

merci

[Dr. Karlos]

Re,

Vous devez effectivement garder le dièse.

À voir le forum dans votre profil, vous avez intégré dans votre CSS un code "retardant" les animations, ce qui fait qu'elles se fait graduellement.

Pour la deuxième option, vous devez retirer les images de votre barre de navigation présentes dans votre panneau d'administration comme ceci:
> PA | Affichage | Images et couleurs | Gestion des images | Mode avancé | Général et navigation

Vous devrez aussi autoriser le texte dans votre barre en allant dans votre panneau d'administration comme ici:
> PA | Affichage | En-tête et navigation

Afficher seulement des images dans la barre des liens : Cochez "Non".


Cordialement.

[LuciDreams]

Merci, je vais donc procéder avec la seconde solution, je vous tiens au courant de l'avancement, j'aimerai juste savoir qu'elle ID. attribuer pour modifier le style d'écriture de l'ensemble des liens du menu.

Merci

[Dr. Karlos]

Re,

Bien sûr. Il s'agit de cette classe:

Code:

ul.navlinks a.mainmenu {
}

Cordialement.

[LuciDreams]

Parfait, tout est ok ! merci