Progressive Responsive Navigation from Across the Wire

Pattern

Client Work → Progressive Responsive Navigation

HTML

CSS

html,body,div,span,applet,object,br,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

body {
	font: 14px/1em Geneva, Arial, sans-serif;
	padding: 1em;
}
nav {
	a {
		color: inherit;
		display: block;
		text-decoration: none;
	}
}

.main-navigation {
	.cf;
	.8em;
	text-shadow: 0 1px 1px #fff;
	
	ul, li, a {
		float: left;
	}
	ul {
		border: 1px solid #ddd;
		.border-radius();
		.linear-gradient();
	}
	li {
		position: relative;
		border-right: 1px solid #ddd;
	}
	li:hover {
		a {
			.linear-gradient(#dfdfdf, #c0bebe, 100%);
		}
		.children {
			left: 50%;
			
			a {
				background: none;
			}
			a:hover {
				background: #dff2ff;
			}
		}
	}
	li:last-child {
		border-right: none;
	}
	a {
		.border-radius(3px);
		px;
		line-px;
		margin: 3px;
		padding: 0 15px;
	}
	.children {
		background: #fff;
		.box-shadow();
		left: -999em;
		margin-left: -65px;
		position: absolute;
		top: 30px;
		px;
		z-index: 99;
		
		li, a {
			float: none;
		}
		li {
			border-right: none;
		}
		a {
			.border-radius(3px);
			px;
			line-px;
			margin: 3px;
		}
	}
}

.border-radius (@radius: 5px) {
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
	border-radius: @radius;
}
.box-shadow (@x: 0, @y: 5px, @blur: 5px, @spread: -5px, @color: #000) {
	-moz-box-shadow: @x @y @blur @spread @color;
	-webkit-box-shadow: @x @y @blur @spread @color;
	box-shadow: @x @y @blur @spread @color;
}
.linear-gradient (@start: #fff, @end: #ddd, @percent: 100%) {
	background: @start; /* Old */
	background: -moz-linear-gradient(top,  @start 0%, @end @percent); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@start), color-stop(@percent,@end)); /* Chrome, Safari 4+ */
	background: -webkit-linear-gradient(top,  @start 0%,@end @percent); /* Chrome 10+, Safari 5.1+ */
	background: -o-linear-gradient(top,  @start 0%,@end @percent); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  @start 0%,@end @percent); /* IE 10+ */
	background: linear-gradient(top,  @start 0%,@end @percent); /* W3C */
}

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

@media only screen and (max-px) {
	.main-navigation {
		ul {
			border: none;
			background: none;
			.border-radius(0);
		}
		li {
			border-right: none;
		}
		li:hover {
			a {
				.linear-gradient(#ff8400, #e07400, 100%);
				color: #fff;
				text-shadow: 0 -1px 1px rgba(0,0,0,0.5);
			}
			.children {			
				a {
					color: #000;
					text-shadow: 0 1px 1px #fff;
				}
				a:hover {
					.linear-gradient(#ff8400, #e07400, 100%);
					color: #fff;
					text-shadow: 0 -1px 1px rgba(0,0,0,0.5);
				}
			}
		}
		a {
			border: 1px solid #ddd;
			.border-radius();
			.2em;
			auto;
			.linear-gradient();
			line-em;
			padding: 15px;
		}
		.children {
			border: 1px solid #ddd;
			.border-radius(5px);
			top: 40px;
		}
	}
	.instructions {
		.border-radius();
		color: #fff;
		.2em;
		.linear-gradient(#ff8400, #e07400, 100%);
		line-em;
		margin: 0 0 5px;
		padding: 5px 10px;
		text-shadow: 0 -1px 1px rgba(0,0,0,0.5);
	}
}

.main-navigation select {
	.5em;
}

Notes

A progressive responsive navigation bar built for Lake Avenue Restaurant & Bar using LESS CSS, jQuery, and HTML5.

Across the Wire // Providing local services to local companies in the Twin Ports.

Pattern

Client Work → Progressive Responsive Navigation

HTML

CSS

Notes