Simple responsive menu using CSS

Simple responsive menu using pure CSS

HTML


<nav class="nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Projects</a></li>
        <li class="active"><a href="#">Contact Us</a></li>
      </ul>
    </nav>

CSS


.nav {
	margin: 20px 0;
	width: 40%;
	float: right;
	text-align: right;
}
.nav ul {
	margin: 0;
	padding: 0;
}
.nav li {
	margin: 0 5px 10px 0;
	padding: 0;
	list-style: none;
	display: inline-block;
	*display:inline; /* ie7 */
}
.nav li a {
	padding: 3px 12px;
	text-decoration: none;
	color: #333;
	line-height: 100%;
}
.nav a:hover,
.nav .active a:hover {
	color: #999;
}
.nav .active a {
	color: #00ff00;
	border-radius: 5px;
}
@media screen and (max-width: 768px) {
	#hdcontainer {
		width: 90%;
	}
	.nav {
		width: 73%;
		position: relative;
		min-height: 40px;
		margin: 15px 0;
	}
	.nav ul {
		width: 235px;
		padding: 5px 0;
		position: absolute;
		top: 0;
		left: 0;
		border: solid 1px #aaa;
		background: #E2E2E2 url('../images/icon-menu.png') no-repeat 185px 12px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		behavior: url(js/PIE.htc);
		box-shadow: 0 1px 2px #898989;
		-moz-box-shadow: 0 1px 2px #898989;
		-webkit-box-shadow: 0 1px 2px #898989;
		filter: progid:DXImageTransform.Microsoft.Shadow(Color=#000000, Strength=4, Direction=70), progid:DXImageTransform.Microsoft.Shadow(Color=#000000, Strength=4, Direction=140);
		behavior: url(js/PIE.htc);
		z-index: 6000;
	}
	.nav li {
		display: none; /* hide all items */
		margin: 0;
	}
	.nav .active {
		display: block; /* show only current item */
	}
	 .nav a {
		display: block;
		padding: 5px 5px 32px;
		text-align: left;
		color: #EC3002;
	}
	.nav a:hover {
		color: #000000;
	}
	.nav .active a {
		background: none;
		color: #000000;
	}
	/* on nav hover */
	.nav ul:hover {
		background-image: none;
	}
	.nav ul:hover li {
		display: block;
		margin: 0 0 5px;
		color: #000000;
	}
	.nav ul:hover .active {
		background: url('../images/icon-check.png') no-repeat 10px 7px;
	}
}

Download Source code

Responsive Menu

Continue Reading

How to do minification and concatenate the files using Gulp JS

Minify and concatenate the JS files using gulp js

Minify and concatenate the multiple JS files into singles file using gulp.

Step 1: Gulp plugin

Declare the gulp plugins in gulpfile.js file.
var gulp = require(‘gulp’);

Step 2: Uglify plugin

Declare the uglify plugin for minifies the required js files.
var uglify = require(‘gulp-uglify’);

Step 3: Concat plugin

Declare the concat plugin for combining the JS files into single file.
Var concat = require(‘gulp-concat’);

Step 4: Creating gulp task

Creating gulp task for Minification and concat process.

gulp.task(‘scripts’, function() {
gulp.src(‘src/*.js’)
.pipe(concat(‘all.min.js’))
.pipe(uglify())
.pipe(gulp.dest(‘dist’));
});

Gulp Task code Explanation:

gulp.src – It defines the input files path for processing
pipe – It is used to chain multiple tasks together using pipe method.
gulp.dest – It defines the output location for processed files.
Concat – This method combines multiples files into single file. We should declare the output
file name within the brackets.

Overall Source Code for Minify and concatenate the JS files using gulp js.


//gulpfile.js file

//Adding dependencies
var gulp = require('gulp');
varuglify = require('gulp-uglify');
varconcat = require('gulp-concat');

//defining tasks
gulp.task('default', function() {  //default is a task name, we can give any name.
	gulp.src('src/*.js')
	.pipe(concat('all.min.js'))
	.pipe(uglify())
	.pipe(gulp.dest('dist'));
});

Project Folder Structure:

Gulp folder structure

Continue Reading

How to install gulp js?

Steps to installing gulp js:

First we should install npm using below command.
npm install

To install npm in development environment use below command.
npm install –save—dev

After that Create empty package.json file in node folder then run the below command.
npm init

To install gulp, run the below command.
npm install gulp -g

To install gulp in project directory use below command.
npm install –save-dev gulp-install

After that create gulpfile.js file locally in the corresponding folder.

Folder Structure:
Gulp folder structure

Continue Reading