{"id":1206,"date":"2014-02-09T16:31:47","date_gmt":"2014-02-09T21:31:47","guid":{"rendered":"http:\/\/andrewpallant.ca\/wordpress\/?p=1206"},"modified":"2014-03-01T11:39:46","modified_gmt":"2014-03-01T16:39:46","slug":"simple-jquery-menu","status":"publish","type":"post","link":"http:\/\/andrewpallant.ca\/wordpress\/simple-jquery-menu\/","title":{"rendered":"Simple jQuery Menu"},"content":{"rendered":"<p>Now days it seems that there is a plug-in for almost any jQuery task. \u00a0The trouble with plug-ins is that they are often not flexible enough and the designer \/ developer who is using them is not practicing developing their own solution. \u00a0It is too easy to Google for a plug-in to do the job. \u00a0Googling for the correct solution may take just as long as creating one yourself. \u00a0 Do not take me wrong; I use plug-ins, but I use plug-ins when it is a more complicated solution and not worth my time or it is just a one-off solution.<!--more-->\u00a0I believe a designer \/ developer should start to rely on their own talents a little more and save the plug-ins for something that is more complex. \u00a0By developing your own solutions, you can also build your own reusable libraries. \u00a0In an hour ( while chasing kids and making dinner ) I developed a quick no-frills jQuery menu with some basic CSS styling. \u00a0The jQuery menu in this example gives you an option of a regular button menu or a button with a pull down. \u00a0Given more time, I would have added some animations and style. \u00a0You can certainly make it more complex with a little more work.<\/p>\n<p><a href=\"http:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/02\/MenuBar.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1205 alignnone\" alt=\"MenuBar\" src=\"http:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/02\/MenuBar.png\" width=\"564\" height=\"117\" srcset=\"http:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/02\/MenuBar.png 705w, http:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/02\/MenuBar-300x62.png 300w\" sizes=\"(max-width: 564px) 100vw, 564px\" \/><\/a><\/p>\n<p><span style=\"line-height: 1.5em;\">The message of this blog is to show you how easy it is to make your own jQuery menu and encourage you to develop more of your own solutions.<\/span><\/p>\n<p>Run Sample:\u00a0\u00a0<a title=\"Rum Sample jQuery Menu\" href=\"http:\/\/unlatched.com\/sample\/menubar\/menu.htm\" target=\"_blank\">http:\/\/unlatched.com\/sample\/menubar\/menu.htm<\/a><\/p>\n<p>Download Full Sample Code: <a title=\"Download Sample jQuery Menu\" href=\" http:\/\/unlatched.com\/sample\/menubar\/menu.zip\" target=\"_blank\">http:\/\/unlatched.com\/sample\/menubar\/menu.zip<\/a><\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Quick Peak at the Code:\u00a0<\/strong><\/span><\/p>\n<pre style=\"font-family: arial; font-size: 12px; border: 1px dashed #CCCCCC; width: 99%; height: auto; overflow: auto; background: #f0f0f0; padding: 0px; color: #000000; text-align: left; line-height: 20px;\"><code style=\"color: #000000; word-wrap: normal;\"> &lt;script type=\"text\/javascript\"&gt;  \r\n     $(document).ready(function () {  \r\n       \/\/ Setup Menu  \r\n       $(\".menu\").click(function (event) {  \r\n         \/\/ Hide All SubMenus  \r\n         var id = this.id;  \r\n         var isVisible = $(\"#\" + id + '_sub').is(\":visible\");  \r\n         $(\"[id$='_sub']\").hide();  \r\n         \/\/ Show\/Hide Submenu for Clicked Element  \r\n         if (isVisible) {  \r\n           $(\"#\" + id + '_sub').hide();  \r\n         } else {  \r\n           $(\"#\" + id + '_sub').show();  \r\n         }  \r\n         \/\/ Get Position Info  \r\n         var pos = $(this).position();  \r\n         var otwidth = $(this).outerWidth();  \r\n         var height = $(this).height();  \r\n         \/\/ Align Left \/ Top - Bottom  \r\n         $(\"#\" + id + '_sub').css({  \r\n           position: \"absolute\",  \r\n           top: (height - 8) + \"px\",  \r\n           left: (pos.left) + \"px\",  \r\n           width: (otwidth - 8) + \"px\"  \r\n         });  \r\n         event.stopPropagation();  \r\n       });  \r\n       $(document).click(function (event) {  \r\n         \/\/ Clear Menu  \r\n         $(\"[id$='_sub']\").hide();  \r\n         event.stopPropagation();  \r\n       });  \r\n     });  \r\n   &lt;\/script&gt;  \r\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Now days it seems that there is a plug-in for almost any jQuery task. \u00a0The trouble with plug-ins is that they are often not flexible enough and the designer \/ developer who is using them is not practicing developing their own solution. \u00a0It is too easy to Google for a plug-in to do the job. &hellip; <a href=\"http:\/\/andrewpallant.ca\/wordpress\/simple-jquery-menu\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Simple jQuery Menu<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[112,141,149,96],"tags":[193],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\r\n<title>Simple jQuery Menu - Software Developer In London by Andrew Pallant<\/title>\r\n<meta name=\"description\" content=\"Simple jQuery Menu - Software Developer In London by Andrew Pallant\" \/>\r\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\r\n<link rel=\"canonical\" href=\"http:\/\/andrewpallant.ca\/wordpress\/simple-jquery-menu\/\" \/>\r\n<meta property=\"og:locale\" content=\"en_US\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"Simple jQuery Menu - Software Developer In London by Andrew Pallant\" \/>\r\n<meta property=\"og:description\" content=\"Simple jQuery Menu - Software Developer In London by Andrew Pallant\" \/>\r\n<meta property=\"og:url\" content=\"http:\/\/andrewpallant.ca\/wordpress\/simple-jquery-menu\/\" \/>\r\n<meta property=\"og:site_name\" content=\"LDNDeveloper\" \/>\r\n<meta property=\"article:published_time\" content=\"2014-02-09T21:31:47+00:00\" \/>\r\n<meta property=\"article:modified_time\" content=\"2014-03-01T16:39:46+00:00\" \/>\r\n<meta property=\"og:image\" content=\"http:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/02\/MenuBar.png\" \/>\r\n<meta name=\"author\" content=\"ldnDeveloper\" \/>\r\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\r\n<meta name=\"twitter:creator\" content=\"@LdnDeveloper\" \/>\r\n<meta name=\"twitter:site\" content=\"@LdnDeveloper\" \/>\r\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"ldnDeveloper\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\/\/andrewpallant.ca\/wordpress\/simple-jquery-menu\/#article\",\"isPartOf\":{\"@id\":\"http:\/\/andrewpallant.ca\/wordpress\/simple-jquery-menu\/\"},\"author\":{\"name\":\"ldnDeveloper\",\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84\"},\"headline\":\"Simple jQuery Menu\",\"datePublished\":\"2014-02-09T21:31:47+00:00\",\"dateModified\":\"2014-03-01T16:39:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/andrewpallant.ca\/wordpress\/simple-jquery-menu\/\"},\"wordCount\":261,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84\"},\"image\":{\"@id\":\"http:\/\/andrewpallant.ca\/wordpress\/simple-jquery-menu\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/02\/MenuBar.png\",\"keywords\":[\"jQuery Made Simple\"],\"articleSection\":[\"Design\",\"Developement\",\"jQuery\",\"Web\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"http:\/\/andrewpallant.ca\/wordpress\/simple-jquery-menu\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/andrewpallant.ca\/wordpress\/simple-jquery-menu\/\",\"url\":\"http:\/\/andrewpallant.ca\/wordpress\/simple-jquery-menu\/\",\"name\":\"Simple jQuery Menu - Software Developer In London by Andrew Pallant\",\"isPartOf\":{\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/andrewpallant.ca\/wordpress\/simple-jquery-menu\/#primaryimage\"},\"image\":{\"@id\":\"http:\/\/andrewpallant.ca\/wordpress\/simple-jquery-menu\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/02\/MenuBar.png\",\"datePublished\":\"2014-02-09T21:31:47+00:00\",\"dateModified\":\"2014-03-01T16:39:46+00:00\",\"description\":\"Simple jQuery Menu - Software Developer In London by Andrew Pallant\",\"breadcrumb\":{\"@id\":\"http:\/\/andrewpallant.ca\/wordpress\/simple-jquery-menu\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/andrewpallant.ca\/wordpress\/simple-jquery-menu\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/andrewpallant.ca\/wordpress\/simple-jquery-menu\/#primaryimage\",\"url\":\"http:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/02\/MenuBar.png\",\"contentUrl\":\"http:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/02\/MenuBar.png\",\"width\":705,\"height\":146},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/andrewpallant.ca\/wordpress\/simple-jquery-menu\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/andrewpallant.ca\/wordpress\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Simple jQuery Menu\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/#website\",\"url\":\"https:\/\/andrewpallant.ca\/wordpress\/\",\"name\":\"LDNDeveloper\",\"description\":\"Learning, Growing and Sharing.\",\"publisher\":{\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/andrewpallant.ca\/wordpress\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84\",\"name\":\"ldnDeveloper\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2017\/05\/cropped-AAEAAQAAAAAAAAXQAAAAJDQxMGRlMzFjLWM4ODctNDk1NC05M2EyLWE1NDNhNTRiZjVlYw-2.jpg\",\"contentUrl\":\"https:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2017\/05\/cropped-AAEAAQAAAAAAAAXQAAAAJDQxMGRlMzFjLWM4ODctNDk1NC05M2EyLWE1NDNhNTRiZjVlYw-2.jpg\",\"width\":512,\"height\":512,\"caption\":\"ldnDeveloper\"},\"logo\":{\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/image\/\"},\"description\":\"Andrew Pallant (@LdnDeveloper) has been a web, database and desktop developer for over 16 years. Andrew has worked on projects that ranged from factory automation to writing business applications. Most recently he has been heavily involved in various forms for ecommerce projects. Over the years Andrew has worn many hats: Project Manager, IT Manager, Lead Developer, Supervisor of Developers and many more - See more at: http:\/\/www.unlatched.com\/#sthash.8DiTkpKy.dpuf\",\"sameAs\":[\"http:\/\/www.andrewpallant.ca\",\"https:\/\/x.com\/LdnDeveloper\"],\"url\":\"http:\/\/andrewpallant.ca\/wordpress\/author\/ldndeveloper\/\"}]}<\/script>\r\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Simple jQuery Menu - Software Developer In London by Andrew Pallant","description":"Simple jQuery Menu - Software Developer In London by Andrew Pallant","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":"http:\/\/andrewpallant.ca\/wordpress\/simple-jquery-menu\/","og_locale":"en_US","og_type":"article","og_title":"Simple jQuery Menu - Software Developer In London by Andrew Pallant","og_description":"Simple jQuery Menu - Software Developer In London by Andrew Pallant","og_url":"http:\/\/andrewpallant.ca\/wordpress\/simple-jquery-menu\/","og_site_name":"LDNDeveloper","article_published_time":"2014-02-09T21:31:47+00:00","article_modified_time":"2014-03-01T16:39:46+00:00","og_image":[{"url":"http:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/02\/MenuBar.png"}],"author":"ldnDeveloper","twitter_card":"summary_large_image","twitter_creator":"@LdnDeveloper","twitter_site":"@LdnDeveloper","twitter_misc":{"Written by":"ldnDeveloper","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/andrewpallant.ca\/wordpress\/simple-jquery-menu\/#article","isPartOf":{"@id":"http:\/\/andrewpallant.ca\/wordpress\/simple-jquery-menu\/"},"author":{"name":"ldnDeveloper","@id":"https:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84"},"headline":"Simple jQuery Menu","datePublished":"2014-02-09T21:31:47+00:00","dateModified":"2014-03-01T16:39:46+00:00","mainEntityOfPage":{"@id":"http:\/\/andrewpallant.ca\/wordpress\/simple-jquery-menu\/"},"wordCount":261,"commentCount":0,"publisher":{"@id":"https:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84"},"image":{"@id":"http:\/\/andrewpallant.ca\/wordpress\/simple-jquery-menu\/#primaryimage"},"thumbnailUrl":"http:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/02\/MenuBar.png","keywords":["jQuery Made Simple"],"articleSection":["Design","Developement","jQuery","Web"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["http:\/\/andrewpallant.ca\/wordpress\/simple-jquery-menu\/#respond"]}]},{"@type":"WebPage","@id":"http:\/\/andrewpallant.ca\/wordpress\/simple-jquery-menu\/","url":"http:\/\/andrewpallant.ca\/wordpress\/simple-jquery-menu\/","name":"Simple jQuery Menu - Software Developer In London by Andrew Pallant","isPartOf":{"@id":"https:\/\/andrewpallant.ca\/wordpress\/#website"},"primaryImageOfPage":{"@id":"http:\/\/andrewpallant.ca\/wordpress\/simple-jquery-menu\/#primaryimage"},"image":{"@id":"http:\/\/andrewpallant.ca\/wordpress\/simple-jquery-menu\/#primaryimage"},"thumbnailUrl":"http:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/02\/MenuBar.png","datePublished":"2014-02-09T21:31:47+00:00","dateModified":"2014-03-01T16:39:46+00:00","description":"Simple jQuery Menu - Software Developer In London by Andrew Pallant","breadcrumb":{"@id":"http:\/\/andrewpallant.ca\/wordpress\/simple-jquery-menu\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/andrewpallant.ca\/wordpress\/simple-jquery-menu\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/andrewpallant.ca\/wordpress\/simple-jquery-menu\/#primaryimage","url":"http:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/02\/MenuBar.png","contentUrl":"http:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/02\/MenuBar.png","width":705,"height":146},{"@type":"BreadcrumbList","@id":"http:\/\/andrewpallant.ca\/wordpress\/simple-jquery-menu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/andrewpallant.ca\/wordpress\/"},{"@type":"ListItem","position":2,"name":"Simple jQuery Menu"}]},{"@type":"WebSite","@id":"https:\/\/andrewpallant.ca\/wordpress\/#website","url":"https:\/\/andrewpallant.ca\/wordpress\/","name":"LDNDeveloper","description":"Learning, Growing and Sharing.","publisher":{"@id":"https:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/andrewpallant.ca\/wordpress\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84","name":"ldnDeveloper","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/image\/","url":"https:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2017\/05\/cropped-AAEAAQAAAAAAAAXQAAAAJDQxMGRlMzFjLWM4ODctNDk1NC05M2EyLWE1NDNhNTRiZjVlYw-2.jpg","contentUrl":"https:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2017\/05\/cropped-AAEAAQAAAAAAAAXQAAAAJDQxMGRlMzFjLWM4ODctNDk1NC05M2EyLWE1NDNhNTRiZjVlYw-2.jpg","width":512,"height":512,"caption":"ldnDeveloper"},"logo":{"@id":"https:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/image\/"},"description":"Andrew Pallant (@LdnDeveloper) has been a web, database and desktop developer for over 16 years. Andrew has worked on projects that ranged from factory automation to writing business applications. Most recently he has been heavily involved in various forms for ecommerce projects. Over the years Andrew has worn many hats: Project Manager, IT Manager, Lead Developer, Supervisor of Developers and many more - See more at: http:\/\/www.unlatched.com\/#sthash.8DiTkpKy.dpuf","sameAs":["http:\/\/www.andrewpallant.ca","https:\/\/x.com\/LdnDeveloper"],"url":"http:\/\/andrewpallant.ca\/wordpress\/author\/ldndeveloper\/"}]}},"_links":{"self":[{"href":"http:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/posts\/1206"}],"collection":[{"href":"http:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/comments?post=1206"}],"version-history":[{"count":6,"href":"http:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/posts\/1206\/revisions"}],"predecessor-version":[{"id":1212,"href":"http:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/posts\/1206\/revisions\/1212"}],"wp:attachment":[{"href":"http:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/media?parent=1206"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/categories?post=1206"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/tags?post=1206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}