Jump to: navigation, search

Difference between revisions of "Main Page"

Line 1: Line 1:
 +
 +
 +
<div class="col-md-12">
 +
<div class="panel panel-primary-light-border">
 +
<div class="panel-heading"> <h3 class="panel-title">Drop Down Nav</h3> </div>
 +
<div class="panel-body">
 +
 +
      <div id="myDropdown" class="tab-content">
 +
        <div class="tab-pane active" id="examples">
 +
<div class="col-sm-6">
 +
<div class="navbar navbar-inverse-darker" role="navigation">
 +
<ul class="nav navbar-nav">
 +
                <li class="dropdown" style="margin-top:11px;">
 +
                    <span class="dropdown-toggle mwbs-color-white" data-toggle="dropdown"> Services <i class="fa fa-angle-down"></i></span>
 +
                    <ul class="dropdown-menu darker-color">
 +
                        <li>[[Service One]]</li>
 +
                        <li>[[Service Two]]</li>
 +
                        <li>[[Service Three]]</li>
 +
                        <li>[[Service Four]]</li>
 +
                        <li>[[Service Five]]</li>
 +
                        <li class="divider"></li>
 +
                        <li>[[Another Service]]</li>
 +
                    </ul>
 +
                </li>
 +
</ul>
 +
<ul class="nav navbar-nav">
 +
                <li class="dropdown" style="margin-top:11px;">
 +
                    <span class="dropdown-toggle mwbs-color-white" data-toggle="dropdown"> Members <i class="fa fa-angle-down"></i></span>
 +
                    <ul class="dropdown-menu darker-color">
 +
                        <li>[[Members One]]</li>
 +
                        <li>[[Members Two]]</li>
 +
                        <li>[[Members Three]]</li>
 +
                        <li>[[Members Four]]</li>
 +
                        <li>[[Members Five]]</li>
 +
                        <li class="divider"></li>
 +
                        <li>[[Another Member]]</li>
 +
                    </ul>
 +
                </li>
 +
</ul>
 +
<ul class="nav navbar-nav">
 +
                <li class="dropdown" style="margin-top:11px;">
 +
                    <span class="dropdown-toggle mwbs-color-white" data-toggle="dropdown"> Another <i class="fa fa-angle-down"></i></span>
 +
                    <ul class="dropdown-menu darker-color">
 +
                        <li>[[Another One]]</li>
 +
                        <li>[[Another Two]]</li>
 +
                        <li>[[Another Three]]</li>
 +
                        <li>[[Another Four]]</li>
 +
                        <li>[[Another Five]]</li>
 +
                        <li class="divider"></li>
 +
                        <li>[[Another Another!]]</li>
 +
                    </ul>
 +
                </li>
 +
</ul>
 +
<ul class="nav navbar-nav">
 +
                <li class="dropdown" style="margin-top:11px;">
 +
                    <span class="dropdown-toggle mwbs-color-white" data-toggle="dropdown">Another <i class="fa fa-angle-down"></i></span>
 +
                    <ul class="dropdown-menu darker-color">
 +
                        <li>[[Yet Another One]]</li>
 +
                        <li>[[Yet Another Two]]</li>
 +
                        <li>[[Yet Another Three]]</li>
 +
                        <li>[[Yet Another Four]]</li>
 +
                        <li>[[Yet Another Five]]</li>
 +
                        <li class="divider"></li>
 +
                        <li>[[Yet Another Another!]]</li>
 +
                    </ul>
 +
                </li>
 +
</ul>
 +
<ul class="nav navbar-nav">
 +
                <li class="dropdown" style="margin-top:11px;">
 +
                    <span class="dropdown-toggle mwbs-color-white" data-toggle="dropdown">Another <i class="fa fa-angle-down"></i></span>
 +
                    <ul class="dropdown-menu darker-color">
 +
                        <li>[[Yet Another One]]</li>
 +
                        <li>[[Yet Another Two]]</li>
 +
                        <li>[[Yet Another Three]]</li>
 +
                        <li>[[Yet Another Four]]</li>
 +
                        <li>[[Yet Another Five]]</li>
 +
                        <li class="divider"></li>
 +
                        <li>[[Yet Another Another!]]</li>
 +
                    </ul>
 +
                </li>
 +
</ul>
 +
</div>
 +
</div>
 +
<div class="col-sm-6">
 +
<div class="navbar navbar-inverse-lighter" role="navigation">
 +
<ul class="nav navbar-nav">
 +
                <li class="dropdown" style="margin-top:11px;">
 +
                    <span class="dropdown-toggle mwbs-color-white" data-toggle="dropdown"> Services <i class="fa fa-angle-down"></i></span>
 +
                    <ul class="dropdown-menu darker-lighter">
 +
                        <li>[[Service One]]</li>
 +
                        <li>[[Service Two]]</li>
 +
                        <li>[[Service Three]]</li>
 +
                        <li>[[Service Four]]</li>
 +
                        <li>[[Service Five]]</li>
 +
                        <li class="divider"></li>
 +
                        <li>[[Another Service]]</li>
 +
                    </ul>
 +
                </li>
 +
