منو ریسپانسیو رتینا

اگر قصد طراحی یک وب سایت با تکنولوژی های روز  را دارید منو ریسپانسیو retina ready را در پروژه خودتون استفاده کنید .

آموزش استفاده

1. قبل از تگ <head/> فراخوانی css و jquery

   		<link rel="stylesheet" type="text/css" href="css/default.css" />
   		<link rel="stylesheet" type="text/css" href="css/component.css" />
   		<script src="js/modernizr.custom.js"></script>

2. بعد از تگ body کدهای html و jquery

   <div class="main clearfix">
   				<nav id="menu" class="nav">					
   					<ul>
   						<li>
   							<a href="#">
   								<span class="icon">
   									<i aria-hidden="true" class="icon-home"></i>
   								</span>
   								<span>Home</span>
   							</a>
   						</li>
   						<li>
   							<a href="#">
   								<span class="icon"> 
   									<i aria-hidden="true" class="icon-services"></i>
   								</span>
   								<span>Services</span>
   							</a>
   						</li>
   						<li>
   							<a href="#">
   								<span class="icon">
   									<i aria-hidden="true" class="icon-portfolio"></i>
   								</span>
   								<span>Portfolio</span>
   							</a>
   						</li>
   						<li>
   							<a href="#">
   								<span class="icon">
   									<i aria-hidden="true" class="icon-blog"></i>
   								</span>
   								<span>Blog</span>
   							</a>
   						</li>
   						<li>
   							<a href="#">
   								<span class="icon">
   									<i aria-hidden="true" class="icon-team"></i>
   								</span>
   								<span>The team</span>
   							</a>
   						</li>
   						<li>
   							<a href="#">
   								<span class="icon">
   									<i aria-hidden="true" class="icon-contact"></i>
   								</span>
   								<span>Contact</span>
   							</a>
   						</li>
   					</ul>
   				</nav>
   			</div>
   		</div><!-- /container -->
   		<script>
   			//  The function to change the class
   			var changeClass = function (r,className1,className2) {
   				var regex = new RegExp("(?:^|\\s+)" + className1 + "(?:\\s+|$)");
   				if( regex.test(r.className) ) {
   					r.className = r.className.replace(regex,' '+className2+' ');
   			    }
   			    else{
   					r.className = r.className.replace(new RegExp("(?:^|\\s+)" + className2 + "(?:\\s+|$)"),' '+className1+' ');
   			    }
   			    return r.className;
   			};	
   
   			//  Creating our button in JS for smaller screens
   			var menuElements = document.getElementById('menu');
   			menuElements.insertAdjacentHTML('afterBegin','<button type="button" id="menutoggle" class="navtoogle" aria-hidden="true"><i aria-hidden="true" class="icon-menu"> </i> Menu</button>');
   
   			//  Toggle the class on click to show / hide the menu
   			document.getElementById('menutoggle').onclick = function() {
   				changeClass(this, 'navtoogle active', 'navtoogle');
   			}
   		</script>