Jump to: navigation, search

Bootstrapskin Drop Down Navigation

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>

Why not have a play to see how you can add sub-menus to the drop downs.

The width of a menu is set by the column class.

Traditional "a class" links do not work with Mediawiki, use [[]] wiki syntax with buttons when linking to internal articles and [] wiki syntax for external links.

There are more otions available and we'll add those once these guides are little closer to being complete i.e. drop-up menus and vertical menus that open to the left or right, hover drop-down is also available.

bootstrapskin-commercial-skin.png