Difference between revisions of "Template:Peking/NavBar"

Line 45: Line 45:
 
<body>
 
<body>
  
−
<!-- Simple header with fixed tabs. -->
+
<!-- Always shows a header, even in smaller screens. -->
−
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header
+
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
−
            mdl-layout--fixed-tabs">
+
  <header class="mdl-layout__header">
−
    <header class="mdl-layout__header">
+
    <div class="mdl-layout__header-row">
−
        <div class="mdl-layout__header-row">
+
      <!-- Title -->
−
            <!-- Title -->
+
      <span class="mdl-layout-title">Title</span>
−
            <span class="mdl-layout-title">Title</span>
+
      <!-- Add spacer, to align navigation to the right -->
−
        </div>
+
      <div class="mdl-layout-spacer"></div>
−
        <!-- Tabs -->
+
      <!-- Navigation. We hide it in small screens. -->
−
        <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
+
      <nav class="mdl-navigation mdl-layout--large-screen-only">
−
            <a href="#fixed-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
+
        <a class="mdl-navigation__link" href="">Link</a>
−
            <a href="#fixed-tab-2" class="mdl-layout__tab">Tab 2</a>
+
        <a class="mdl-navigation__link" href="">Link</a>
−
            <a href="#fixed-tab-3" class="mdl-layout__tab">Tab 3</a>
+
        <a class="mdl-navigation__link" href="">Link</a>
−
        </div>
+
        <a class="mdl-navigation__link" href="">Link</a>
−
     </header>
+
      </nav>
 +
    </div>
 +
  </header>
 +
  <div class="mdl-layout__drawer">
 +
    <span class="mdl-layout-title">Title</span>
 +
    <nav class="mdl-navigation">
 +
      <a class="mdl-navigation__link" href="">Link</a>
 +
      <a class="mdl-navigation__link" href="">Link</a>
 +
      <a class="mdl-navigation__link" href="">Link</a>
 +
      <a class="mdl-navigation__link" href="">Link</a>
 +
    </nav>
 +
  </div>
 +
  <main class="mdl-layout__content">
 +
     <div class="page-content"><!-- Your content goes here --></div>
 +
  </main>
 
</div>
 
</div>
  

Revision as of 16:56, 16 October 2017

Title
Title