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

Introduction

There are wide variety of menu design options (as breadcrumb, horizontal, vertical, icon, slide on hover, sidebar, top slide, bottom slide, left slide, and right slide) available in creating a responsive and mobile friendly navigation.

The listed navigation options can be customized in different form by changing the color, adding effects enhancing the view by changing font size and typeface, adding box-model dependecies (padding, marging and border), hover colors and many more possibilities.

Plugin Class

Navigation classes Definition
Ready to use navigation classes.
nav-breadcrumb Display links with a bar especially after content link
nav-horizontal List links horizontally with option of icons, icon and link, link and search input
nav-vertically List links vertically with option of icons, icon and link.
nav-dropDown List links horizontally with option of dropdown links as submenus.
nav-toggle List hidden links on toggle with a touchable targets effect.
nav-hoverBasic List links vertically and cascades when hover on a target menu icon.
nav-hoverTopSlide Links are cascaded from top in transition when mouse hover
nav-hoverBottomSlide Links are cascaded from bottom in transition when mouse hover
nav-hoverLeftSlide Links are slides open from the left in transition when mouse hover
nav-hoverRightSlide Links are slide open from the right in transition when mouse hover

Navigation - Horizontal

Desktop only

This option does not support smaller screen, but you can still use it for screen resolution greater than 360px.

 
    <div class="nav-horizontal">
     <nav>
	    <ul>
		    <li><a href="">Home</a></li>
		    <li><a href="">About us</a></li>
		    <li><a href="">Services</a></li>
		    <li><a href="">Projects</a></li>
		    <li><a href="">Contact</a></li>
	    </ul>
    </nav> 
   </div>

Mobile option

Mobile friendly horizontal navigation is a simple touch screen friendly with a toggle button hidden on a larger screen and display on smaller screen. This option perfectly supports all device screen resolutions.

Simply follow the layout structure as shown in the code editor preview, to customize any part of the element, just assign a class name to any target element, and to have clearer picture of which class property to be used, visit g16classes section.

Important Notice Primarily the span element class attribute from the label that display icon toggle on the mobile screen can be assigned different icon style depending on which options work best for your application other than using icon related class. HTML Character set such as &hellip and &vellip are another good option of displaying toggled button if limited space poised as a drawback. This is an ideal option for devices with a smaller screen.

 
    <label for="mobile-1" class="color-text-alice">
    <!--Change this icon menu to my choice-->
        <span class="icon icon-menu"></span>
    </label>
		 
    <label for="mobile-1" class="color-text-alice">
    <!--Icon changed to hellip with class size medium -->
        <span class="medium">…</span>
    </label>
		 
    <label for="mobile-1" class="color-text-alice">
    <!--Icon changed to vellip with class size medium -->
        <span class="medium">⋮</span>
    </label>
 
    <div class="nav-horizontal">
        <!-- Reveal on smaller screen -->
        <input id="mobile-1" type="checkbox" />
        <label for="mobile-1" class="color-text-alice">
                    <span class="icon icon-menu"></span>
        </label>
        <nav>
            <ul>
                <li class="color-set-alizarinCrimson">
                    <ul>
                        <li><a href="index.html" class="hover-text-acapulo">Home</a></li>
                        <li><a href="index.html" class="color-text-blazeOrange hover-text-almond">
                              About us</a>
                        </li>
                        <li><a href="">Services</a></li>
                        <li><a href="">Our Teams</a></li>
                        <li><a href="">Projects</a></li>
                        <li><a href="">Contact</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>   

Horizontal Icon Link

Mobile friendly horizontal navigation with icons and content link.

 
    <div class="nav-horizontal">
        <input id="mobile-2" type="checkbox" />
        <label for="mobile-2" class="color-text-alice"> 
               <span class="icon icon-menu"></span>
	  </label>
        <nav>
            <ul>
                <li>
                  <ul>
                   <li>
                    <a href="">
                    <span class="icon icon-home"></span>Home</a>
                   </li>
                   <li>
                    <a href="">
                     <span class="icon icon-users"></span>About us</a></li>
                    <li><a href=""><span class="icon icon-cogs"></span>Services</a></li>
                    <li><a href=""><span class="icon icon-stack"></span>Projects</a></li>
                    <li><a href=""><span class="icon icon-location"></span>Contact</a></li>
                  </ul>
                </li>
              </ul>
            </nav>
    </div>

