Materialize CSS Sidenavロード内容に応じてフォームの選択を選択

私はMaterializeCSSを使用して、私の会社のリンク先ページを設計しています。Materialize CSS Sidenavロード内容に応じてフォームの選択を選択

ここでは、左側にサイドバーを3つのアイテムで統合しました。アイテムがクリックされた場合は、特定のコンテンツを右側にロードします。そのコンテンツは別のHTMLページまたはウェブサイトである可能性があります。

どのように私はMaterializeフレームワークでそれを行うことができますか？

ここに私のhtmlコード

：

<body> 
    <header> 
     <nav> 
      <div class="nav-wrapper"> 
       <a class="brand-logo center">Monitoring Tool</a> 
       <ul class="left hide-on-med-and-down"> 
       </ul> 
      </div> 

      <!-- Side Navigation --> 
      <ul id="slide-out" class="side-nav fixed"> 
       <li class="logo"> 
        <a class="brand-logo not-active"> 
         <object id="front-page-logo" type="image/png" data="img/logo.png"></object> 
        </a></li> 
       <p class="divider" id="logo-divider"></p> 
       <li class="bold"><a id="nagios">Nagios</a></li> 
       <li class="bold"><a id="munin">Munin</a></li> 
       <li class="bold"><a id="usv-monitor">USV-Monitor</a></li> 
      </ul> 
     </nav>  
    </header> 

    <main> 
      <iframe width="100%" height="100%" frameborder="0" allowfullscreen id="iframe"></iframe> 
    </main> 

    <footer class="page-footer"> 
    </footer> 
    <!-- Scripts--> 
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
    <script src="js/materialize.js"></script> 
    <script src="js/init.js"></script> 

</body>

どうもありがとう！

出典

2017-04-13 nicowi

てみ 'UI-router'あなたは、私はわからないが、' UI-router'角度で唯一の要素ではありません各sidenavメニュー – rachmatsasongko

のためのさまざまなビューの内容を呼び出すことができますか？ – nicowi

申し訳ありませんが私の悪い、角度のある素材を使用していると思っていた。この場合、jquery ajaxを使用してsidenavメニューにコンテンツonclickをロードさせ、正しいページコンテンツにajax結果を表示できます。 – rachmatsasongko

何か不足していますか？ a要素のhref属性とtarget属性を使用してください。このように：

<a id="nagios" href="http://path/to/nagios/" target="iframe">Nagios</a></li> 
<a id="munin" href="http://path/to/munin/" target="iframe">Munin</a></li> 
<a id="usv-monitor" href="http://path/to/usv-monitor/" target="iframe">USV-Monitor</a></li> 

<iframe width="100%" height="100%" frameborder="0" allowfullscreen id="iframe" name="iframe"></iframe>

出典

2017-04-19 14:42:48

Materialize CSS Sidenavロード内容に応じてフォームの選択を選択

答えて

関連する問題