0

I want the color to change for the active menu when redirect after the page loads. name of the page to change color after redirecting to the page use my layout nav dropdown-item class so need this function effect dropdown submenu.

I have to do this dynamically and need navbar dropdown item effect here How can I do it?

 <div class="header-navbar"role="navigation" data-menu="menu-wrapper">
    <!-- Horizontal menu content-->
    <div class="navbar-container" data-menu="menu-container">
      <!-- include ~/includes/mixins-->
      <ul class="nav navbar-nav" id="main-menu-navigation" data-menu="menu-navigation">
      <li class="dropdown nav-item" data-menu="dropdown">
      <a class="dropdown-toggle nav-link" href="#" data-toggle="dropdown"><i class="ft-book"></i><span>Dergi</span></a>
      <ul class="dropdown-menu">
           <li data-menu="">
              <a class="dropdown-item" href="@Url.Action("Create", "News")"
                 data-toggle="dropdown"> Create News
               <submenu class="name"></submenu>
              </a>
           </li>
       </ul>
       </li>
  </div>
Cœur
  • 37,241
  • 25
  • 195
  • 267
Epelden
  • 9
  • 6
  • Stephen dropdown item does not effect your suggestion. so ı can implement under message solution and good working now solved it. and question change title etc. navbar dropdown item need effect – Epelden Jun 20 '18 at 23:52

1 Answers1

1

You can make html extension method with the root namespace of your project:

using System.Web.Mvc;

namespace YourProjectNamespace
{
    public static class HtmlHelpers
    {
        public static string IsActive(this HtmlHelper html, string url)
        {
            var current = html.ViewContext.HttpContext.Request.Url.AbsolutePath.ToString().ToLower();
            if (url == "/")
            {
                if (current == "/" || current == "/home" || current == "/home/index" || current == "/home/" || current == "/home/index/")
                {
                    return "active";
                }
                else
                    return "";
            }
            if (current.Contains(url.ToLower()))
            {
                return "active";
            }
            return "";
        }
    }
}

then use it in your html as follow:

<li data-menu="">
              <a class="dropdown-item" href="@Url.Action("Create", "News")"
                 data-toggle="dropdown" class="@Html.IsActive("/News/Create")" > Create News
              </a>
           </li>

This will add active class the current menu item.

Usama
  • 884
  • 10
  • 24