Horizontal Icon

Mobile friendly horizontal navigation with only icon.

    <!-- Main Navigation Container --> 
    <div class="nav-horizontal">
     <!-- Button visible on smaller screens -->
     <input id="mobile-3" type="checkbox" hidden="hidden"/>
     <label for="mobile-3" class="color-text-alice"><span class="icon icon-menu"></span></label>
     <!-- Nav block -->
     <nav>
      <ul>
       <li class="border-all-xxs>
        <ul>
	     <li><a href="">
			    <span class="icon icon-home"></span></a></li>
	     <li><a href="">
			    <span class="icon icon-users"></span></a> </li>
	     <li><a href=""><span class="icon icon-cogs"></span></a></li>
	     <li><a href=""><span class="icon icon-stack"></span></a></li>
	     <li><a href=""><span class="icon icon-location"></span></a></li>
        </ul>
       </li>
      </ul>
     </nav>
    </div>

Horizontal Nav Search

Mobile friendly horizontal navigation with search input.

 
   <!-- Main Navigation Container -->
   <div class="nav-horizontal">
    <!-- Mobile friendly button visible in mobile screen -->
    <input id="mobile-7" type="checkbox" />
    <label for="mobile-7" class="color-text-alice"><span class="icon icon-menu"></span></label>
    <!-- Nav block -->
    <nav>
     <ul>
      <li class="align-center border-all-xxs">
       <ul>
       <!-- Link item -->
        <li><a href="">Home</a></li>
        <li><a href="">About us</a></li>
        <li><a href=""><span class="icon icon-cogs"></span></a></li>
        <li><a href=""><span class="icon icon-stack"></span></a></li>
        <li><a href=""><span class="icon icon-location"></span></a></li>
        <li>
        <!-- Search Input block -->
        <form>
        <input type="text" name="searchterm" placeholder="Search keywords here...."
            class="iconSearchBlack" required="required">
        </form>
       </li>
      </ul>
     </li>
    </ul>
   </nav>
  </div>

Navigation - Hover Group

Basic Hover Navigation

Basic hover navigation is fully responsive and may be used to:

  •  display anchor links
  •  hold and display small and large image and contents
  •  simulates the behavior of tooltips
  •  display content inline.

Place your mouse over the aquadeep color menu icon to reveal the hidden contents. Color of the menu can be changed just by assigning a new color class to the span element holding the icon.

 
    <div class="nav-hoverBasic">
	    <!-- Nav block -->
	    <nav>
	      <ul>
		    <li>
			    <!-- Hover button -->
			    <span class="icon icon-menu color-set-blueWhale"></span>
			    <ul class="color-set-alizarinCrimson color-text-acadia">
				    <li><a href=""><span class="icon icon-home"></span>Home</a></li>
				    <li><a href=""><span class="icon icon-users"></span>About us</a></li>
				    <li><a href=""><span class="icon icon-cogs"></span>Services</a></li>
				    <li><a href=""><span class="icon icon-stack"></span>Projects</a></li>
				    <li><a href=""><span class="icon icon-location"></span>Contact</a></li>
			    </ul>
		    </li>
	      </ul>
	    </nav>
    </div>  

Displaying images in grid

