A.mphibio.us

1.5.5 Release December 2^nd 2015

Navigation

Create sleek, clean navigation bars and menu lists. Simple JQuery is used to link tabs and buttons to destination content. Create calls to action that are clearly defined and easy to identify.

Horzintal menu bar

<div class="navbar">
  <div class="navbar-inner">
    <nav role="navigation">
      <ul class="horizontal">
        <li><a>Link One</a>
          <ul>
            <li><a>Link One</a>
              <ul>
                <li><a>Link One</a></li>
                <li><a>Link Two</a></li>
                <li><a>Link Three</a></li>
                <li><a>Link Four</a></li>
              </ul>
            </li>
            <li><a>Link Two</a></li>
            <li><a>Link Three</a></li>
            <li><a>Link Four</a></li>
          </ul>
        </li>
        <li><a>Link Two</a></li>
        <li><a>Link Three</a></li>
        <li><a>Link Four</a></li>
      </ul>
    </nav>  
  </div>
</div>

nav ul,
.nav ul,
ul.nav
{
  list-style: none outside;
}

.navbar
{
  *position: relative;
  *z-index: 2;
  overflow: visible;
}

.navbar-inner
{
  background-color: #cfcfcf;
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #fefefe;
}

.horizontal
{
  margin: 0;
}

.horizontal>li,
.vertical>li,
.vertical>li>ul>li,
.vertical>li>ul>li>ul>li,
.filter_nav>dt,
.filter_nav>dd
{
  display: block;
  float: left;
  margin-bottom: 0;
  margin-left: 0;
}

.vertical>li,
.vertical>li>ul>li,
.vertical>li>ul>li>ul>li
{
	float: none;
	position: relative;
}

.horizontal>li>a,
.vertical>li>a,
.filter_nav>dd>a
{
  display: inline-block;
  float: none;
  padding: 0.5em 0.865em;
  font-size: 1em;
  text-decoration: none;
}
.vertical>li>a
{
	display: block;
}

.horizontal>li>a:hover,
.vertical>li>a:hover
{
  background: #89ac4c;
  background: rgba(0, 0, 0, 0.1);
}

.horizontal > li > ul,
.horizontal > li > ul > li,
.horizontal > li > ul > li > ul,
.horizontal > li > ul > li > ul > li
{
  margin: 0 !important;
  font-size: 1em;
  list-style: none;
}

.horizontal > li > ul > li > a,
.vertical > li > ul > li > a,
.horizontal > li > ul > li > ul > li > a,
.vertical > li > ul > li > ul > li > a
{
  display: block;
  background: #ffffff;
  background: rgba(255, 255, 255, 0.9);
  color: #0080c6;
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;
  padding: .625em 3em .625em 1.125em;
}

.horizontal > li > ul > li > a:hover,
.vertical > li > ul > li > a:hover,
.horizontal > li > ul > li > ul > li > a:hover,
.vertical > li > ul > li > ul > li > a:hover
{
  background: #0080c6;
  background: rgba(0, 128, 198, 1);
  color: #fff;
}

.horizontal > li > ul,
.vertical > li > ul
{
  position: absolute;
  z-index: 5000;
  max-height: 0;
  width: auto;
  margin-left: 0;
  margin-top: 0;
/*  border: 1px solid #cfcfcf; */
  -webkit-box-shadow: 0 1px 9px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 1px 9px rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 9px rgba(0, 0, 0, 0.25);
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  display: none;
}
.vertical > li > ul
{
	top: 0;
	left: 100%;
  display: block;
}

.horizontal > li:hover > ul,
.vertical > li:hover > ul
{
  height: auto;
  display: block;
}

.horizontal > li:hover > ul:before,
.vertical > li:hover > ul:before,
.horizontal > li > ul > li:hover > ul:before,
.vertical > li > ul > li:hover > ul:before
{
  border: solid;
  border-color: #cfcfcf transparent;
  border-width: 0 6px 6px 6px;
  top: -6px;
  content: "";
  display: block;
  left: 12%;
  position: absolute;
  z-index: 301;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
}

.vertical > li:hover > ul:before,
.horizontal > li > ul > li:hover > ul:before,
.vertical > li > ul > li:hover > ul:before
{
  top: 1.125em;
  left: -6px;
  border-color: transparent #cfcfcf;
  border-width: 6px 6px 6px 0;
}

.horizontal > li > ul > li
{
  /* This is the important rule for positioning the nav
  /* you need to give the third level a place to start */
  position: relative;
}

.horizontal > li > ul > li > ul,
.vertical > li > ul > li > ul,
.vertical > li > ul
{
  position: absolute;
  top: 0%;
  z-index: 5005;
  margin: 0;
  height: 0;
  width: inherit;
/*  border: 1px solid #cfcfcf; */
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  display: none;
}

.horizontal > li > ul > li > ul,
.vertical > li > ul > li > ul
{
	list-style: none;
  left: 100%;
}


