Boostrap Dropdown Menu Example

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
Atlanta,GA
Jan,18
Washington,DC
Feb,04
NewYork,NY
Jan,10
SanFrancisco,CA
Apr,10
Boston,MA
Apr,10
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
...
<lirole="separator"class="divider"></li>
...
</ul>
Theseparatorwilllooklikethis:
3.3DisabledMenuItems
Adda
.disabled
classtoa
<li>
inthedropdowntodisablethelink.
1
2
3
4
5
...
<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

Boostrap Dropdown Menu Example

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Boostrap Dropdown Menu Example

Uploaded by

Copyright:

Available Formats

KnowledgeBase

ABOUT FABIO CIMO

Boostrap Dropdown Menu Example

THE CODE GEEKS NETWORK

ABOUT WEB CODE GEEKS

You might also like