This article explaining for how to create menu's in mvc and how to set selected menu shown .
First add this styles in your css style sheet
ul#menu
{
font-size: 1.3em;
font-weight: 600;
margin: 0 0 5px;
padding: 0;
text-align:left;
position:absolute;
}
ul#menu li
{
display: inline;
list-style: none;
margin-left: 22px;
float:left;
}
ul#menu li a
{
background: none;
color: Black;
text-decoration: none;
font-family: Arial;
}
.select,#menu li a:hover
{
color:White ;
text-decoration: underline;
cursor:pointer;
}
.select
{
color:White ;
background-color:#F41818 !important;
text-decoration: underline;
cursor:pointer;
padding-left:0px;
}
Then add this razor code in your page and must call your css file in this page head tag inside .
for(Please style.css is mine .But you must provide your css file only)
<head>
<link href="~/Content/style.css" rel="stylesheet" />
</head>
<div style="width: 100%; padding-bottom: 20px; margin-left: -7%; margin-top: 14%">
<br />
<ul id="menu">
<li id="home">@Html.ActionLink("Home", "Index", "Home")</li>
<li id="About">@Html.ActionLink("Discussions", "About", "Home")</li>
<li id="Compliance">@Html.ActionLink("Compliance", "ManageCompliance", "Compliance")</li>
<li>@Html.ActionLink("Reports", "About", "Home")</li>
<li>@Html.ActionLink("Documents", "Contact", "Home")</li>
<li id="FinancialCompliance" >@Html.ActionLink("Compliance", "ViewFinancialCompliances", "FinancialCompliance")</li>
<li id="Team">@Html.ActionLink("Team", "Contact", "Home")</li>
<li id="Admin">@Html.ActionLink("Admin", "Admin", "Admin")
</li>
</ul>
</div>
Now the above menu is showing like when ordinary showing menu and shown hover menu
okay .that finished .
Now you want selecting menu is showing static .So put the below code in your header tag inside
<script type="text/javascript">
$(document).ready(function () {
var url = window.location.pathname;
var home = "Home/Index";
var About = "Home/About";
var Compliance = "Compliance/ManageCompliance";//Put your page url
var Admin = "Admin/Admin";
var EditCompliance = "Compliance/EditCompliance";//Put your page url
var AddCompliance = "Compliance/AddCompliance";//Put your page url
var Team = "/Home/Contact";
var AddSchool = "Admin/AddSchool";//Put your page url
var AddDistrict = "Admin/AddDistrict";//Put your page url
var EditSchool = "Admin/EditSchool";//Put your page url
var EditDistrict = "Admin/EditDistrict";//Put your page url
var ViewFinancialCompliance = "FinancialCompliance/ViewFinancialCompliances"//Put your page url
var AddFinancialCompliance = "FinancialCompliance/AddFinancialCompliance"//Put your page url
if (url.indexOf(home) > -1) {
$("#home").addClass("select");
$(".select a:hover").addClass("select").show();
}
else if (url.indexOf(ViewFinancialCompliance) > -1) {
$("#FinancialCompliance").addClass("select").show();
}
else if (url.indexOf(AddFinancialCompliance) > -1) {
$("#FinancialCompliance").addClass("select").show();
}
else if (url.indexOf(About) > -1) {
$("#About").addClass("select").show();
}
else if (url.indexOf(Compliance) > -1) {
$("#Compliance").addClass("select").show();
}
else if (url.indexOf(AddCompliance) > -1) {
$("#Compliance").addClass("select").show();
}
else if (url.indexOf(EditCompliance) > -1) {
$("#Compliance").addClass("select").show();
}
else if (url.indexOf(Admin) > -1) {
$("#Admin").addClass("select").show();
}
else if (url.indexOf(AddSchool) > -1) {
$("#Admin").addClass("select").show();
}
else if (url.indexOf(AddDistrict) > -1) {
$("#Admin").addClass("select").show();
}
else if (url.indexOf(EditSchool) > -1) {
$("#Admin").addClass("select").show();
}
else if (url.indexOf(EditDistrict) > -1) {
$("#Admin").addClass("select").show();
}
else if (url.indexOf(Team) > -1) {
$("#Team").addClass("select").show();
}
else {
$("#home").addClass("select").show();
}
});
</script>
Now you can see selecting menu is selected.
for see below image .Its shown as selecting menu is selected
But you like ,you can change your font color and etc in css
First add this styles in your css style sheet
ul#menu
{
font-size: 1.3em;
font-weight: 600;
margin: 0 0 5px;
padding: 0;
text-align:left;
position:absolute;
}
ul#menu li
{
display: inline;
list-style: none;
margin-left: 22px;
float:left;
}
ul#menu li a
{
background: none;
color: Black;
text-decoration: none;
font-family: Arial;
}
.select,#menu li a:hover
{
color:White ;
text-decoration: underline;
cursor:pointer;
}
.select
{
color:White ;
background-color:#F41818 !important;
text-decoration: underline;
cursor:pointer;
padding-left:0px;
}
Then add this razor code in your page and must call your css file in this page head tag inside .
for(Please style.css is mine .But you must provide your css file only)
<head>
<link href="~/Content/style.css" rel="stylesheet" />
</head>
<div style="width: 100%; padding-bottom: 20px; margin-left: -7%; margin-top: 14%">
<br />
<ul id="menu">
<li id="home">@Html.ActionLink("Home", "Index", "Home")</li>
<li id="About">@Html.ActionLink("Discussions", "About", "Home")</li>
<li id="Compliance">@Html.ActionLink("Compliance", "ManageCompliance", "Compliance")</li>
<li>@Html.ActionLink("Reports", "About", "Home")</li>
<li>@Html.ActionLink("Documents", "Contact", "Home")</li>
<li id="FinancialCompliance" >@Html.ActionLink("Compliance", "ViewFinancialCompliances", "FinancialCompliance")</li>
<li id="Team">@Html.ActionLink("Team", "Contact", "Home")</li>
<li id="Admin">@Html.ActionLink("Admin", "Admin", "Admin")
</li>
</ul>
</div>
okay .that finished .
Now you want selecting menu is showing static .So put the below code in your header tag inside
<script type="text/javascript">
$(document).ready(function () {
var url = window.location.pathname;
var home = "Home/Index";
var About = "Home/About";
var Compliance = "Compliance/ManageCompliance";//Put your page url
var Admin = "Admin/Admin";
var EditCompliance = "Compliance/EditCompliance";//Put your page url
var AddCompliance = "Compliance/AddCompliance";//Put your page url
var Team = "/Home/Contact";
var AddSchool = "Admin/AddSchool";//Put your page url
var AddDistrict = "Admin/AddDistrict";//Put your page url
var EditSchool = "Admin/EditSchool";//Put your page url
var EditDistrict = "Admin/EditDistrict";//Put your page url
var ViewFinancialCompliance = "FinancialCompliance/ViewFinancialCompliances"//Put your page url
var AddFinancialCompliance = "FinancialCompliance/AddFinancialCompliance"//Put your page url
if (url.indexOf(home) > -1) {
$("#home").addClass("select");
$(".select a:hover").addClass("select").show();
}
else if (url.indexOf(ViewFinancialCompliance) > -1) {
$("#FinancialCompliance").addClass("select").show();
}
else if (url.indexOf(AddFinancialCompliance) > -1) {
$("#FinancialCompliance").addClass("select").show();
}
else if (url.indexOf(About) > -1) {
$("#About").addClass("select").show();
}
else if (url.indexOf(Compliance) > -1) {
$("#Compliance").addClass("select").show();
}
else if (url.indexOf(AddCompliance) > -1) {
$("#Compliance").addClass("select").show();
}
else if (url.indexOf(EditCompliance) > -1) {
$("#Compliance").addClass("select").show();
}
else if (url.indexOf(Admin) > -1) {
$("#Admin").addClass("select").show();
}
else if (url.indexOf(AddSchool) > -1) {
$("#Admin").addClass("select").show();
}
else if (url.indexOf(AddDistrict) > -1) {
$("#Admin").addClass("select").show();
}
else if (url.indexOf(EditSchool) > -1) {
$("#Admin").addClass("select").show();
}
else if (url.indexOf(EditDistrict) > -1) {
$("#Admin").addClass("select").show();
}
else if (url.indexOf(Team) > -1) {
$("#Team").addClass("select").show();
}
else {
$("#home").addClass("select").show();
}
});
</script>
Now you can see selecting menu is selected.
for see below image .Its shown as selecting menu is selected
But you like ,you can change your font color and etc in css
Hi, Thanks for sharing this Information, Got to learn new things from your Blog on DOT NET Training.
ReplyDeleteDOT NET Training institutes in Ameerpet