.horizontal > li > ul > li:hover > ul,
.vertical > li > ul > li:hover > ul
{
  display: block;
  left: 100%;
  height: auto;
}

  
$('nav li').click(function(){
  if ($(this).hasClass('active')) {
  } else {
  $('nav li').removeClass('active');
  $(this).addClass('active');
  }
});

Vertical menu bar

Not much change

Simply change the class of the ul to vertical from horizontal and the behaviour changes

Customizing the look and feel of the menu's is as easy as updating the proper a elements

<nav role="navigation">
  <ul class="vertical">
    <li><a>Link One</a>
      <ul>
        <li><a>Link One</a>
          <ul>
            <li><a>Link One</a></li>
            <li><a>Link Two</a></li>
            <li><a>Link Three</a></li>
            <li><a>Link Four</a></li>
          </ul>
        </li>
        <li><a>Link Two</a></li>
        <li><a>Link Three</a></li>
        <li><a>Link Four</a></li>
      </ul>
    </li>
    <li><a>Link Two</a></li>
    <li><a>Link Three</a></li>
    <li><a>Link Four</a></li>
  </ul>
</nav>

Breadcrumbs

<nav role="navigation">
  <ul class="breadcrumb">
  <li><a href="#">This is a link</a></li>
  <li><a href="#">Lorem link</a></li>
  <li><a href="#">Dolor link two</a></li>
  <li><a href="#">Here is a link</a></li>
  <li class="active">Active Link</li>
  </ul>  
</nav>

.breadcrumb
{
  font-size: 1.1em;
  color: #ccc;
  margin: 0;
  font-size: .865em;
}
  
.breadcrumb li
{
  display: inline-block;
}

.breadcrumb a,
.breadcrumb a:visited
{
  margin: 0 .425em;
  text-decoration: none;
  color: #999;
  white-space: nowrap;
  float: left;
}

.breadcrumb li:first-child
{
  margin-left: 0;
}

.breadcrumb a:hover,
.breadcrumb a:focus
{
  color: #333;
}

.breadcrumb a:active,
.breadcrumb .active a
{
  color: #333;
}


.breadcrumb li:after
{
  display: inline-block;
  content: '>';
}

.breadcrumb li:last-child:after
{
  content: '';
  content: none;
}

Tabs

Some very simple tabs that have dead simple jQuery that hook them up to their corresponding content.

The tabs are clean and simple unordered-list markup and basic CSS.
The tabs are cross-browser, but don't need a ton of hacky CSS or markup.
The tabs work like a charm even on mobile devices. If there are too many they will stack (it's not completely awesome, but still retains functionality).

<menu>
  <ul class="tabs">
    <li><a href="javascript:;" class="active" amp-tab-content="simple">Simple</a></li>
    <li><a href="javascript:;" amp-tab-content="lightweight">Lightweight</a></li>
    <li><a href="javascript:;" amp-tab-content="mobileFriendly">Mobile</a></li>
  </ul>
  <ul class="tabs-content">
    <li id="simple" class="active">
      <div class="inset">
        <p>The tabs are clean and simple unordered-list markup and basic CSS.</p>
      </div></li>
    <li id="lightweight">
      <div class="inset">
        <p>The tabs are cross-browser, but don't need a ton of hacky CSS or markup.</p>
      </div></li>
    <li id="mobileFriendly">
      <div class="inset">
        <p>The tabs work like a charm even on mobile devices. If there are too many they will stack (it's not completely awesome, but still retains functionality).</p>
    </div></li>
  </ul>
</menu>

/* ==========================================================================
   9. Tabs (activated by scripts.js)
   ========================================================================== */


ul.tabs
{
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.tabs li
{
  display: inline-block;
  float: left;
  width: auto;
  height: 30px;
  padding: 0;
  margin: 0;
}

ul.tabs li.right,
ul.tabs li.r
{
  float: right;
}

ul.tabs.big,
ul.tabs.bg
{
  font-size: 1.3em;
}

ul.tabs li a
{
  position: relative;
  top: 3px;
  display: block;
  width: auto;
  padding: 0px 20px;
  line-height: 30px;
  margin: 0;
  color: #4d4d4d;
  text-decoration: none;
  background-color: #f1f1f1;
  border: 1px solid #ededed;
  border-bottom: 3px solid #fff;
}

ul.tabs li a:hover
{
  top: 2px;
	background-color: #fafafa;
}

ul.tabs li a.active
{
	top: 0;
  border-left-width: 1px;
  margin: 0;
  color: #6e574c;
  background-color: #fff;
}

ul.tabs.mini li,
ul.tabs.mini li a
{
  font: -webkit-control;
  font-size: 0.826em;
}

ul.tabs li:first-child a.active
{
  margin-left: 0;
}

ul.tabs li:first-child a
{
  -webkit-border-top-left-radius: 2px;
  -moz-border-radius-topleft: 2px;
  border-top-left-radius: 2px;
}

ul.tabs li:last-child a
{
}

ul.tabs-content
{
  position: relative;
  top: 3px;
  margin: 0;
  display: block;
  list-style: none;
}

ul.tabs-content > li
{
  display: none;
}

ul.tabs-content > li.active
{
  display: block;
  background-color: #fefefe;
}

/* Clearfixing tabs for beautiful stacking */

ul.tabs:before,
ul.tabs:after
{
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

ul.tabs:after
{
  clear: both;
}

ul.tabs
{
  zoom: 1;
}

  
$('.tabs li a').click(function(){
  var parent = $(this).closest('ul').attr('id');
  var content = '#'+$(this).attr('amp-tab-content');
  if ($(this).hasClass('active') && content.length) {
    } else {
      if (parent > 0)
        {
          $('#'+parent+'.tabs li a').removeClass('active');
          $(this).addClass('active');
        } else {
          $('.tabs li a').removeClass('active');
          $(this).addClass('active');
        }
      $(content).show().addClass('active').siblings().hide().removeClass('active');
    }
  return false;
});

Pagination

<menu role="navigation">
  <ul class="pager_nav">
    <li><a class="button" href="#">First</a></li>
    <li><span class="button active">1</span></li>
    <li><a class="button" href="#">2</a></li>
    <li><a class="button" href="#">3</a></li>
    <li><a class="button" href="#">4</a></li>
    <li><a class="button" href="#">5</a></li>
    <li><a class="button" href="#">...</a></li>
    <li><a class="button" href="#">Last</a></li>
    <li>
      <input type="text">
      <button type="button" class="button">Jump</button>
    </li>
  </ul>
</menu>

Filter Nav

<menu role="navigation">
  <dl class="filter_nav">
    <dt>Filter by:</dt>
    <dd class="active"><a href="#uxnav">Option 1</a></dd>
    <dd><a href="#uxnav">Option 2</a></dd>
    <dd><a href="#uxnav">Option 3</a></dd>
  </dl>
</menu>

Button Group

<menu role="navigation">
  <ul class="button_grp">
    <li><a class="button" href="#uxnav"><span class="icon-arrow-left hmr"></span>Prev</a></li>
    <li><a class="button" href="#uxnav">Next<span class="icon-arrow-right hml"></span></a></li>
  </ul>
</menu>

Modals

There are two flavours and three sizes of modal boxes included with the mergini framework application modals and inline modals, application modals activate an empty container and the foot of the mergini application and take over the whole screen with a blur effect, inline modals are ones you build inside your application and call as neccessary and do not include the blur and focus functions.

Inline Modals

Inline modals are pretty easy to implement simply add the a.mphibio.us listener class modal_opener and assign the element an amp-target attribute the id of the modal you want to launch.

Closing a modal is just as simple;assign the button, link, or icon the listener modal_kill and the proper amp-target attribute and it's gone.

<button class="modal_opener" amp-target="launcher_modal">Sample Modal Opener</button>

<div id="launcher_modal" class="overlay">
  <div id="launcher_content" class="modal small">
    <header>
    <!--// We recomend using this closing button on all modals the javascript is already handled simply add the
    class modal_kill and assign the amp-target attribute to the id of your overlay container id it is included in the 
default configuration of the modal launcher //-->
      <span class="icon-close-icon right modal_kill" amp-target="launcher_modal"></span>
      <h3>Modal Header </h3>
    </header>
    <section>
      ...
    </section>
    <footer>
      <fieldset class="form-actions">
        <button id="eventDetailActionBtn" type="button" class="">Action</button>
        <button type="reset" class="modal_kill cancel" amp-target="launcher_modal">Cancel</button>
      </fieldset>
    </footer>
  </div>
</div>

Sample Modal Opener

If using an anchor as the modal trigger include an href element (see below) for better mobile compatibility, or stick to buttons for greater usability.

<a href="#" class="modal_opener" amp-target="launcher_modal">Sample Modal Opener</a>

Modal Sizing

Modals are designed to be fluid the default width of the modal is 90% of the screen width up to a maximum width of 940px, a minimum width of 660px and the height grows according to the content within them.

Adding the class(es) small or medium to the modal either in your source code or dynamically will change the width of the modal to a width of 200px or 30% of the screen for small and 400px or 60% of the screen width.

Dialogues

A.mphibio.us has some default messaging dialogue boxes available for user feedback assign anyone of the following classes to a container and have consitant feedback elements. Or add and remove these classes to a feedback container as part of your user error handling techniques. They can contain any kind of html.

Sample Error message

<div class="error">Sample Error message</div>

Sample Attention message with icon

<div class="attn"><span class="icon-mergini_logo r"></span>Sample Attention message with icon</div>

Title

Sample Attention message with icon

<div id="feedback" class="dialog">
  <span class="icon-close a r mr cancel" amp-target="feedback"></span>
  <h3>Title</h3>
  <p>Sample Attention message with icon</p>
</div>