Elements Design: Retro Vector Money Clipart 40s 50s 60s
Elements Design: Flat Design Icons Set Vol2 PSD

JS Plugin: Responsive Nav


From Wikipedia: ``Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).

Elements of responsive web design
A site designed with RWD uses CSS3 media queries, an extension of the @media rule, to adapt the layout to the viewing environment—along with fluid proportion-based grids and flexible images:

  • Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.
  • The fluid grid concept calls for page element sizing to be in relative units like percentages or ems, rather than absolute units like pixels or points.
  • Flexible images are also sized in relative units (up to 100%), so as to prevent them from displaying outside their containing element.``

From responsive-nav: ``Responsive navigation plugin without library dependencies and with fast touch screen support. Try it out by resizing this window.``

Resource Plugin: Responsive Nav

main link files
<!-- Put these into the <head> -->
<link rel="stylesheet" href="responsive-nav.css">
<script src="responsive-nav.js"></script>

navigation and mark-up
<div id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Contact</a></li>

activate plugin
<!-- Put this right before the </body> closing tag -->
  var navigation = responsiveNav("#nav");

Resource Plugin: Responsive Nav

  • Weighs only 1.7 KB minified and Gzip’ed.
  • Doesn’t require any external libraries.
  • Uses CSS3 transitions, touch events and simple markup.
  • Removes the 300 ms delay between a physical tap and the click event.
  • Makes it possible to use CSS3 transitions with height: auto.
  • Built with accessibility in mind, meaning that everything works on screen readers and with JavaScript disabled, too.
  • Works in all major desktop and mobile browsers, including IE 6 and up.

demo 2

Tags: responsive, navigation, menu, css, plugin, jquery, ajax, media, layout, mobile, desktop

Leave a Comment

No Comment

© Creative3x Ltd.