素材デザインライトメニュー

私のダッシュボードメニューでは、4つのタブを表示しようとしています。

私はダッシュボードのURLに4つのタブを表示するためにさまざまな方法で試しました。

これは私のダッシュボードメニューである---

<html> 
    <head> 
    <!-- Material Design Lite --> 
    <script src="https://code.getmdl.io/1.1.3/material.min.js"></script> 
    <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css"> 
    <!-- Material Design icon font --> 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
    </head> 
    <body> 
    <!-- Uses a header that scrolls with the text, rather than staying 
     locked at the top --> 
    <div class="mdl-layout mdl-js-layout"> 
     <header class="mdl-layout__header mdl-layout__header--scroll"> 
     <div class="mdl-layout__header-row"> 
      <!-- Title --> 
      <span class="mdl-layout-title">Chris</span> 
      <!-- Add spacer, to align navigation to the right --> 
      <div class="mdl-layout-spacer"></div> 
      <!-- Navigation --> 
      <nav class="mdl-navigation"> 
      <a class="mdl-navigation__link" href="">Dashboard</a> 
      <a class="mdl-navigation__link" href="">Dashboard 2</a> 
      <a class="mdl-navigation__link" href="">Dashboard 3</a> 
      <a class="mdl-navigation__link" href="">Dashboard 4</a> 
      </nav> 
     </div> 
     </header> 
     <div class="mdl-layout__drawer"> 
     <span class="mdl-layout-title">Chris</span> 
     <nav class="mdl-navigation"> 
      <a class="mdl-navigation__link" href="">Dashboard</a> 
      <a class="mdl-navigation__link" href="">Dashboard 2</a> 
      <a class="mdl-navigation__link" href="">Dashboard 3</a> 
      <a class="mdl-navigation__link" href="">Dashboard 4</a> 
     </nav> 
     </div> 
     <main class="mdl-layout__content"> 
     <div class="page-content"><!-- Your content goes here --></div> 
     </main> 
    </div> 
    </body> 
</html>

これは私が自分のダッシュボードメニューに追加しようとしています私のタブメニュー--- https://codepen.io/anon/pen/JKkvgA

いずれかでありますどのように私はこの2をマージし、ダッシュボードのメニュー選択でのみ4つのタブを表示することができます知っている！

本当にありがとうございます。

出典

2016-07-27 Christofer Hansen

これはどうですか？

<html> 
    <head> 
    <!-- Material Design Lite --> 
    <script src="https://code.getmdl.io/1.1.3/material.min.js"></script> 
    <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css"> 
    <!-- Material Design icon font --> 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
    </head> 
    <body> 
    <!-- Uses a header that scrolls with the text, rather than staying 
     locked at the top --> 
    <div class="mdl-layout mdl-js-layout"> 
     <header class="mdl-layout__header mdl-layout__header--scroll"> 
     <div class="mdl-layout__header-row"> 
      <!-- Title --> 
      <span class="mdl-layout-title">Chris</span> 
      <!-- Add spacer, to align navigation to the right --> 
      <div class="mdl-layout-spacer"></div> 
      <!-- Navigation --> 
      <nav class="mdl-navigation"> 
      <a class="mdl-navigation__link" href="">Dashboard</a> 
      <a class="mdl-navigation__link" href="">Dashboard 2</a> 
      <a class="mdl-navigation__link" href="">Dashboard 3</a> 
      <a class="mdl-navigation__link" href="">Dashboard 4</a> 
      </nav> 
     </div> 
     <!-- Tabs --> 
     <div class="mdl-layout__tab-bar mdl-js-ripple-effect"> 
      <a href="#dashboard_tab_1" class="mdl-layout__tab is-active">Dashboard Tab 1</a> 
      <a href="#dashboard_tab_2" class="mdl-layout__tab">Dashboard Tab 2</a> 
      <a href="#dashboard_tab_3" class="mdl-layout__tab">Dashboard Tab 3</a> 
      <a href="#dashboard_tab_4" class="mdl-layout__tab">Dashboard Tab 4</a> 
     </div> 
     </header> 
     <div class="mdl-layout__drawer"> 
     <span class="mdl-layout-title">Chris</span> 
     <nav class="mdl-navigation"> 
      <a class="mdl-navigation__link" href="">Dashboard</a> 
      <a class="mdl-navigation__link" href="">Dashboard 2</a> 
      <a class="mdl-navigation__link" href="">Dashboard 3</a> 
      <a class="mdl-navigation__link" href="">Dashboard 4</a> 
     </nav> 
     </div> 
     <main class="mdl-layout__content"> 
     <div class="page-content"><!-- Your content goes here --></div> 
     </main> 
    </div> 
    </body> 
</html>

出典

2016-07-27 21:54:26 Nicolapps

あなたの素晴らしい答えに感謝しますが、私が望むのは、ダッシュボード、ダッシュボード3、ダッシュボード4ではなく、4つのタブよりもダッシュボード2のみを選択した場合です。私はそれをどうやってできるのか知っていますか？お返事ありがとうございます:) –

ダッシュボードページ（dashboard1.html、dashboard2.html、dashboard3.html、dashboard4.html）ごとにHTMLファイルを作成し、タブHTMLコードをdashboard2.htmlページに追加するだけです。異なるHTMLページが互いにリンクしていることを確認してください！ – Nicolapps

素材デザインライトメニュー

答えて

関連する問題