causeway-standard-theme/causeway/docs/shells/left-navigation.html

<div class="container page shell-left-navigation">
  <div class="navigation-pane-left">
    <div class="navigation-content-wrapper">
      <div class="navigation-header">
        <h2>Dummy links below - Example</h2>
      </div>
      <div class="navigation-content">
        <ul class="navigation-list">
          <li><a href=#">Send</a></li>
          <li class="active">
            <a href="#">Receive</a>
            <ul class="navigation-sub-list">
              <li><a href="#">Level 2 a</a></li>
              <li><a href="#">Level 2 b</a></li>
              <li>
                <a href="#">Level 2 c</a>
                <ul class="navigation-sub-list">
                  <li><a href="#">Level 3 a</a></li>
                  <li><a href="#">Level 3 b</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="#">Approve</a></li>
          <li><a href="#">Trading Relationships</a></li>
          <li><a href="#">Batch Management</a></li>
          <li><a href="#">My Details</a></li>
          <li><a href="#">Support</a></li>
          <li><a href="#">Reporting</a></li>
          <li><a href="#">PO to Invoice</a></li>
          <li><a href="#">Product Codes</a></li>
        </ul>
      </div>
      <br/>
      <div class="navigation-header">
        <h2>Tree View Example</h2>
      </div>
      <div class="navigation-content">
        <div class="tree-view">
          <ul>
            <li><a href="#">Goes somewhere</a></li>
            <li>
              <a href="#">Goes somewhere</a>
              <ul>
                <li class="disabled">
                  <a href="#">This is disabled</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">Goes somewhere</a>
              <ul>
                <li>
                  <a href="#">Goes somewhere</a>
                  <ul>
                    <li>
                      <a href="#">Goes somewhere</a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">Goes somewhere</a>
                  <ul>
                    <li>
                      <a href="#">Goes somewhere Goes somewhere Goes somewhere Goes somewhere Goes somewhere Goes somewhere </a>
                    </li>
                    <li>
                      </span><a href="#">Goes somewhere</a>
                      <ul>
                        <li>
                          <a href="#">Goes somewhere</a>
                          <ul>
                            <li>
                              <a href="#">Goes somewhere</a>
                            </li>
                            <li>
                              <a href="#">Goes somewhere</a>
                            </li>
                          </ul>
                        </li>
                        <li>
                          <a href="#">Goes somewhere</a>
                        </li>
                        <li>
                          <a href="#">Goes somewhere</a>
                        </li>
                      </ul>
                    </li>
                    <li>
                      <a href="#">Goes somewhere</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>
              <a href="">Goes somewhere</a>
              <ul>
                <li>
                  <a href="#">Goes somewhere</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
      <div class="navigation-header">
        <h2>Tree View Example</h2>
      </div>
      <div class="navigation-content">
        <div class="tree-view" data-extend-click="true">
          <ul>
            <li>
              <a href="#">Goes somewhere</a>
              <ul>
                <li>
                  <a href="#">Goes somewhere</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">Goes somewhere</a>
              <ul>
                <li>
                  <a href="#">Goes somewhere</a>
                  <ul>
                    <li>
                      <a href="#">Goes somewhere</a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">Goes somewhere</a>
                  <ul>
                    <li class="disabled">
                      <a class="has-tooltip" href="#" data-toggle="tooltip" data-title="This is a tooltip This is a tooltip This is a tooltip This is a tooltip">Goes somewhere Goes somewhere</a>
                    </li>
                    <li>
                      </span><a href="#">Goes somewhere</a>
                      <ul>
                        <li>
                          <a class="has-tooltip" href="#" data-toggle="tooltip" data-title="This is a tooltip">Goes somewhere</a>
                          <ul>
                            <li>
                              <a class="has-tooltip" href="#" data-toggle="tooltip" data-title="This is a tooltip">Goes somewhere</a>
                            </li>
                            <li class="active">
                              <a href="#">Goes somewhere</a>
                            </li>
                          </ul>
                        </li>
                        <li>
                          <a href="#">Goes somewhere</a>
                        </li>
                        <li>
                          <a href="#">Goes somewhere</a>
                        </li>
                      </ul>
                    </li>
                    <li>
                      <a href="#">Goes somewhere</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>
              <a href="">Goes somewhere</a>
              <ul>
                <li>
                  <a href="#">Goes somewhere</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="divider divider-navigation"><span class="handle"></span></div>
  <div class="navigation-pane-right">
    <div class="pane">
      <a id="left-navigation"></a>
      <header class="content-header">
        <h1 class="title">
          Left Navigation
        </h1>
      </header>
      <section>
        <p>By default left navigation width is
          <code>300px</code>. Navigation width can be reduce or increased by moving divider horizontally.</p>

        <p>Minimum limit is <code>20px</code> so that some part of it is visible and max limit is
          <code>35%</code> of available page width.</p>

        <p>Default navigation width can be adjusted by adding following code in project specific css. For example default width needed is
          <code>XYZpx</code></p>
        <pre>
        <code>
        .shell-left-navigation .divider-navigation {
          left: XYZpx;
        }
        .shell-left-navigation .navigation-pane-right {
          margin-left: XYZpx;
        }
        .navigation-pane-left {
          width: XYZpx;
        }
        </code>
        </pre>
        <header class="content-header">
          <h3 class="title">Example Code:</h3>
        </header>
        <pre><code>
        &lt;div class=&quot;container page shell-left-navigation&quot;&gt;
          &lt;div class=&quot;navigation-pane-left&quot;&gt;
            &lt;div class=&quot;navigation-content-wrapper&quot;&gt;
              &lt;div class=&quot;navigation-header&quot;&gt;
                &lt;h2&gt;Header Title&lt;/h2&gt;
              &lt;/div&gt;
              &lt;div class=&quot;navigation-content&quot;&gt;
                Nav Content
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;divider divider-navigation&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;navigation-pane-right&quot;&gt;
              &lt;div class=&quot;pane&quot;&gt;
                &lt;a id=&quot;left-navigation&quot;&gt;&lt;/a&gt;
                &lt;header class=&quot;content-header&quot;&gt;
                  &lt;h3 class=&quot;title&quot;&gt;
                    Left Navigation
                  &lt;/h3&gt;
                &lt;/header&gt;
                &lt;section&gt;
                &lt;/section&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        </code>
        </pre>
      </section>


      <header class="content-header">
        <h1 class="title">
          Left Navigation Menu List
        </h1>
      </header>

      <section>
        <p>Title header is optional and it can be turned off by simply <strong>not including</strong> the following code.
        </p>
  <pre><code>
    &lt;div class=&quot;navigation-content-wrapper&quot;&gt;

      &lt;!-- navigation header is optional --&gt;
      &lt;div class=&quot;navigation-header&quot;&gt;
        &lt;h2&gt;Header Title&lt;/h2&gt;
      &lt;/div&gt;

      &lt;div class=&quot;navigation-content&quot;&gt;
      &lt;!-- all navigation content goes here --&gt;

        &lt;ul class=&quot;navigation-list&quot;&gt;
          &lt;li&gt;&lt;a href=#&quot;&gt;Send&lt;/a&gt;&lt;/li&gt;
          &lt;li class=&quot;active&quot;&gt;
            &lt;a href=&quot;#&quot;&gt;Receive&lt;/a&gt;
            &lt;ul class=&quot;navigation-sub-list&quot;&gt;
              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Level 2 a&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Level 2 b&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;
                &lt;a href=&quot;#&quot;&gt;Level 2 c&lt;/a&gt;
                &lt;ul class=&quot;navigation-sub-list&quot;&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Level 3 a&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Level 3 b&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Approve&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Trading Relationships&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Batch Management&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;My Details&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Support&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Reporting&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;PO to Invoice&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Product Codes&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;

      &lt;/div&gt;

    &lt;/div&gt;
  </code>
  </pre>
      </section>
    </div>
  </div>
</div>