Está en la página 1de 6

KnowledgeBase

Resources

JobBoard

JoinUs

About

Search...

NeedHELPwithCBPAPIS?
Looknofurther!CheckTSAisyourtopsolutionforallAPISneeds

ASP.NET

CLOUD

CSS

DEVOPS

HTML5

JAVASCRIPT

NOSQL

PHP

PYTHON

RUBY

WEB DEV

WEB SERVERS

WORDPRESS

META WCG

NeedHELPwith
CBPAPIS?

HomeCSSBootstrapBoostrapDropdownMenuExample

ABOUT FABIO CIMO


Fabioisapassionatestudentinwebtehnologiesincludingfrontend(HTML/CSS)andwebdesign.Helikesexploringasmuchas
possibleabouttheworldwidewebandhowitcanbemoreproductiveforusall.CurrentlyhestudiesComputerEngineering,atthe
sametimeheworksasafreelanceronbothwebprogrammingandgraphicdesign.

Looknofurther!CheckTSA
isyourtopsolutionforall
APISneeds

Boostrap Dropdown Menu Example


Postedby:FabioCimo inBootstrap December1st,2015

InthisexamplewereconsideringBootstrapdropdownmenus.Sometimesreferredto
asapulldownmenu,dropdownlist,ordropdownbox,adropdownmenuisalistof
itemsthatappearswhenclickingonabuttonortextselection.
Forexample,manyprogramshaveaFiledropdownmenuatthetopleftoftheir
screen.ClickingontheFiletextgeneratesanewmenuwithadditionaloptions.
Bootstraphascreateditsowndropdownmenu,whichisnormallytoggleable,
contextualmenufordisplayinglistsoflinksinyourpage.Bootstrap3isfocusedin
offeringthebasicelementsinafunctionalmannerandprovidingessentialstylingthat
youllmostprobablyneed.However,ifthatsnotenoughforyou,feelfreetobrowse
thewebforevenfancierdesigns.

WanttobeaBootsrapMaster?

NEWSLETTER

SubscribetoournewsletteranddownloadtheBootstrap
ProgrammingCookbookrightnow!

34998insidersarealreadyenjoying

InordertogetyoupreparedforyourBootstrapdevelopmentneeds,wehavecompiled
numerousrecipestohelpyoukickstartyourprojects.Besidesreadingthemonlineyou
maydownloadtheeBookinPDFformat!

Jointhemnowtogainexclusive
accesstothelatestnewsintheWeb

Emailaddress:
Youremailaddress

weeklyupdatesandcomplimentary
whitepapers!

developersworld,aswellasinsightsabout
HTML5,CSS,JavaScript,WordPressandothe
relatedtechnologies.

Emailaddress:
Youremailaddress

Signup
Signup

1.ProjectSetup
Thefollowingsetupisrequiredinordertocontinuewiththistutorial.

1.1BoostrapFolderStructure
First,downloadbootstrapfromhere.Next,createanewHTMLdocumentandmakesureyouhavethefollowingfolderstructureinyouproject
folder:

JOIN US

With 1,240,600
uniquevisitorsandover
500 authorsweare
placedamongthetopW
resourcesanddevelopm
sitesaround.Constantly
beingonthelookoutfor
partnersweencourage
youtojoinus.SoIfyou

haveablogwithuniqueandinterestingcontent
youshouldcheckoutourWCGpartnersprogram
YoucanalsobeaguestwriterforWebCode
Geeksandhoneyourwritingskills!

1.2HTMLSetup
Tostartcoding,includeBootstrapsbasictemplatecodeinsideyourmainHTML.ThiswillincludebasicHTMLtagsandlinksnecessarytolink
Bootstrapslibraries.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="utf8">
<metahttpequiv="XUACompatible"content="IE=edge">
<metaname="viewport"content="width=devicewidth,initialscale=1">
<title>BootstrapDropdownMenuExample</title>

<!Bootstrap>
<linkhref="css/bootstrap.min.css"rel="stylesheet">
</head>
<body>

