2016-04-24 7 views
4

別のページに行くときにサイドバイトクラスを表示したい簡単なページを作っています。私はマテリアライズCSSを使用しています。サイド・ナビゲーション・クラスをオーバーライドするカスタムCSSを作成しました。別のページに行くときに、通常のサイド・ナビゲーションを表示したかったのです。それを行うより良い方法はありますか?私はあなたからのアドバイスが必要で、それは大きな助けになるでしょう。マテリアライズCSSを使用して別のサイドナビを別のページに表示

例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:

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

答えて

2

あなたは、あなたがすべてのあなたの側-NAV固有のCSSを有していてもよく、デフォルトの側-NAVをロードすることを意味する側-NAV通常によって場合現在使用している.side-navクラスではなく、まったく異なるクラスです。あなたは.custom-side-navクラスと言うことができます。ulタグが.side-navクラスの場合、<ul id="nav-mobile" class="side-nav custom-side-nav fixed">のようになります。その後、あなたは別のページに移動するたびに、あなたの側-NAVから.custom-side-navクラスを除去することによって、jQueryのを使用して、いわゆる「通常の」側-NAVを取り戻すことができ

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

:あなたのCSSは次のようになります。 $("#nav-mobile").removeClass("custom-side-nav")のように、.removeClass()メソッドを使用して行うことができます。こうすることで、後で$("#nav-mobile").addClass("custom-side-nav")という形でこのページに再度アクセスすると、カスタムCSSをサイドナビに再度適用することができます。

あなたの質問を誤解しているかどうかを教えてください。私たちがすべて具体的な解決策を講じることができるように、あなたが達成したいと思っているものをさらに明るくしなければならないかもしれません。

+0

この投稿は役に立ちました。ありがとう – claudios

+0

喜んで助けて! :)他の仲間の開発者が将来似たようなことに遭遇する可能性のある問題を解決した場合、それを解決策としてマークすることを忘れないでください。 – pratiks

+0

実際に私はこれを試していません。代わりに、私は自分のプロジェクトで元のサイドナビゲーターを使用します。私は自由な時間があればこれを試してみます。私は後で戻ってそれがうまくいくならばこれを受け入れるでしょう。 – claudios

関連する問題