使用materialize css在不同页面上显示不同的侧导航

I am making a simple page where I wanted to display different side-nav class when going to another page. I am using materialize css and I made a custom css to override the side-nav class now I wanted to display the normal side-nav when going to another page. Is there a better way to do it? I need some advice from you guys and that would be a big help.

我正在创建一个简单的页面，我想在转到另一个页面时显示不同的侧导航类。我正在使用materialize css并且我创建了一个自定义css来覆盖side-nav类，现在我想在转到另一个页面时显示正常的side-nav。有没有更好的方法呢？我需要你们的一些建议，这将是一个很大的帮助。

Example HTML:

示例HTML：

<nav class="white lighten-1" role="navigation">
  <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo center"></a>
    <ul class="right hide-on-med-and-down">
     <div class="right">
       <li><a class="waves-effect waves-light btn grey lighten-1">Login</a></li>
       <li><a class="waves-effect waves-light btn red lighten-1">Register</a></li>
     </div>
    </ul>

    <ul id="nav-mobile" class="side-nav fixed">
     <div class="list-group">
      <a class="list-group-item" href="#"><i class="fa fa-user fa-fw" aria-hidden="true"></i>&nbsp; User
      </a>
      <a class="list-group-item" href="#"><i class="fa fa-search fa-fw" aria-hidden="true"></i>&nbsp; Search
      </a>
    </div>
    </ul>
    <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
  </div>
</nav><!-- nav ending -->

CSS:

CSS：

.side-nav {
 background-color: #27AEEB;
 color: #ffffff;
 margin-top: 75px;
 margin-left: 8px;
 height: 47%;
 overflow: hidden;
}

1 个解决方案

#1

If by normal side-nav you mean to load the default side-nav, then you may have all your side-nav specific CSS in an altogether different class, rather than the .side-nav class which you are currently using. You can have a, let's say a .custom-side-nav class, meaning your ul tag having .side-nav class should look like <ul id="nav-mobile" class="side-nav custom-side-nav fixed">. And your CSS should look like:

如果通过正常的侧面导航你的意思是加载默认的侧面导航，那么你可能将所有侧面导航特定的CSS放在一个完全不同的类中，而不是你当前使用的.side-nav类。你可以有一个.custom-side-nav类，这意味着你的ul标签有.side-nav类应该看起来像

.custom-side-nav {
    background-color: #27AEEB;
    color: #ffffff;
    margin-top: 75px;
    margin-left: 8px;
    height: 47%;
    overflow: hidden;
}

Then, whenever you navigate to another page you can get back your so-called 'normal' side-nav using jQuery by removing the .custom-side-nav class from your side-nav. You can do it using .removeClass() method, like $("#nav-mobile").removeClass("custom-side-nav"). This way, you can later have your custom CSS applied again on your side-nav if you visit this page again simply by having a $("#nav-mobile").addClass("custom-side-nav").

然后，无论何时导航到另一个页面，您都可以通过从侧面导航中删除.custom-side-nav类，使用jQuery返回所谓的“普通”侧导航。您可以使用.removeClass（）方法来执行此操作，例如$（“＃nav-mobile”）。removeClass（“custom-side-nav”）。这样，如果您再次访问此页面，只需使用$（“＃nav-mobile”）。addClass（“custom-side-nav”），您可以稍后再次在侧面导航中应用自定义CSS。

Let me know if I misinterpreted your question, in which case you may have to put some more light on what you exactly desire to achieve so that we can all work on a concrete solution.

如果我误解了您的问题，请告诉我，在这种情况下，您可能需要更多地了解您希望实现的目标，以便我们能够在具体解决方案上工作。

1 个解决方案

#1

更多相关文章

随机推荐