<!jQuery(necessaryforBootstrap'sJavaScriptplugins)>
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!Includeallcompiledplugins(below),orincludeindividualfilesasneeded>
<scriptsrc="js/bootstrap.min.js"></script>
</body>
</html>

2.TheDefaultExample
ThemostbasicdropdownthatBootstrapoffersistheonethewrapsthedropdownstriggerandthedropdownmenuwithin
.dropdown

,oranotherelementthatdeclares
position: relative;

.ThenaddthemenusHTML.
01 <divclass="dropdown">
02 <buttonclass="btnbtndefaultdropdowntoggle"type="button"id="dropdownMenu1"datatoggle="dropdown"
ariahaspopup="true"ariaexpanded="true">
03 Dropdown
04 <spanclass="caret"></span>
05 </button>
06 <ulclass="dropdownmenu"arialabelledby="dropdownMenu1">
07 <li><ahref="#">Action</a></li>
08 <li><ahref="#">Anotheraction</a></li>
09 <li><ahref="#">Somethingelsehere</a></li>
10 <li><ahref="#">Separatedlink</a></li>
11 </ul>
12 </div>
Andthisishowthedropdownlookslike:

CAREER OPPORTUNITIES
PartTimeFrontEndWebDevelopment
InstructorGeneralAssembly
Austin,TX
Apr,10
PartTimeFrontEndWebDevelopment
InstructorGeneralAssembly
Atlanta,GA
Jan,18
PartTimeFrontEndWebDevelopment
InstructorGeneralAssembly
Washington,DC
Feb,04
PartTimeFrontEndWebDevelopment
InstructorGeneralAssembly
NewYork,NY
Jan,10
PartTimeFrontEndWebDevelopment
InstructorGeneralAssembly
SanFrancisco,CA
Apr,10
PartTimeFrontEndWebDevelopment
InstructorGeneralAssembly
Boston,MA
Apr,10
PartTimeFrontEndWebDevelopment
InstructorGeneralAssembly
Seattle,WA
Apr,10
WebContentManagementConsultantSogeti
Cincinnati,OH
Apr,08
WebContentConsultantIntermountain
Healthcare
SaltLakeCity,UT
Apr,26
JuniorWebDeveloperYMCAofSouthFlorida
FortLauderdale,FL
Apr,28
1

...

4393

Freelance

Keyword...

Fulltime

Location...
Country...

Intership
Parttime
All

FilterResults
jobsby

3.CasesandExamples
Thefollowingsectionexpandsthedefaultbasicoptionsofthedropdownbyaddingnewelementstoit.

3.1DropdownHeaders
Youcanoptionallyaddaheadertolabelsectionsofactionsinanydropdownmenu.
1
2
3
4
5

<ulclass="dropdownmenu"arialabelledby="dropdownMenu1">
...
<liclass="dropdownheader">Dropdownheader</li>
...
</ul>

Theheaderwilllooklikethis:

3.2DropdownDividers
Togrouplinks,youcanaddadividertoseparateseriesoflinksinadropdownmenu.
1
2
3
4
5

<ulclass="dropdownmenu"arialabelledby="dropdownMenu1">
...
<lirole="separator"class="divider"></li>
...
</ul>

Theseparatorwilllooklikethis:

3.3DisabledMenuItems
Adda
.disabled

classtoa
<li>

inthedropdowntodisablethelink.
1
2
3
4
5

<ulclass="dropdownmenu"arialabelledby="dropdownMenu1">
...
<liclass="disabledr">Disabledlink</li>
...
</ul>

Thedisabledlinkwilllooklikethis:

4.Didyouknow?
Itmightseemsurprising,butthereisalsoadropup,apartfromthetraditionaldropdown.Themarkupissomehowsimilar:
01 <divclass="dropup">
02 <buttonclass="btnbtndefaultdropdowntoggle"type="button"id="dropdownMenu2"datatoggle="dropdown"
ariahaspopup="true"ariaexpanded="false">
03 Dropup
04 <spanclass="caret"></span>
05 </button>
06 <ulclass="dropdownmenu"arialabelledby="dropdownMenu2">
07 <li><ahref="#">Action</a></li>
08 <li><ahref="#">Anotheraction</a></li>
09 <li><ahref="#">Somethingelsehere</a></li>
10 <li><ahref="#">Separatedlink</a></li>
11 </ul>
12 </div>
Asexpectedthedropupwouldshowabovethebutton:

5.Conclusion
Toconclude,Bootstrapdropdownisaneasywaytogrouplinksandmenuitemsinacompactbuteffectiveway.Bydefault,adropdownmenu
isautomaticallypositioned100%fromthetopandalongtheleftsideofitsparent.Ifyouwanttooverridethesesettings,usethededicated
classes
.dropdown-menu-right

and
.dropdown-menu-left

6.Download
Download
Youcandownloadthefullsourcecodeofthisexamplehere:BoostrapDropdownMenu

DoyouwanttoknowhowtodevelopyourskillsettobecomeaWeb
Rockstar?
SubscribetoournewslettertostartRockingrightnow!
TogetyoustartedwegiveyouourbestsellingeBooksforFREE!

1.BuildingwebappswithNode.js
2.HTML5ProgrammingCookbook
3.CSSProgrammingCookbook
4.AngularJSProgrammingCookbook
5.jQueryProgrammingCookbook
6.BootstrapProgrammingCookbook

andmanymore....

Emailaddress:
Youremailaddress

Signup

LEAVE A REPLY
Youremailaddresswillnotbepublished.Requiredfieldsaremarked*

Name*

Email*

Website

Signmeupforthenewsletter!
ReceiveEmailNotifications?
no,donotsubscribe

instantly

Or,youcansubscribewithoutcommenting.

PostComment

KNOWLEDGE BASE

HALL OF FAME

Courses

HTML5DragandDropExample

Resources

Javascriptcopytoclipboardexample

Tutorials

JavaScriptDocumentReadyExample

Whitepapers

JavaScriptForLoopExample

THE CODE GEEKS NETWORK

JavaScriptSortArrayExample
JavaScriptStringCompareexample

.NETCodeGeeks

JavaScriptSubmitFormExample

JavaCodeGeeks

JQueryAutocompleteWidgetExample

SystemCodeGeeks

SinglePageApps

WebCodeGeeks

TwitterBootstrapModalExample

ABOUT WEB CODE GEEKS

WCGs(WebCodeGeeks)isanindependentonlinecommunityfocusedoncreatingthe
ultimateWebdevelopersresourcecentertargetedatthetechnicalarchitect,technical
teamlead(seniordeveloper),projectmanagerandjuniordevelopersalike.WCGsserv
theWebdesigner,WebdeveloperandAgilecommunitieswithdailynewswrittenby
domainexperts,articles,tutorials,reviews,announcements,codesnippetsandopen
sourceprojects.

DISCLAIMER
AlltrademarksandregisteredtrademarksappearingonWebCodeGeeksarethe
propertyoftheirrespectiveowners.

WebCodeGeeksandallcontentcopyright20102016,ExelixisMediaP.C.|TermsofUse|PrivacyPolicy|Contact