Inside my asp.net mvc4 app I have menus which is stored inside Shared folder as partial view
like
<li class="menu-title">
<a class="title" href="#">Main menu</a>
</li>
<li class="submenu_items" style="display: list-item;">
<ul>
<li>
#Html.ActionLink("Index", "Index", "My Index")
</li>
<li>
#Html.ActionLink("About", "Index", "About")
</li>
</ul>
</li>
How can I send from controller some flag to the view where I would append css class to selected link, for example if visitor click first link (Index) when this page loads I want this menu partial to be
<li class="submenu_items" style="display: list-item;">
<ul>
<li>
#Html.ActionLink("Index", "Index", "My Index", new {#class="selected "})
</li>
<li>
#Html.ActionLink("About", "Index", "About")
</li>
</ul>
</li>
To highlight a selected menu, We can make use of custom Html helper, Scott has written an wonderful article on this check this link
http://odetocode.com/Blogs/scott/archive/2012/08/25/asp-net-mvc-highlight-current-link.aspx
Related
I have a script to add custom tabs on runtime.All the tabs are being created but for some reason those created with ng-repeat can't be selected, is like a plain label. What am I missing?
<ul class="clearfix tabs-list tabamount6 tabs">
<li data-tab="tab-1">News</li>
<li data-tab="tab-2">Meet the team</li>
<li class="current" data-tab="tab-3">Related articles</li>
<li data-tab="tab-4">Videos</li>
<li ng-repeat="t in tabs" data-tab="ctab-{{t.Id}}">{{t.Title}}</li>
<asp:Literal ID="AddNewTab" runat="server"></asp:Literal>
</ul>
I have a User menu dropdown:
<ul class="dropdown-menu">
<li> Profile</li>
<li><span class="badge badge-success pull-right">5</span> Settings </li>
<li> Lock screen</li>
<li class="divider"></li>
#using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" }))
{
#Html.AntiForgeryToken()
<li> Logout</li>
}
</ul>
Adding the #Html.BeginForm breaks the style of my dropdown.
Any clue on how can I avoid that for adding extra styling to my dropdown element?
Because you are putting a form that breaks your list layout, put the form inside the <li></li>
a list have to have layout
<ul>
<li></li>
</ul>
#html.beginform does actually render a form so your html will look like
<ul>
<li></li>
<form>
<li></li>
</form>
</ul>
so change to this
<ul class="dropdown-menu">
<li> Profile</li>
<li><span class="badge badge-success pull-right">5</span> Settings </li>
<li> Lock screen</li>
<li class="divider"></li>
<li> #using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" }))
{
#Html.AntiForgeryToken()
Logout
}
</li>
</ul>
I'm using Bootstrap 3.3.4 for my website.
I've a menu code snippet as follows :
<ul class="nav navbar-nav">
<li class="{{projects}}">Projects</li>
</ul>
The above code is working fine. When user clicks on menu 'Projects' the respective web page opens.
Now I want to add a sub-menu to the above menu. This sub-menu should open a new web-page linked to it. The code I tried for it is as follows:
<ul class="nav navbar-nav">
<li class="{{projects}}" class="dropdown">
<a class="dropdown-toggle projects"
data-toggle="dropdown"
href="/darpan/pages/project/projectList.html">
<span id="projects">Projects</span>
</a>
<ul class="dropdown-menu">
<li>
Add new project
</li>
</ul>
</li>
</ul>
Now after doing this the issue I'm facing is when user clicks on menu 'Projects' the drop-down menu 'Add new project' opens up and upon clicking on 'Add new project' the respective web-page opens. This is perfect as per my requirement but what about the web-page associated with menu 'Projects' as it's not opening upon clicking on it. This should also work along with the drop-don menu functionality.
Can somebody please help me in this regard? Thanks.
Add disabled class in your anchor and add one more <a> with this css
<ul class="nav navbar-nav">
<li class="{{projects}}" class="dropdown">
<a class="dropdown-toggle projects disabled" href="/darpan/pages/project/projectList.html">Projects</a>
<a class="dropdown-toggle"><b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Add new project</li>
</ul>
</li>
</ul>
css
.caret1 {
position: absolute !important; top: 0; right: 0;
}
.dropdown-toggle.disabled {
padding-right: 40px;
}
Found the second solution here : https://stackoverflow.com/a/24581001/4119808
My bootstrap dropdown menu changes position after I select an item and redirect to another page. The first image shows the dropdown in proper position prior to selecting dropdown item. And the second shows the position of the dropdown after I've selected a dropdown item and redirected to another page. I select the second menu item and the dropdown appears underneath the first menu item. (I guess I need a 10 reputation rating to post images, so you'll just have to imagine it. Sorry.)
My code is below
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container-fluid">
<div class="navbar navbar-static-top">
<ul class="nav">
<li id="liHome" class="active" runat="server">
<a id="aHome" href="/home.aspx" runat="server">HOME</a>
</li>
<li id="liFindxxx" class="dropdown" runat="server">
<a id="aFindxxx" href="/xxxbrowse.aspx" class="dropdown-toggle" data-toggle="dropdown" runat="server">FIND SOMETHING</a>
<ul class="dropdown-menu">
<li id="liBrowsexxx" class="dropdown" runat="server">
<a id="addBrowsexxx" href="/xxxbrowse.aspx" runat="server">Browse</a>
</li>
<li>
Action 2
</li>
<li>
Action 3
</li>
<li>
Action 4
</li>
<li class="divider"></li>
<li class="nav-header">Header</li>
<li>
A Link
</li>
<li>
Another Link
</li>
</ul>
</li>...
When i add a active class to li with id liFindxxx like class="dropdown active", or to a li from the submenu i don't find a problem.
When you remove the dropdown class from li with id liFindxxx you will get the results you describe. So make sure to add active to class tag and not overwrite it.
when my primary menu is like item menu1/submenu1.2, de li gets the class active, so i can style it, for example in a different color.
however, if i go to page menu1/submenu1.2/153 then the active class is missing.
Or anything like menu1/submenu1.2/* is the active class missing.
How can I solve this?
In your example of menu1/submenu1.2/153 the active class should have moved to 153. You can still style submenu1.2 differently by looking for the active-trail class on the <li>
For example, if you go to admin/content/comment the menu's html should look similar like this:
<ul class="menu">
<li class="expanded active-trail">
Administer
<ul class="menu">
<li class="expanded first active-trail">
<a title="Manage your site's content." href="/drupalsite/?q=admin/content">Content management</a>
<ul class="menu">
<li class="leaf first active-trail">
<a class="active" title="List and edit site comments and the comment moderation queue." href="/drupalsite/?q=admin/content/comment">Comments</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
That means you can style the admin and content links by using CSS something like the following:
li.active-trail a {
/*Whatever style here*/
}