Voici un script jQuery d’un niveau très basique et sa mise en œuvre CSS.
Voici comment concevoir menu déroulant simple avec CSS, HTML et jQuery. Ce système vous aide à minimiser la liste des menus. Il suffit de jeter un coup d’oeil à ce script qui comporte très peu de lignes de code, l’utiliser et l’enrichir pour vos projets web.
Code html :
[pastacode manual= »%3Cdiv%20class%3D%22dropdown%22%3E%0D%0A%3Ca%20class%3D%22account%22%20%3EMy%20Account%3C%2Fa%3E%0D%0A%0D%0A%3Cdiv%20class%3D%22submenu%22%3E%0D%0A%3Cul%20class%3D%22root%22%3E%0D%0A%3Cli%20%3E%3Ca%20href%3D%22%23Dashboard%22%20%3EDashboard%3C%2Fa%3E%3C%2Fli%3E%0D%0A%3Cli%20%3E%3Ca%20href%3D%22%23Profile%22%20%3EProfile%3C%2Fa%3E%3C%2Fli%3E%0D%0A%3Cli%20%3E%3Ca%20href%3D%22%23settings%22%3ESettings%3C%2Fa%3E%3C%2Fli%3E%0D%0A%3Cli%20%3E%3Ca%20href%3D%22%23feedback%22%3ESend%20Feedback%3C%2Fa%3E%3C%2Fli%3E%0D%0A%3C%2Ful%3E%0D%0A%3C%2Fdiv%3E%0D%0A%0D%0A%3C%2Fdiv%3E » provider= »manual » lang= »php »/]
Code Javascript :
[pastacode manual= »%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.6.2%2Fjquery.min.js%0D%0A%22%3E%3C%2Fscript%3E%3B%0D%0A%3Cscript%20type%3D%22text%2Fjavascript%22%20%3E%0D%0A%24(document).ready(function()%0D%0A%7B%0D%0A%0D%0A%24(%22.account%22).click(function()%0D%0A%7B%0D%0Avar%20X%3D%24(this).attr(‘id’)%3B%0D%0Aif(X%3D%3D1)%0D%0A%7B%0D%0A%24(%22.submenu%22).hide()%3B%0D%0A%24(this).attr(‘id’%2C%20’0’)%3B%0D%0A%7D%0D%0Aelse%0D%0A%7B%0D%0A%24(%22.submenu%22).show()%3B%0D%0A%24(this).attr(‘id’%2C%20’1’)%3B%0D%0A%7D%0D%0A%0D%0A%7D)%3B%0D%0A%0D%0A%2F%2FMouse%20click%20on%20sub%20menu%0D%0A%24(%22.submenu%22).mouseup(function()%0D%0A%7B%0D%0Areturn%20false%0D%0A%7D)%3B%0D%0A%0D%0A%2F%2FMouse%20click%20on%20my%20account%20link%0D%0A%24(%22.account%22).mouseup(function()%0D%0A%7B%0D%0Areturn%20false%0D%0A%7D)%3B%0D%0A%0D%0A%2F%2FDocument%20Click%0D%0A%24(document).mouseup(function()%0D%0A%7B%0D%0A%24(%22.submenu%22).hide()%3B%0D%0A%24(%22.account%22).attr(‘id’%2C%20 »)%3B%0D%0A%7D)%3B%0D%0A%7D)%3B%0D%0A%3C%2Fscript%3E » provider= »manual » lang= »php »/]
Code CSS :
[pastacode manual= ».dropdown%0D%0A%7B%0D%0Acolor%3A%20%23555%3B%0D%0Amargin%3A%203px%20-22px%200%200%3B%0D%0Awidth%3A%20143px%3B%0D%0Aposition%3A%20relative%3B%0D%0Aheight%3A%2017px%3B%0D%0Atext-align%3Aleft%3B%0D%0A%7D%0D%0A.submenu%0D%0A%7B%0D%0Abackground%3A%20%23fff%3B%0D%0Aposition%3A%20absolute%3B%0D%0Atop%3A%20-12px%3B%0D%0Aleft%3A%20-20px%3B%0D%0Az-index%3A%20100%3B%0D%0Awidth%3A%20135px%3B%0D%0Adisplay%3A%20none%3B%0D%0Amargin-left%3A%2010px%3B%0D%0Apadding%3A%2040px%200%205px%3B%0D%0Aborder-radius%3A%206px%3B%0D%0Abox-shadow%3A%200%202px%208px%20rgba(0%2C%200%2C%200%2C%200.45)%3B%0D%0A%7D%0D%0A.dropdown%20li%20a%0D%0A%7B%0D%0Acolor%3A%20%23555555%3B%0D%0Adisplay%3A%20block%3B%0D%0Afont-family%3A%20arial%3B%0D%0Afont-weight%3A%20bold%3B%0D%0Apadding%3A%206px%2015px%3B%0D%0Acursor%3A%20pointer%3B%0D%0Atext-decoration%3Anone%3B%0D%0A%7D%0D%0A%0D%0A.dropdown%20li%20a%3Ahover%0D%0A%7B%0D%0Abackground%3A%23155FB0%3B%0D%0Acolor%3A%20%23FFFFFF%3B%0D%0Atext-decoration%3A%20none%3B%0D%0A%7D%0D%0Aa.account%0D%0A%7B%0D%0Afont-size%3A%2011px%3B%0D%0Aline-height%3A%2016px%3B%0D%0Acolor%3A%20%23555%3B%0D%0Aposition%3A%20absolute%3B%0D%0Az-index%3A%20110%3B%0D%0Adisplay%3A%20block%3B%0D%0Apadding%3A%2011px%200%200%2020px%3B%0D%0Aheight%3A%2028px%3B%0D%0Awidth%3A%20121px%3B%0D%0Amargin%3A%20-11px%200%200%20-10px%3B%0D%0Atext-decoration%3A%20none%3B%0D%0Abackground%3A%20url(icons%2Farrow.png)%20116px%2017px%20no-repeat%3B%0D%0Acursor%3Apointer%3B%0D%0A%7D%0D%0A.root%0D%0A%7B%0D%0Alist-style%3Anone%3B%0D%0Amargin%3A0px%3B%0D%0Apadding%3A0px%3B%0D%0Afont-size%3A%2011px%3B%0D%0Apadding%3A%2011px%200%200%200px%3B%0D%0Aborder-top%3A1px%20solid%20%23dedede%3B%0D%0A%7D » provider= »manual » lang= »php »/]
Voir une démo ici
Télécharger ce script ici
Commentaires