Mouse over the menu icon to reveal hidden images in grids.

 
  <div class="nav-hoverBasic">
	<!-- Nav block -->
	<nav>
	 <ul>
	  <li>
		<!-- Hover button -->
		<span class="icon icon-menu color-text-alizarinCrimson"></span>
		<ul class="row border-all-xxs box-shadow-bulge">
			<li class="g16-c-4"><a href=""><img src="../images/portfolio/logo/drug-22.png" title="drug store logo created by g16media" alt="" /> </a></li>
			<li class="g16-c-4"><a href=""><img src="../images/portfolio/logo/fredlindesign-23.png" title="fredlindesign logo created by g16media" alt="" /> </a></li>
			<li class="g16-c-4"><a href=""><img src="../images/portfolio/logo/jennyclothing-03-03.png" title="jennyclothing logo created by g16media" alt="" /> </a></li>
			<li class="g16-c-4"><a href=""><img src="../images/portfolio/logo/sonistech-10-10.png" title="sonistech logo created by g16media" alt="" /> </a></li>
			<li class="g16-c-4"><a href=""><img src="../images/portfolio/logo/mindset-15.png" title="mindset logo created by g16media" alt="" /> </a></li>
			<li class="g16-c-4"><a href=""><img src="../images/portfolio/logo/britappliabces-34.png" title="britappliabces logo created by g16media" alt="" /> </a></li>
			<li class="g16-c-4"><a href=""><img src="../images/portfolio/logo/tennismall-32.png" title="tennismall logo created by g16media" alt="" /> </a></li>
			<li class="g16-c-4"><a href=""><img src="../images/portfolio/logo/vixywines-29.png" title="vixywines logo created by g16media" alt="" /> </a></li>
		</ul>
	   </li>
	 </ul>
	</nav>
	</div>

Toggled navigation

This type of navigation is active on clicking and hence disappear concurrently when action button is called back. It is 100% mobile friendly.

The color of the pointer may be changed or rather hidden if need be on the css rule, create a separate style sheet and define the above rule as shown below.

 
            .nav-toggle  input:checked + label::before  {
            /* Changing the color from dark grey to silver color*/
            /*border-bottom: 15px solid #333;*/
            border-bottom: 15px solid #CBCCCD !important;
            /* Hide the pointer */
            display:none;
            } 

Click the icon to reveal the information. Icon use can be from icon class or ordinarily assign html character such as vellip and hellip to display navigation button vertically and horizontally respectively. .

 
        <!-- Toggle Main Container -->
  <div class="nav-toggle">
	<!-- Visible on smaller screen device -->
	<input id="mobile-8" type="checkbox" hidden="hidden" />
	<label for="mobile-8"><span class="hellip color-text-orangeRed"> … </span></label>
	<!-- The navigation container -->
	<nav class="box-shadow-floated">
	  <ul>
            <li><a href="">Home</a></li>
            <li><a href="">About us</a></li>
            <li><a href="">Services</a></li>
            <li><a href="">Our Teams</a></li>
            <li><a href="">Projects</a></li>
	  </ul>
	</nav>
  </div>

vertical nav icon

This option define both the icon and corresponding text links vertically and the size of the icon and text can be changed simultaneouly by simply calling a size class such as medium, large, xlarge and so on to modify the existing size. The same approach is true for all available navigations.

 
  <div class="nav-icon">
    <!-- Mobile friendly -->
    <input id="mobile-6" type="checkbox" />
	<label for="mobile-6"><span class="icon icon-menu"></span></label>
	<nav>
     <ul class="border-all-xxs">
		<li><a href="" class="color-text-alizarinCrimson"><span class="icon icon-home"></span>
            Home</a></li>
		<li><a href=""><span class="icon icon-mail2"></span>Mail List</a></li>
		<li><a href=""><span class="icon icon-cogs"></span>Service</a></li>
		<li><a href=""><span class="icon icon-users"></span>Customer</a></li>
		<li><a href=""><span class="icon icon-bullhorn"></span>Testimonials</a></li>
		<li><a href=""><span class="icon icon-newspaper"></span>News</a></li>
	 </ul>
	</nav>
  </div>  

Navigation leftslide

Mouse over the menu icon to reveal the left slide.

 
  <div class="nav-hoverLeftSlide">
   <nav>
	<ul>
	 <li>
	   <span class="">⋮</span>
	   <ul>
		<li><a href="">Home</a></li>
		<li><a href="">About us</a></li>
		<li><a href="">Services</a></li>
		<li><a href="">Our Teams</a></li>
		<li><a href="">Projects</a></li>
		<li><a href="">Contact</a></li>
		<li><a href="">Blog</a></li>
		<li><a href="">Events</a></li>
		<li><a href="">Gallery</a></li>
		<li><a href="">Supports</a></li>
	   </ul>
	</li>
   </ul>
  </nav>
 </div>    

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.