Post
Ask Question
Nazmul Badsha

Nazmul Badsha

  • NA
  • 402
  • 85.3k

How can Dashboard Menu make vertical from horizontal ?

Sep 23 2017 3:44 AM
I want to make my sub-menu vertical like dashboard.
look my current sub-menu...
 
 
And I want It Just like the bellow..
 
 
 
 
How can it possible ?
 
See here my Layout view code Also ...
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
@* add by Nazmul *@
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<title>@ViewBag.Title - FTSHRIS</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<link href="~/Content/DataTables/css/jquery.dataTables.css" rel="stylesheet" />
@*<link href="~/Content/DataTables/css/jquery.dataTables.css" rel="stylesheet" />*@
<link href="~/Content/Gridmvc.css" rel="stylesheet" />
<link href="~/Content/jquery.mobile-1.1.2.css" rel="stylesheet" />
<link href="~/Content/themes/font-awesome.min.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Scripts/css/menu.css" rel="stylesheet" />
</head>
<body>
<header>
<div class="content-wrappe navbar-fixed-top" role="navigation">
<div class="container" style="background-color:white">
<div class=float-left>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" style="font-size:medium">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="@Url.Action("Index", "Home")" class="navbar-brand">
<img src="~/Images/FTS-Logo.png" title="ftsl" alt="additional title" width="210" height="61" />
</a>
<br />
@*@Html.ImageActionLink(@Url.Content("~/Images/acsol_logo2.png"), " C I M S ", "Index", "Home", new { title = "size", width = 140, height = 50 })*@
@*@Html.ActionLink(" FTSHRIS ", "Index", "Home", null, new { @class = "navbar-brand" })*@
</div>
<div class="navbar-collapse collapse" style="font-size:large">
<ul class="nav navbar-nav" style="color:blue">
<li>@Html.ActionLink("Home", "Index", "Home",new { @class = "glyphicon glyphicon-home" })</li>
<li>@Html.ActionLink("bout", "About", "Home", new { @class = "glyphicon glyphicon-text-background"})</li>
<li>@Html.ActionLink("Contact", "Contact", "Home", new { @class = "glyphicon glyphicon-pencil"})</li>
</ul>
<ul class="nav navbar-nav pull-right" style="font-size:medium">
@if (Session["DisplayName"] == null)
{
<li>@Html.ActionLink("Login", "Login", "Login")</li>
}
else
{
<li>@Html.ActionLink("Welcome [ " + @Session["DisplayName"].ToString() + " ]", "", "") </li>
<li>@Html.ActionLink("Logout", "Logout", "Login")</li>
}
</ul>
</div>
</div>
</div>
</header>
@Html.Partial("_UserMenu")
@*Home Page Banner*@
@RenderSection("Jumbotron", false)
<div class="container body-content clsMinHeight" id="Body">
@*Body*@
@RenderBody()
</div>
<br /><br /><br />
@*Footer*@
@*@Html.Partial("_Footer")*@
@*<script src="~/Scripts/GtrCommon.js"></script>*@
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
<script src="~/Scripts/modernizr-2.8.3.js"></script>
@*<script type="text/javascript">
$(document).ready(function () {
fncPagination();
fncFooter();
});
function fncPagination() {
$('#myTable').DataTable({
"aLengthMenu": [[10, 15, 25, 50, -1], [10, 15, 25, 50, "All"]]
});
}*@
<script type="text/javascript">
$(document).ready(function () {
fncPagination();
fncFooter();
});
function fncPagination() {
$('#myTable').DataTable({
"aLengthMenu": [[10, 15, 25, 50, -1], [10, 15, 25, 50, "All"]],
"ordering": false
});
}
function fncScroll() {
$('#myTable').dataTable({
"scrollX": true,
"scrollY": "200px",
"scrollCollapse": true,
"paging": false
});
}
function fncFooter() {
var docHeight = $(window).height();
var minHeight = 597;
if (docHeight > 750) {
minHeight = 835;
}
//var abc = $('#Jumbotron').is(":visible");
var blnJumbotron = $('#Jumbotron').is(":visible");
if (blnJumbotron == true) {
minHeight = minHeight - $('#Jumbotron').height();
}
var blnUserMenu = $('#UserMenu').is(":visible");
if (blnUserMenu == true) {
minHeight = minHeight - $('#UserMenu').height();
}
var bodyHeight = $('#Body').height();
if (bodyHeight <= minHeight) {
$('#Body').css('min-height', minHeight+'px');
}
}
</script>
</body>
</html>
Please help to solve this problem .
 
Thanks
Nazmul 
 

Answers (2)