ASP.NET MVC 5 + Bootstrap – col-md-* + Left Slide Panel Menu + Master Page

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");
      }
 
   }