+

Navbars






Navigation is the key part of every website/web-page/web-app. Navbars helps to navigate website through links provided. PixelzUI provides nine classes.

Types

Following are the four types of navbars in PixelzUI.
  1. Square
  2. Semi-rounded
  3. Rounded
  4. Fixed

Classes

Following are the classes to use navbars in your scripts.

  1. .nvbr
  2. .nv-srnd
  3. .nv-rnd
  4. .nv-fxd
  5. .nv-lft
  6. .nv-hdr
  7. .nv-cls
  8. .nv-rt
  9. .nv-lnk
.
=>Other classes are based on color class(es).

How to use

  1. Add some container or grid class.
  2. <div class="cntr">
     <div class="cl cl2">
  3. Add .nvbr as class attribute in <div>.
  4. <div class="nvbr"></div>
  5. Add .nvbr-* as extra class.
  6. <div class="nvbr nvbr-*"></div>
  7. Add .nv-lft inside parent <div> and add some color class(es).
  8. <div class="nvbr nvbr-*">
     <div class="nv-lft bg-bl t-wt"></div>
    </div>
  9. Add .nv-hdr inside previous parent <div>.
  10. <div class="nvbr nvbr-*">
     <div class="nv-lft bg-bl">
      <div class="nv-hdr t-wt"></div>
     </div>
    </div>
  11. Add <a> href="#". inside previous parent <div> with some brand name.
  12. <div class="nvbr nvbr-*">
     <div class="nv-lft bg-bl">
      <div class="nv-hdr t-wt">
       <a href="#">Brand</a>
      </div>
     </div>
    </div>
  13. Add <span> class="bg-bk t-wt br-wt". inside previous parent <div> for showing menu button in tablet and mobile devices.
  14. <div class="nvbr nvbr-*">
     <div class="nv-lft bg-bl">
      <div class="nv-hdr t-wt">
       <a href="#">Brand</a>
       <span class="nv-cls">&#9776;</span>
      </div>
     </div>
    </div>
  15. Add .nv-lft inside first parent <div> and add same color class(es) defined above.
  16. <div class="nvbr nvbr-*">
     <div class="nv-lft bg-bl">
      <div class="nv-hdr t-wt">
       <a href="#">Brand</a>
       <span class="nv-cls">&#9776;</span>
      </div>
     </div>
     <div class="nv-rt bg-bl ft-b"></div>
    </div>
  17. Add <ul class="nv-lnk ft-b"> inside second parent <div> and add some color class(es).
  18. <div class="nvbr nvbr-*">
     <div class="nv-lft bg-bl">
      <div class="nv-hdr t-wt">
       <a href="#">Brand</a>
       <span class="nv-cls">&#9776;</span>
      </div>
     </div>
     <div class="nv-rt bg-bl ft-b">
       <ul class="nv-lnk t-wt"></ul>
     </div>
    </div>
  19. Add <li><a href="#"> inside above parent <ul> tag for navigation links.
  20. <div class="nvbr nvbr-*">
     <div class="nv-lft bg-bl">
      <div class="nv-hdr t-wt">
       <a href="#">Brand</a>
       <span class="nv-cls">&#9776;</span>
      </div>
     </div>
     <div class="nv-rt bg-bl ft-b">
       <ul class="nv-lnk t-wt">
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a></li>
        <li><a href="#">Link3</a></li>
        <li><a href="#">Link4</a></li>
        <li><a href="#">Link5</a></li>
       </ul>
     </div>
    </div>
=>* means (srnd, rnd & fxd).

Demo

Editing

Edit Classes





<div class="nvbr nvbr-srnd">  <div class="nv-lft bg-pl">   <div class="nv-hdr">    <a href="#" class="t-lm">Brand</a>    <span class="nv-cls bg-bk t-wt br-wt">&#9776;</span>   </div>  </div>  <div class="nv-rt bg-pl">   <ul class="nv-lnk ft-b t-wt">    <li><a href="#">Home</a></li><li><a href="#">About</a></li>    <li><a href="#">Gallary</a></li><li><a href="#">Events</a></li>    <li><a href="#">Contact Us</a></li>   </ul>  </div> </div>

Leave a Reply

Your email address will not be published. Required fields are marked.