App Notofication - opt 02

app-navigation-with-notification-badges.markdown

App Navigation with Notification Badges

By CSSFlow: free UI elements and widgets coded with HTML5, CSS3, and Sass.

View the original article and download the Sass source at:
cssflow.com/snippets/app-navigation-with-notification-badges

Original PSD by Petrovski Marijan.

Tested in Firefox 4, Safari 4, Chrome 14, Opera 10, IE 8 (and newer).

A Pen by gan on CodePen.

License.

app-notofication-opt-02.markdown

App Notofication - opt 02

Tested in Firefox 4, Safari 4, Chrome 14, Opera 10, IE 8 (and newer).

A Pen by gan on CodePen.

License.

index.html

<div class="container">
  <nav class="nav">
    <ul class="nav-list">
      <li><a href="#" class="nav-link">Transaction <span class="nav-counter nav-counter-green">4</span></a></li>
      <li><a href="#" class="nav-link">Label <span class="nav-counter nav-counter-blue">8</span></a></li>
      <li><a href="#" class="nav-link">Notifications <span class="nav-counter">15</span></a></li>
     
    </ul>
  </nav>
</div>

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

style.css

html,
body {
  min-height: 100vh;
}

body {
  font: 12px/20px 'Lucida Grande', Verdana, sans-serif;
  color: #222;
  background: #fff;
}

.container {
  margin: 80px auto;
  width: 1040px;
  text-align: center;
}

.container .nav {
  display: inline-block;
  text-align: left;
}

.nav {
  padding: 4px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 4px;
}

.nav-list {
  padding: 0 12px;
  height: 34px;
  background: #f4f5f7;
  border-radius: 4px;
}

.nav-list > li {
  float: left;
  height: 17px;
  margin: 8px 0;
}

.nav-list > li + li {
  border-left: 1px dotted #989ca8;
}

.nav-link {
  float: left;
  position: relative;
  margin-top: -8px;
  padding: 0 14px;
  line-height: 34px;
  font-size: 10px;
  font-weight: bold;
  color: #555;
  text-decoration: none;
  /*   text-shadow: 0 1px white; */
}

.nav-link:hover {
  color: #222;
  background: #f6f6f6;
  text-decoration: none;
}

.nav-counter {
  position: absolute;
  top: -1px;
  right: 1px;
  min-width: 8px;
  height: 20px;
  line-height: 20px;
  margin-top: -11px;
  padding: 0 6px;
  font-weight: normal;
  color: white;
  text-align: center;
  text-shadow: 0 1px rgba(0, 0, 0, 0.2);
  background: #e23442;
  border: 1px solid #911f28;
  border-radius: 11px;
}

.nav-counter-green {
  background: #75a940;
  border: 1px solid #42582b;
}

.nav-counter-blue {
  background: #3b8de2;
  border: 1px solid #215a96;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />