ASP.NET MVC 5 + Bootstrap – col-md-* + Left Slide Panel Menu + Master Page
Menu.cshtml ( Partial View ) |
< div> <ul class="menulist"> <li class="menuitem">… …</li> … … </ul> </div> |
Style |
.container{ max-width:100% !important; } .menulist{ padding-left:0px; } .menuitem{ list-style-type:none; padding-left:10px; cursor:pointer; line-height:28px; } .menuitem:hover{ background-color:#00ff21; } #menubtn{ text-align:left; cursor:pointer; line-height:30px; } |
Page Content |
< div id="menubtn" style="float:left;">… Menu Item …</div> … … < div class="container body-content" style="width:100%;"> < div class="row"> < div id="menu" class="col-sm-2" style="display:none;"> @Html.Partial("Menu") </div> < div id="content" class="col-sm-12"> … … @RenderBody() … … </div> </div> </div> |
JavaScript |
$(document).ready(function () { $("#menubtn").click(function () { showhidemenu(); }); }); function showhidemenu() { if ($("#menu").is(":visible")) { $("#menu").fadeOut(); $("#content").addClass("col-sm-12"); if ($("#content").hasClass("col-sm-10")) $("#content").removeClass("col-sm-10"); } else { $("#menu").fadeIn(); $("#content").addClass("col-sm-10"); if ($("#content").hasClass("col-sm-12")) $("#content").removeClass("col-sm-12"); } } |