Voici un tutoriel pour un menu original, élégant et en jQuery. Ce menu est en plusieurs slides sur lesquelles apparaîtra lorsque nous les survolez, un sous-menu ainsi une image de fond différente. Ce menu est livré avec des possibilités de configuration, telles que la taille de l’image, l’effet de survol et d’états par défaut personnalisés.
La structure :
[pastacode manual= »%3Cdiv%20id%3D%22sbi_container%22%20class%3D%22sbi_container%22%3E%0D%0A%09%3Cdiv%20class%3D%22sbi_panel%22%20data-bg%3D%22images%2F1.jpg%22%3E%0D%0A%09%09%3Ca%20href%3D%22%23%22%20class%3D%22sbi_label%22%3EAbout%3C%2Fa%3E%0D%0A%09%09%3Cdiv%20class%3D%22sbi_content%22%3E%0D%0A%09%09%09%3Cul%3E%0D%0A%09%09%09%09%3Cli%3E%3Ca%20href%3D%22%23%22%3ESubitem%3C%2Fa%3E%3C%2Fli%3E%0D%0A%09%09%09%09%3Cli%3E%3Ca%20href%3D%22%23%22%3ESubitem%3C%2Fa%3E%3C%2Fli%3E%0D%0A%09%09%09%09%3Cli%3E%3Ca%20href%3D%22%23%22%3ESubitem%3C%2Fa%3E%3C%2Fli%3E%0D%0A%09%09%09%3C%2Ful%3E%0D%0A%09%09%3C%2Fdiv%3E%0D%0A%09%3C%2Fdiv%3E%0D%0A%09%3Cdiv%20class%3D%22sbi_panel%22%20data-bg%3D%22images%2F2.jpg%22%3E%0D%0A%09%09…%0D%0A%09%3C%2Fdiv%3E%0D%0A%09…%0D%0A%3C%2Fdiv%3E » provider= »manual » lang= »php »/]
Le script à personnaliser :
[pastacode manual= »%24(‘%23sbi_container’).bgImageMenu(%7B%0D%0A%09defaultBg%09%3A%20’images%2Fdefault.jpg’%2C%0D%0A%09menuSpeed%09%3A%20300%2C%0D%0A%09border%09%09%3A%201%2C%0D%0A%09type%09%09%3A%20%7B%0D%0A%09%09mode%09%09%3A%20’verticalSlideAlt’%2C%0D%0A%09%09speed%09%09%3A%20450%2C%0D%0A%09%09easing%09%09%3A%20’easeOutBack’%0D%0A%09%7D%0D%0A%7D)%3B » provider= »manual » lang= »php »/]
J’ai préparé et testé pour vous une démo avec mes photos personnelles. Le fichier compressé est hébergé aussi sur mon serveur : Télécharger ce Menu en slide
Qu’en pensez-vous ?
Mise à part un petit default de css (celons moi)
le background-color:black est des trop au survol de la souris.
S’est voyant et surtout dommage, ça gâche un peu le rendu (esthétique)
Mais mise a part ça s’est un plugin assez sympa.