Simple responsive menu

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: 23px 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 a {
	padding: 3px 12px;
	text-decoration: none;
	color: #ffffff;
	line-height: 100%;
}
.nav a:hover {
	color: #ffffff;
}
.nav .current a {
	color: #510900;
	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 .current { display: block; /* show only current
  • item */ } .nav a { display: block; padding: 5px 5px 5px 32px; text-align: left; color:#EC3002; } .nav a:hover { color: #000000; } .nav .current 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 .current { background: url(images/icon-check.png) no-repeat 10px 7px; } }
  • Continue Reading

    Load JSON data to Table using Jquery

    
    <pre>
    <code>
    //service.json
    {
        "Cities": ["LUSAKA", "HARARE"],
        "Countries": ["ZAMBIA", "ZIMBABWE"]
    }
    </code>
    </pre>
    
    
    
    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="utf-8">
        <title>WCF Client</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    </head>
    <body>
        <table id="location" border='1'>
            <tr>
                <th>Countries</th>
                <th>Cities</th>
            </tr>
        </table>
        <script>
            var service = 'service.json';
    
            $(document).ready(function() {
    
                jQuery.support.cors = true;
    
                $.ajax({
                    type: "GET",
                    // url: service + '/service/',
                    url: service,
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    cache: false,
                    success: function(data) {
    
                        var trHTML = '';
    
                        $.each(data.Countries, function(i, item) {
    
                            trHTML += '<tr><td>' + data.Countries[i] + '</td><td>' + data.Cities[i] + '</td></tr>';
                        });
    
                        $('#location').append(trHTML);
    
                    },
    
                    error: function(msg) {
    
                        alert(msg.responseText);
                    }
                });
            })
        </script>
    </body>
    </html>
    
    
    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