8/28/2015

ResponsiveASP.NETMenuControlWithTwitterBootstrapTechBrij

HomeAboutProjectsTopics

GOOGLE

WEB

HOSTING

Build Your Online Presence With Google Sites. Free 30-Day Trial!

January25th,2013

ResponsiveASP.NETMenuControlWithTwitterBootstrap

http://techbrij.com/responsivemenutwitterbootstrapaspnet

1/13

8/28/2015

ResponsiveASP.NETMenuControlWithTwitterBootstrapTechBrij

Inthistutorial,WewillimplementcollapsingresponsivenavigationbarusingASP.NETmenucontroland
TwitterBootstrap.LetsstartwiththedefaultviewofASP.NETMenucontrolasfollows:
?
<asp:MenuID="NavigationMenu"runat="server"CssClass="menu"EnableViewState="false"
<Items>
<asp:MenuItemText="Home"ToolTip="Home"></asp:MenuItem>
<asp:MenuItemText="Music"ToolTip="Music">
<asp:MenuItemText="Classical"ToolTip="Classical"/>
<asp:MenuItemText="Rock"ToolTip="Rock"/>
<asp:MenuItemText="Jazz"ToolTip="Jazz"/>
</asp:MenuItem>
<asp:MenuItemText="Movies"ToolTip="Movies">
<asp:MenuItemText="Action"ToolTip="Action"/>
<asp:MenuItemText="Drama"ToolTip="Drama"/>
<asp:MenuItemText="Musical"ToolTip="Musical"/>
</asp:MenuItem>

</Items>
</asp:Menu>

http://techbrij.com/responsivemenutwitterbootstrapaspnet

2/13

8/28/2015

ResponsiveASP.NETMenuControlWithTwitterBootstrapTechBrij

1.WewillupdatethedefaultUIusingbootstrapframeworkasinaboveimage.ToinstallBootstrap,runthe
followingcommandinthePackageManagerConsole:
InstallPackageTwitter.Bootstrap
2.AddbootstrapCSSfilesinthepage
http://techbrij.com/responsivemenutwitterbootstrapaspnet

3/13

8/28/2015

ResponsiveASP.NETMenuControlWithTwitterBootstrapTechBrij

<linkhref="Content/bootstrap.min.css"rel="stylesheet"type="text/css"/>
<linkhref="Content/bootstrapresponsive.min.css"rel="stylesheet"type="text/css"/>
<styletype="text/css">
.nav
{
width:100%;
paddingleft:15px;
}

</style>

3.Ilikefixedtopnavigationbar,soweassignnavbarnavbarfixedtoptomenucontrolcssclass.
CssClass=navbarnavbarfixedtop
4.Forlist,usenavclasstolist
StaticMenuStyleCssClass=nav
5.Foractiveitem,useactiveclass
StaticSelectedStyleCssClass=active
6.Todisplaysubmenuasdynamicdropdown,weusedropdownmenuclass
DynamicMenuStyleCssClass=dropdownmenu
Nowwegetthelayoutasinthetopimageandthecodelooksasfollows
<asp:MenuID="NavigationMenu"runat="server"EnableViewState="false"
IncludeStyleBlock="false"Orientation="Horizontal"
CssClass="navbarnavbarfixedtop"
StaticMenuStyleCssClass="nav"
StaticSelectedStyleCssClass="active"
http://techbrij.com/responsivemenutwitterbootstrapaspnet

4/13

8/28/2015

ResponsiveASP.NETMenuControlWithTwitterBootstrapTechBrij

DynamicMenuStyleCssClass="dropdownmenu"
>
<Items>
<!menuitems>
</Items>
</asp:Menu>

ResponsiveMenu:
Forbackgroundimageandproperlayoutweputthemenuindiv(navbar>navbarinner>container).
Toimplementacollapsingresponsivenavbar,wrapyournavbarcontentinacontainingdiv,.nav
collapse.collapse,andaddthenavbartogglebutton,.btnnavbar.
<divclass="navbar">
<divclass="navbarinner">
<divclass="container">
<!.btnnavbarisusedasthetoggleforcollapsednavbarcontent>
<aclass="btnbtnnavbar"datatarget=".navcollapse"datatoggle="collapse">
<spanclass="iconbar"></span>
<spanclass="iconbar"></span>
<spanclass="iconbar"></span>
</a>
<!Everythingyouwanthiddenat940pxorless,placewithinhere>
<divclass="navcollapsecollapse">
<asp:MenuID="NavigationMenu"runat="server"EnableViewState="false"
IncludeStyleBlock="false"Orientation="Horizontal"
CssClass="navbarnavbarfixedtop"
StaticMenuStyleCssClass="nav"
StaticSelectedStyleCssClass="active"
DynamicMenuStyleCssClass="dropdownmenu">
<Items>
<asp:MenuItemText="Home"ToolTip="Home"></asp:MenuItem>
<asp:MenuItemText="Music"ToolTip="Music">
<asp:MenuItemText="Classical"ToolTip="Classical"/>
<asp:MenuItemText="Rock"ToolTip="Rock"/>
<asp:MenuItemText="Jazz"ToolTip="Jazz"/>
</asp:MenuItem>
http://techbrij.com/responsivemenutwitterbootstrapaspnet

5/13

8/28/2015

ResponsiveASP.NETMenuControlWithTwitterBootstrapTechBrij

<asp:MenuItemText="Movies"ToolTip="Movies">
<asp:MenuItemText="Action"ToolTip="Action"/>
<asp:MenuItemText="Drama"ToolTip="Drama"/>
<asp:MenuItemText="Musical"ToolTip="Musical"/>
</asp:MenuItem>
</Items>
</asp:Menu>
</div>
</div>
</div>
</div>
ASP.NETMenucreatesitsownstylesandclasseswhichcreatesprobleminBootstrapworking.Soweremove
somestylesusingjQuery.
$(".navli,.navlia,.navliul").removeAttr('style');

Toadddownarrowforsubmenuindication:
?
$(".dropdownmenu").parent().removeClass().addClass('dropdown');
$(".dropdown>a").removeClass().addClass('dropdowntoggle').append('<bclass="caret"></b>').attr('datatoggle'

ThereisnomouseovereventformobileandonclickofASP.NETmenucausespostback.Toavoidpostbackand
removeclickhandler:
$('.dropdowntoggle').attr('onclick','').off('click');

Nowonclickingparentmenuitem,submenuwillbedisplayed.
Hereistheoverallscriptstructure:
<scriptsrc="Scripts/jquery1.9.0.min.js"type="text/javascript"></script>

<scripttype="text/javascript">
$(function(){
//tofixcollapsemodewidthissue
http://techbrij.com/responsivemenutwitterbootstrapaspnet

6/13

8/28/2015

ResponsiveASP.NETMenuControlWithTwitterBootstrapTechBrij

$(".navli,.navlia,.navliul").removeAttr('style');

//fordropdownmenu
$(".dropdownmenu").parent().removeClass().addClass('dropdown');
$(".dropdown>a").removeClass().addClass('dropdowntoggle').append('<bclass="caret"></b>').attr('datato

//removedefaultclickredirecteffect
$('.dropdowntoggle').attr('onclick','').off('click');

});
</script>
<scriptsrc="Scripts/bootstrap.min.js"type="text/javascript"></script>

Hope,youenjoyit.

http://techbrij.com/responsivemenutwitterbootstrapaspnet

7/13