CSS Plugins

Lightweight, simple, smart and well structured modular system built upon 16 scalable grids system that generates smooth and itch-free responsive layouts. It contains over 2000 inline plugin classes that can be used to create a fully responsive website with ease.

start coding

Definition

Nav-Bar is a modified version of navigation containing two distinct regions (the left and right). The left region contains the site title, icon, or preferably site logo, and right region could accomodate navigation links in form of icons, combination of icon search bar and text, and any relevant components that befits the section. It mostly appear at the top header of a web page.

Plugin Class

Classes Definition
barHeader Parent container holding corresponding contents such as title, icon and navigation links.
barHeaderRight Right wrapper, wraps menu links to the right.
barHeaderLeft Left wrapper, wrap contents such as title and logo to the left.

Structure

badge plugin

Set Up

When setting up contents in a nav-bar, a very considerable amount of information should suffice, and avoid excessive or bogus typeface such as in a title. For bar that contain links and icons, the size of the icon and corresponding text should maintain certain proportionality in size, disregard mismatched characters, typeface or size.

  
    <div class="barHeader">
        <div class="barHeaderLeft">   
        ...   
        </div>
        <div class="barHeaderRight">
        ...	
        </div>
    </div>
                                

There are five different set of nav bar experimented in this framework, each of which has its specific elements and appearance thus perform different task. All of these sets have the different design implementation approach inline with the embedding element. Both regions (left and right) should only be filled with vital and most significant information that your site might need.

You can fully interact with this class to unleash wide varieties of options using the code editor

Type one nav bar

This set contains three crucial menu links to the right and title to the left. The right items must not be more than 4, overcrowding might sometime confuse your would be visitor. Keep it simple.

Code - Horizontal NavBar

    <div class="barHeader border-all-xxs padding-all-sma">
	    <div class="barHeaderLeft">
		    <h3><a href="#link">Site title</a></h3>
	    </div>
	    <div class="barHeaderRight">
		    <div class="nav-horizontal">
		      <input id="action-6" type="checkbox" hidden="hidden" />
		      <label for="action-6"><span class="icon icon-menu 
		         color-text-white"></span></label>
		       <nav>
			    <ul>
			     <li>
				    <ul>
					    <li><a href="">Link one</a></li>
					    <li><a href="">Link two</a></li>
					    <li><a href="">Link three</a></li>
					    <li><a href="">Link four</a></li>
				    </ul>
			     </li>
		        </ul>
		      </nav>
		    </div>
	    </div>
    </div>
    

Extending the above (type one) by changing design interface concept from horizontal navigation to dropdown navigation. This option is best for site with lots of links, notably, the links should be arranged in order or priority.

Code - type one (dropdown nav)

Code - (Dropdown) NavBar

            <div class="barHeader border-all-xxs padding-all-sma">
             <div class="barHeaderLeft">
	            <h3><a href="#link">Dropdown</a></h3>
             </div>
             <div class="barHeaderRight">
	            <div class="nav-dropDown">
	              <input id="action-6" type="checkbox" hidden="hidden" />
	              <label for="action-6"><span class="icon 
	                icon-menu color-text-white"></span>
	              </label>
	              <nav>
		            <ul>
	                 <li><a href="">Home</a></li>
		              <li><a href="">About us</a></li>
		              <li class="parent">
			            <a href="">Services <span class="icon icon-caret-down"></span></a>
			              <div class="submenu">
				            <a href="#">Mobile first</a>
				            <a href="#">Desktop</a>
				            <a href="#">Stacked grids</a>
				            <a href="#">Inline grid</a>
				            <a href="#">Components</a>
				            </div>
			            </li>
		            </ul>
		            </nav>
	            </div>
             </div>
            </div>
    

Type two nav bar

This bar options is mostly found in a photo gallery related website with a characteristic of search functionality, a single link which may be crucial such as logIn or SignUp and site title.

    <div class="badge-enclose">
        <!-- Changing color with color-set class applied to span"-->
	    <span class="icon icon-bullhorn color-set-blueWhale"></span> 
	    <span class="badge-tag circle color-set-carnation ">10</span>     
    </div> 
    

Type three nav bar

This bar options is mostly found in a photo gallery related website with a characteristic of search functionality, a single link which may be crucial such as logIn or SignUp and site title.

        <div class="barHeader border-all-xxs">
	        <div class="barHeaderLeft">
	        <h3>
	         <a href="#link">
              <img src="images/logo/g16logo_medium-10.png" />
	         </a> 
	        </h3>
	        </div>
	        <div class="barHeaderRight">
             <div class="nav-horizontal">
		        <input id="action-6" type="checkbox" hidden="hidden" />
		        <label for="action-6"><span class="icon icon-menu color-text-white"></span></label>
		        <nav>
		        <ul>
		        <li>
		        <ul>
			        <li><a href=""><span class="icon icon-home"></span></a></li>
			        <li><a href="" class="color-set-blazeOrange hover-text-almond">
			        <span class="icon icon-users"></span></a></li>
			        <li><a href=""><span class="icon icon-location"></span></a></li>
			        <li><a href=""><span class="icon icon-lock"></span> Login</a></li>
			        <li><a href=""><span class="icon icon-unlocked"></span> Sign Up</a></li>
		   
		        </ul>
		        </li>
		        </ul>
		        </nav>
	          </div>
	        </div>
        </div>
    

Custom Setting

The properties of nav bar components can be customized by changing the color, icon, and the background.

Browser Supports

Code Editor - Customizes CSS plugin with ease

G16framework code it yourself is a handy tool for any code enthusiast who love to establish and extend the style rules already applied to the plugin.

Important: To override a new defined style rule on the existing target plugin, you must implement / inject a keyword (!important) immediately after a new value is being set.

Newly design will be released soon!.

The view only show very small proportion of the original size, copy the code and view in a larger screen.