</ul>
 +
<ul class="nav navbar-nav">
 +
                <li class="dropdown" style="margin-top:11px;">
 +
                    <span class="dropdown-toggle mwbs-color-white" data-toggle="dropdown"> Members <i class="fa fa-angle-down"></i></span>
 +
                    <ul class="dropdown-menu lighter-color">
 +
                        <li>[[Members One]]</li>
 +
                        <li>[[Members Two]]</li>
 +
                        <li>[[Members Three]]</li>
 +
                        <li>[[Members Four]]</li>
 +
                        <li>[[Members Five]]</li>
 +
                        <li class="divider"></li>
 +
                        <li>[[Another Member]]</li>
 +
                    </ul>
 +
                </li>
 +
</ul>
 +
<ul class="nav navbar-nav">
 +
                <li class="dropdown" style="margin-top:11px;">
 +
                    <span class="dropdown-toggle mwbs-color-white" data-toggle="dropdown">Another <i class="fa fa-angle-down"></i></span>
 +
                    <ul class="dropdown-menu lighter-color">
 +
                        <li>[[Another One]]</li>
 +
                        <li>[[Another Two]]</li>
 +
                        <li>[[Another Three]]</li>
 +
                        <li>[[Another Four]]</li>
 +
                        <li>[[Another Five]]</li>
 +
                        <li class="divider"></li>
 +
                        <li>[[Another Another!]]</li>
 +
                    </ul>
 +
                </li>
 +
</ul>
 +
<ul class="nav navbar-nav">
 +
                <li class="dropdown" style="margin-top:11px;">
 +
                    <span class="dropdown-toggle mwbs-color-white" data-toggle="dropdown">Another <i class="fa fa-angle-down"></i></span>
 +
                    <ul class="dropdown-menu lighter-color">
 +
                        <li>[[Yet Another One]]</li>
 +
                        <li>[[Yet Another Two]]</li>
 +
                        <li>[[Yet Another Three]]</li>
 +
                        <li>[[Yet Another Four]]</li>
 +
                        <li>[[Yet Another Five]]</li>
 +
                        <li class="divider"></li>
 +
                        <li>[[Yet Another Another!]]</li>
 +
                    </ul>
 +
                </li>
 +
</ul>
 +
<ul class="nav navbar-nav">
 +
                <li class="dropdown" style="margin-top:11px;">
 +
                    <span class="dropdown-toggle mwbs-color-white" data-toggle="dropdown">Another <i class="fa fa-angle-down"></i></span>
 +
                    <ul class="dropdown-menu lighter-color">
 +
                        <li>[[Yet Another One]]</li>
 +
                        <li>[[Yet Another Two]]</li>
 +
                        <li>[[Yet Another Three]]</li>
 +
                        <li>[[Yet Another Four]]</li>
 +
                        <li>[[Yet Another Five]]</li>
 +
                        <li class="divider"></li>
 +
                        <li>[[Yet Another Another!]]</li>
 +
                    </ul>
 +
                </li>
 +
</ul>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="tab-pane" id="application">
 +
      <div class="bs-example">
 +
<p>Set the colour to your preference, five shades available, default, light, ligher, dark and darker. Change navbar-inverse-darker to navbar-inverse-default or your prefered colour.</p>
 +
<pre>
 +
    <div class="col-sm-6">
 +
      <div class="navbar navbar-inverse-darker" role="navigation">
 +
        <ul class="nav navbar-nav">
 +
          <li class="dropdown" style="margin-top:11px;">
 +
            <span class="dropdown-toggle mwbs-color-white" data-toggle="dropdown">Services</span>
 +
            <ul class="dropdown-menu darker-color">
 +
              <li>[[Service One]]</li>
 +
              <li>[[Service Three]]</li>
 +
              <li>[[Service Four]]</li>
 +
              <li>[[Service Five]]</li>
 +
              <li>[[Another Service]]</li>
 +
            </ul>
 +
          </li>
 +
        </ul>
 +
        <ul class="nav navbar-nav">
 +
          <li class="dropdown" style="margin-top:11px;">
 +
            <span class="dropdown-toggle mwbs-color-white" data-toggle="dropdown">Members</span>
 +
            <ul class="dropdown-menu darker-color">
 +
              <li>[[Members One]]</li>
 +
              <li>[[Members Two]]</li>
 +
              <li>[[Members Three]]</li>
 +
              <li>[[Members Four]]</li>
 +
              <li>[[Members Five]]</li>
 +
              <li>[[Another Member]]</li>
 +
            </ul>
 +
          </li>
 +
        </ul>
 +
        <ul class="nav navbar-nav">
 +
          <li class="dropdown" style="margin-top:11px;">
 +
            <span class="dropdown-toggle mwbs-color-white" data-toggle="dropdown">Another</span>
 +
            <ul class="dropdown-menu darker-color">
 +
              <li>[[Another One]]</li>
 +
              <li>[[Another Two]]</li>
 +
              <li>[[Another Three]]</li>
 +
              <li>[[Another Four]]</li>
 +
              <li>[[Another Five]]</li>
 +
              <li>[[Another Another!]]</li>
 +
            </ul>
 +
          </li>
 +
        </ul>
 +
        <ul class="nav navbar-nav">
 +
          <li class="dropdown" style="margin-top:11px;">
 +
            <span class="dropdown-toggle mwbs-color-white" data-toggle="dropdown">Yet Another</span>
 +
            <ul class="dropdown-menu darker-color">
 +
              <li>[[Yet Another One]]</li>
 +
              <li>[[Yet Another Two]]</li>
 +
              <li>[[Yet Another Three]]</li>
 +
              <li>[[Yet Another Four]]</li>
 +
              <li>[[Yet Another Five]]</li>
 +
              <li>[[Yet Another Another!]]</li>
 +
            </ul>
 +
          </li>
 +
        </ul>
 +
        <ul class="nav navbar-nav">
 +
          <li class="dropdown" style="margin-top:11px;">
 +
            <span class="dropdown-toggle mwbs-color-white" data-toggle="dropdown">One More!</span>
 +
            <ul class="dropdown-menu darker-color">
 +
              <li>[[Yet Another One]]</li>
 +
              <li>[[Yet Another Two]]</li>
 +
              <li>[[Yet Another Three]]</li>
 +
              <li>[[Yet Another Four]]</li>
 +
              <li>[[Yet Another Five]]</li>
 +
              <li>[[Yet Another Another!]]</li>
 +
            </ul>
 +
          </li>
 +
        </ul>
 +
      </div>
 +
    </div>
 +
</pre>
 +
        </div>
 +
        </div>
 +
 +
 
<HTML>
 
<HTML>
  

Revision as of 18:41, 4 March 2016


Drop Down Nav

Set the colour to your preference, five shades available, default, light, ligher, dark and darker. Change navbar-inverse-darker to navbar-inverse-default or your prefered colour.

    <div class="col-sm-6">
      <div class="navbar navbar-inverse-darker" role="navigation">
        <ul class="nav navbar-nav">
          <li class="dropdown" style="margin-top:11px;">
            <span class="dropdown-toggle mwbs-color-white" data-toggle="dropdown">Services</span>
            <ul class="dropdown-menu darker-color">
              <li>[[Service One]]</li>
              <li>[[Service Three]]</li>
              <li>[[Service Four]]</li>
              <li>[[Service Five]]</li>
              <li>[[Another Service]]</li>
            </ul>
          </li>
        </ul>
        <ul class="nav navbar-nav">
          <li class="dropdown" style="margin-top:11px;">
            <span class="dropdown-toggle mwbs-color-white" data-toggle="dropdown">Members</span>
            <ul class="dropdown-menu darker-color">
              <li>[[Members One]]</li>
              <li>[[Members Two]]</li>
              <li>[[Members Three]]</li>
              <li>[[Members Four]]</li>
              <li>[[Members Five]]</li>
              <li>[[Another Member]]</li>
            </ul>
          </li>
        </ul>
        <ul class="nav navbar-nav">
          <li class="dropdown" style="margin-top:11px;">
            <span class="dropdown-toggle mwbs-color-white" data-toggle="dropdown">Another</span>
            <ul class="dropdown-menu darker-color">
              <li>[[Another One]]</li>
              <li>[[Another Two]]</li>
              <li>[[Another Three]]</li>
              <li>[[Another Four]]</li>
              <li>[[Another Five]]</li>
              <li>[[Another Another!]]</li>
            </ul>
          </li>
        </ul>
        <ul class="nav navbar-nav">
          <li class="dropdown" style="margin-top:11px;">
            <span class="dropdown-toggle mwbs-color-white" data-toggle="dropdown">Yet Another</span>
            <ul class="dropdown-menu darker-color">
              <li>[[Yet Another One]]</li>
              <li>[[Yet Another Two]]</li>
              <li>[[Yet Another Three]]</li>
              <li>[[Yet Another Four]]</li>
              <li>[[Yet Another Five]]</li>
              <li>[[Yet Another Another!]]</li>
            </ul>
          </li>
        </ul>
        <ul class="nav navbar-nav">
          <li class="dropdown" style="margin-top:11px;">
            <span class="dropdown-toggle mwbs-color-white" data-toggle="dropdown">One More!</span>
            <ul class="dropdown-menu darker-color">
              <li>[[Yet Another One]]</li>
              <li>[[Yet Another Two]]</li>
              <li>[[Yet Another Three]]</li>
              <li>[[Yet Another Four]]</li>
              <li>[[Yet Another Five]]</li>
              <li>[[Yet Another Another!]]</li>
            </ul>
          </li>
        </ul>
      </div>
    </div>



Retrieved from "https://www.riseofthemagicalgirl.com/index.php?title=Main_Page&oldid=129"