Sélectionner une page

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

Florent Maillefaud

Un menu déroulant simple avec jQuery et CSS 1Webmaster à Sablons (Isère) / Création de sites internet WordPress.

Micro-entrepreneur depuis 2012, je vous propose la création ou la refonte de votre site internet sous WordPress et à votre image.

Que ce soit un site vitrine, un blog ou un site e-commerce pour votre entreprise ou association, laissez votre empreinte sur le web !

Share This