Hit enter after type your search item

Create CSS and jQuery responsive menu/navigation

Creating responsive menus by a jQuery plug-in

The simple and light-weight (1K) responsive-navigation jQuery plug-in enables creating the responsive menus for your website. It used the font-awesome icons with the menu item and also creates sub menu that is adaptive to the user’s screen.

Demo
Developer’s page Download plug-in

Setting up responsive-navigation plug-in

You need to include the 1Kb main.js file before the body closing tag (after jQuery library).


 

Also include the style.css and font-awesome CSS file in the <head> section:

<link rel=”stylesheet” href=”css/responsive-navigation/style.css”>

<link href=”//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css” rel=”stylesheet”>

The markup for creating menu

The markup contains the <nav> tag with <ul>, <li>, and <a> tags as shown in the demo below.

A demo of responsive jQuery menu with CSS

For the demo, a few top menu and sub menu items are created. The font-awesome icons are used for the top menu items. The main items with submenu contain a down arrow that distinguishes it from the items without sub-menu. Have a look at the demo and code:

jQuery responsive menu

See online demo and code

The markup for this example for creating the navigation bar:


 

If you notice at the first div, this is for responsive or small devices like smartphones. Try resizing your screen and this is how it should look:

jQuery responsive responsive

A demo of changing the color scheme of the menu

The plug-in comes up with a style.css file that specifies the colors and other properties of the navigation bar.

You may modify the CSS easily and customize the navigation colors, text properties etc. See this demo where I have changed a few properties of CSS to change the look of it:

jQuery responsive responsive style

See online demo and code

Only the reference to the style file is changed in above demo from style.css to style2.css.

I have changed only a few classes for illustration that include:


 

Just play with it and apply the style, font etc as you need.

This div height required for enabling the sticky sidebar