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 ?