{"id":3339,"date":"2017-04-11T07:44:19","date_gmt":"2017-04-11T07:44:19","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=3339"},"modified":"2023-10-16T09:26:17","modified_gmt":"2023-10-16T09:26:17","slug":"create-css-and-jquery-responsive-menunavigation","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/create-css-and-jquery-responsive-menunavigation\/","title":{"rendered":"Create CSS and jQuery responsive menu\/navigation"},"content":{"rendered":"

Creating responsive menus by a jQuery plug-in<\/strong><\/h3>\n

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

Developer\u2019s page<\/a> Download plug-in<\/a><\/strong><\/h6>\n

Setting up responsive-navigation plug-in<\/strong><\/h3>\n

You need to include the 1Kb main.js file before the body closing tag (after jQuery library).<\/p>\n

<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.1.1\/jquery.min.js\"><\/script>\r\n\r\n<script src=\"js\/responsive-navigation\/main.js\"><\/script><\/pre>\n
Also include the style.css and font-awesome CSS file in the <head> section:<\/p>\n
<link rel=”stylesheet” href=”css\/responsive-navigation\/style.css”><\/p>\n
<link href=”\/\/maxcdn.bootstrapcdn.com\/font-awesome\/4.2.0\/css\/font-awesome.min.css” rel=”stylesheet”><\/p><\/blockquote>\n
The markup for creating menu<\/strong><\/h4>\n
The markup contains the <nav> tag with <ul>, <li>, and <a> tags as shown in the demo below.<\/p>\n
A demo of responsive jQuery menu with CSS<\/strong><\/h3>\n
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 submenu. Have a look at the demo and code:<\/p>\n
\"jQuery<\/p>\n
See online demo and code<\/strong><\/a><\/h6>\n
The markup for this example for creating the navigation bar:<\/p>\n
<!-- header starts -->\r\n\r\n<header>\r\n\r\n\u00a0 <!-- responsive nav bar -->\r\n\r\n\u00a0 <div class=\"nav-bar\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <a href=\"\"><i class=\"fa fa-bars\"><\/i><span>Menu<\/span><\/a>\r\n\r\n\u00a0\u00a0 <\/div>\r\n\r\n\u00a0\u00a0 <!-- navigation -->\r\n\r\n\u00a0\u00a0 <nav>\r\n\r\n\u00a0\u00a0\u00a0 <ul>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <li><a href=\"https:\/\/www.jquery-az.com\/\"><i class=\"fa fa-home\"><\/i>Tutorials<\/a><\/li>\r\n\r\n  \u00a0\u00a0\u00a0\u00a0 <li><a href=\"https:\/\/www.jquery-az.com\/privacy-policy\/\"><i class=\"fa fa-cog\"><\/i>Privacy<\/a><\/li>\r\n\r\n   \u00a0\u00a0\u00a0\u00a0 <li class=\"sub-menu\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <a href=\"https:\/\/www.jquery-az.com\/jquery-tips\/\"><i class=\"fa fa-street-view\"><\/i>jQuery <i class=\"fa fa-angle-down\"><\/i><\/a>\r\n\r\n\u00a0\u00a0\u00a0 <!-- children nav -->\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <ul class=\"children\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <li><a href=\"https:\/\/www.jquery-az.com\/tag\/modals\/\"><span>-<\/span> Tutorials<\/a><\/li>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <li><a href=\"https:\/\/www.jquery-az.com\/tag\/table\/\"><span>-<\/span> Plug-ins<\/a><\/li>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <li><a href=\"https:\/\/www.jquery-az.com\/tag\/sliders\/\"><span>-<\/span> Sliders<\/a><\/li>\r\n\r\n\u00a0    \u00a0\u00a0\u00a0 <li><a href=\"https:\/\/www.jquery-az.com\/tag\/animations\/\"><span>-<\/span> Animations<\/a><\/li>\r\n\r\n    \u00a0\u00a0\u00a0\u00a0 <li><a href=\"https:\/\/www.jquery-az.com\/tag\/forms\/\"><span>-<\/span> Forms<\/a><\/li>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/ul>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <\/li>\r\n\r\n\u00a0   \u00a0 <li class=\"sub-menu\"><a href=\"#\"><i class=\"fa fa-eye-slash\"><\/i>Web <i class=\"fa fa-angle-down\"><\/i><\/a>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <ul class=\"children\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <li><a href=\"https:\/\/www.jquery-az.com\/css-tutorials\/\"><span>-<\/span> CSS<\/a><\/li>\r\n\r\n\u00a0\u00a0  \u00a0\u00a0\u00a0 <li><a href=\"https:\/\/www.jquery-az.com\/html-tutorials\/\"><span>-<\/span> HTML<\/a><\/li>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <li><a href=\"https:\/\/www.jquery-az.com\/bootstrap-tips-tutorials\/\"><span>-<\/span> Bootstrap<\/a><\/li>\r\n\r\n   \u00a0\u00a0\u00a0\u00a0 <li><a href=\"\"><span>-<\/span> <\/a><\/li>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/ul>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <\/li>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <li><a href=\"https:\/\/www.jquery-az.com\/contact\/\"><i class=\"fa fa-envelope\"><\/i>Contact<\/a><\/li>\r\n\r\n\u00a0\u00a0 <\/ul>\r\n\r\n\u00a0 <\/nav> <!-- navigation end -->\r\n\r\n<\/header> <!-- header end --><\/pre>\n
 <\/p>\n
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:<\/p>\n
\"jQuery<\/p>\n
A demo of changing the color scheme of the menu<\/strong><\/h3>\n
The plug-in comes up with a style.css file that specifies the colors and other properties of the navigation bar.<\/p>\n
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:<\/p>\n
\"jQuery<\/p>\n
See online demo and code<\/strong><\/a><\/h6>\n
Only the reference to the style file is changed in above demo from style.css to style2.css.<\/p>\n
I have changed only a few classes for illustration that include:<\/p>\n
header nav {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 background: #408080;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 z-index: 1000;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 width:100%;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 margin:auto;\r\n\r\n}\r\n\r\nheader nav ul li:hover{\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 background: #DFDF00;\r\n\r\n}\r\n\r\nheader nav ul li:hover i{\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 color:#004000;\r\n\r\n}<\/pre>\n
 <\/p>\n
Just play with it and apply the style, font etc as you need.<\/p>\n","protected":false},"excerpt":{"rendered":"
Creating responsive menus by a jQuery plug-in The simple and light-weight (1K) responsive-navigation jQuery plug-in enables creating responsive menus for your website. It uses font-awesome icons with the menu item and also creates sub menu that is adaptive to the user’s screen. Developer\u2019s page Download plug-in Setting up responsive-navigation plug-in You need to include the … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":3342,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[34],"yoast_head":"\nCreate CSS and jQuery responsive menu\/navigation<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.jquery-az.com\/create-css-and-jquery-responsive-menunavigation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create CSS and jQuery responsive menu\/navigation\" \/>\n<meta property=\"og:description\" content=\"Creating responsive menus by a jQuery plug-in The simple and light-weight (1K) responsive-navigation jQuery plug-in enables creating responsive menus for your website. It uses font-awesome icons with the menu item and also creates sub menu that is adaptive to the user’s screen. Developer\u2019s page Download plug-in Setting up responsive-navigation plug-in You need to include the ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/create-css-and-jquery-responsive-menunavigation\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-04-11T07:44:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-16T09:26:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2017\/04\/131.0_3-jQuery-responsive-responsive-style.png\" \/>\n\t<meta property=\"og:image:width\" content=\"677\" \/>\n\t<meta property=\"og:image:height\" content=\"328\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/create-css-and-jquery-responsive-menunavigation\/\",\"url\":\"https:\/\/www.jquery-az.com\/create-css-and-jquery-responsive-menunavigation\/\",\"name\":\"Create CSS and jQuery responsive menu\/navigation\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2017-04-11T07:44:19+00:00\",\"dateModified\":\"2023-10-16T09:26:17+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/create-css-and-jquery-responsive-menunavigation\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/create-css-and-jquery-responsive-menunavigation\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/create-css-and-jquery-responsive-menunavigation\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create CSS and jQuery responsive menu\/navigation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create CSS and jQuery responsive menu\/navigation","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.jquery-az.com\/create-css-and-jquery-responsive-menunavigation\/","og_locale":"en_US","og_type":"article","og_title":"Create CSS and jQuery responsive menu\/navigation","og_description":"Creating responsive menus by a jQuery plug-in The simple and light-weight (1K) responsive-navigation jQuery plug-in enables creating responsive menus for your website. It uses font-awesome icons with the menu item and also creates sub menu that is adaptive to the user’s screen. Developer\u2019s page Download plug-in Setting up responsive-navigation plug-in You need to include the ... Read more","og_url":"https:\/\/www.jquery-az.com\/create-css-and-jquery-responsive-menunavigation\/","article_published_time":"2017-04-11T07:44:19+00:00","article_modified_time":"2023-10-16T09:26:17+00:00","og_image":[{"width":677,"height":328,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2017\/04\/131.0_3-jQuery-responsive-responsive-style.png","type":"image\/png"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/create-css-and-jquery-responsive-menunavigation\/","url":"https:\/\/www.jquery-az.com\/create-css-and-jquery-responsive-menunavigation\/","name":"Create CSS and jQuery responsive menu\/navigation","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2017-04-11T07:44:19+00:00","dateModified":"2023-10-16T09:26:17+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/create-css-and-jquery-responsive-menunavigation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/create-css-and-jquery-responsive-menunavigation\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/create-css-and-jquery-responsive-menunavigation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"Create CSS and jQuery responsive menu\/navigation"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/3339"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=3339"}],"version-history":[{"count":5,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/3339\/revisions"}],"predecessor-version":[{"id":10740,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/3339\/revisions\/10740"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/3342"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=3339"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=3339"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=3339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}