{"id":4833,"date":"2009-08-03T21:39:12","date_gmt":"2009-08-03T13:39:12","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=4833"},"modified":"2020-09-22T16:54:28","modified_gmt":"2020-09-22T08:54:28","slug":"drop-down-menu-30-free-scripts-to-enhance-header-navigation","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/drop-down-menu-30-free-scripts-to-enhance-header-navigation\/","title":{"rendered":"Useful CSS and JavaScripts to Enhance Header Navigation"},"content":{"rendered":"<p><strong>Drop-down menu<\/strong> (also known as pull-down menu) is an essential in most web design. It plays important role in the creation of an effective and user friendly website. It\u2019s a good solution to trim down long menu that is overwhelming the screen space, getting them to display in a more organize category-sub category pattern.<\/p>\n<p>In this article, we\u2019d like to show you some of the <strong>best drop-down menu scripts<\/strong> we come to know. These drop-down menu varies from <em>CSS<\/em> only, <em>CSS & Javascripts<\/em> and menu that will work with your current Javascript library like <em><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/jquery.com\/\">jQuery<\/a><\/em>, <em><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/mootools.net\/\">MooTools<\/a><\/em> and <em><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.prototypejs.org\/\">Prototype<\/a><\/em>. Full list after jump.<\/p>\n<p>Here are some related articles we figured you might be interested in:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.hongkiat.com\/blog\/html-table-building-30-beautiful-examples-and-useful-javascripts\/\">Building HTML Tables<\/a><\/li>\n<li><a href=\"https:\/\/www.hongkiat.com\/blog\/27-must-have-starter-kits-for-web-designers\/\">Starter Kits for Web Designers<\/a><\/li>\n<li><a href=\"https:\/\/www.hongkiat.com\/blog\/50-nice-clean-css-tab-based-navigation-scripts\/\">CSS Tab-Based navigation scripts<\/a><\/li>\n<\/ul>\n<h2>CSS (Only)<\/h2>\n<p>If you are worried about Javascript disabled on client\u2019s browser, these css-only drop down menu will not fail you.<\/p>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.lwis.net\/droplet\/\">CSS Drop-Down Menu Framework<\/a><\/h3>\n<p>Title says it all. It\u2019s a framework, released under GNU General Public License. Cross browser compatible, light and easy transformable to mimic a lot of existing drop down menus out there. For example Flickr, Adobe, and MTV.com.<\/p>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.lwis.net\/droplet\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/multilevel-dropdown\/css-framework.gif\" width=\"400\" height=\"210\" alt=\"css framework\"><\/a><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.cssplay.co.uk\/menus\/final_drop.html\">Ultimate CSS only drop-down menu<\/a><\/h3>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.cssplay.co.uk\/menus\/final_drop.html\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/multilevel-dropdown\/css-menu.gif\" width=\"500\" height=\"237\" alt=\"css menu\"><\/a><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.projectseven.com\/tutorials\/navigation\/auto_hide\/\">CSS Express Drop-Down Menus<\/a><\/h3>\n<p>Help you produce a quick (express) CSS drop-down menu without some of the limitations found in some other \"pure\" CSS menus.<\/p>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.projectseven.com\/tutorials\/navigation\/auto_hide\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/multilevel-dropdown\/css-express.gif\" width=\"500\" height=\"161\" alt=\"css express\"><\/a><\/figure>\n<h2>CSS + Javascripts<\/h2>\n<p>With the help of Javascript, drop down menu are more interactive or at least they get some subtle animation that enhance user experience. CSS on the other hand, make sure the look and feel is easily cuztomizable.<\/p>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/dynamicdrive.com\/dynamicindex1\/ddlevelsmenu\/index.htm\">All Levels Navigational Menu<\/a><\/h3>\n<p>CSS\/ HTML list based menu with support for infinite levels of sub menus. It\u2019s lightweight and  easy to implement.<\/p>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/dynamicdrive.com\/dynamicindex1\/ddlevelsmenu\/index.htm\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/multilevel-dropdown\/All-Levels-Navigational-Menu.gif\" width=\"500\" height=\"190\" alt=\"All Levels Navigational Menu\"><\/a><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/dynamicdrive.com\/dynamicindex1\/droptabmenu.htm\">Drop Down Tabs (5 styles)<\/a><\/h3>\n<p>Drop Down Tabs is a horizontal CSS tabs menu that supports a second level drop down menu for each of its tabs. Comes in 5 different styles.<\/p>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/dynamicdrive.com\/dynamicindex1\/droptabmenu.htm\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/multilevel-dropdown\/five-styles.gif\" width=\"400\" height=\"198\" alt=\"five styles\"><\/a><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/dynamicdrive.com\/dynamicindex1\/chrome\/index.htm\">Chrome CSS Drop Down Menu<\/a><\/h3>\n<p>Chrome Menu is a CSS and JavaScript hybrid drop down menu. It\u2019s easy to configure and search engine friendly. The main menu bar consist of a CSS list, while the drop down menus are simply regular DIV tags on page.<\/p>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/dynamicdrive.com\/dynamicindex1\/chrome\/index.htm\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/multilevel-dropdown\/Chrome-CSS-Drop-Down-Menu.gif\" width=\"400\" height=\"149\" alt=\"chrome css\"><\/a><\/figure>\n<h2>jQuerys<\/h2>\n<p>If you\u2019ve implemented jQuery Javascript Library on your site, here are some really cool jQuery based drop down menus you should know.<\/p>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.dynamicdrive.com\/dynamicindex1\/ddsmoothmenu.htm\">Smooth Navigational Menu<\/a><\/h3>\n<p>Smooth Navigation Menu is a multi level, CSS list based menu powered using jQuery that makes website navigation a smooth affair. Here\u2019s another similar one \u2013 <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.dynamicdrive.com\/style\/csslibrary\/item\/jquery_multi_level_css_menu_2\/\">jQuery Multi Level CSS Menu<\/a>.<\/p>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.dynamicdrive.com\/dynamicindex1\/ddsmoothmenu.htm\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/multilevel-dropdown\/Smooth-Navigational-Menu.gif\" width=\"500\" height=\"181\" alt=\"Smooth Navigational Menu\"><\/a><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/superfish.joelbirch.design\/\">Superfish<\/a><\/h3>\n<p>Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript). [<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/superfish.joelbirch.design\/example.html\">Demo<\/a> | <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/superfish.joelbirch.design\/\">Download<\/a>]<\/p>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/superfish.joelbirch.design\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/multilevel-dropdown\/superfish.gif\" width=\"500\" height=\"246\" alt=\"superfish\"><\/a><\/figure>\n<h2>MooTools<\/h2>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/mootools.net\/forge\/p\/moodropmenu\">JavaScript drop down menu using Mootools<\/a><\/h3>\n<p>Easy, unobtrusive way to create a drop down menu with Mootools 1.2. [<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/mootools.net\/forge\/p\/moodropmenu\">Demo<\/a> | <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/mootools.net\/forge\/p\/yaddm\">Download<\/a>]<\/p>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/mootools.net\/forge\/p\/moodropmenu\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/multilevel-dropdown\/moosimple.gif\" alt=\"moo multilevel dropdown\" width=\"500\" height=\"122\"><\/a><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/tools.uvumi.com\/dropdown.html\">UvumiTools Dropdown Menu<\/a><\/h3>\n<p>Simple multi-level menu built from an HTML unorderd list, using Mootools Javascript Framework.<\/p>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/tools.uvumi.com\/dropdown.html\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/multilevel-dropdown\/uvumi.gif\" width=\"500\" height=\"171\" alt=\"uvumi\"><\/a><\/figure>\n<h2>Mimics<\/h2>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/css-tricks.com\/designing-the-digg-header-how-to-download\/\">Designing the Digg Header<\/a><\/h3>\n<p>Step by step tutorial on how to build a drop down menu that really looks like Digg\u2019s. [<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/css-tricks.com\/examples\/DiggHeader\/\">Demo<\/a> | <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/css-tricks.com\/examples\/DiggHeader.zip\">Download<\/a>]<\/p>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/css-tricks.com\/designing-the-digg-header-how-to-download\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/multilevel-dropdown\/digg-alike.gif\" width=\"500\" height=\"247\" alt=\"digg alike\"><\/a><\/figure>\n<h2>Misc.<\/h2>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.kopage.com\/?rel=izzymenu.com\">izzyMenu<\/a><\/h3>\n<p>Create professional looking CSS menus for your website online, without writing a single line of code or just use some of the ready made ones.<\/p>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.kopage.com\/?rel=izzymenu.com\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/multilevel-dropdown\/izzymenu.gif\" width=\"400\" height=\"243\" alt=\"izzymenu\"><\/a><\/figure>\n<h3><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/purecssmenu.com\/\">PureCSS Menu<\/a><\/h3>\n<p>Free CSS Drop Down Menu generator<\/p>\n<figure><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/purecssmenu.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/multilevel-dropdown\/purecss.gif\" width=\"500\" height=\"275\" alt=\"pure css drop down generator\"><\/a><\/figure>","protected":false},"excerpt":{"rendered":"<p>Drop-down menu (also known as pull-down menu) is an essential in most web design. It plays important role in the creation of an effective and user friendly website. It\u2019s a good solution to trim down long menu that is overwhelming the screen space, getting them to display in a more organize category-sub category pattern. In&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1050],"tags":[507,4117],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Useful CSS and JavaScripts to Enhance Header Navigation - Hongkiat<\/title>\n<meta name=\"description\" content=\"Drop-down menu (also known as pull-down menu) is an essential in most web design. It plays important role in the creation of an effective and user\" \/>\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.hongkiat.com\/blog\/drop-down-menu-30-free-scripts-to-enhance-header-navigation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Useful CSS and JavaScripts to Enhance Header Navigation\" \/>\n<meta property=\"og:description\" content=\"Drop-down menu (also known as pull-down menu) is an essential in most web design. It plays important role in the creation of an effective and user\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/drop-down-menu-30-free-scripts-to-enhance-header-navigation\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2009-08-03T13:39:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-09-22T08:54:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/multilevel-dropdown\/css-framework.gif\" \/>\n<meta name=\"author\" content=\"Hongkiat Lim\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hongkiat Lim\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/drop-down-menu-30-free-scripts-to-enhance-header-navigation\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/drop-down-menu-30-free-scripts-to-enhance-header-navigation\\\/\"},\"author\":{\"name\":\"Hongkiat Lim\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e3613a3bf757e4f67770f0b7a339edd0\"},\"headline\":\"Useful CSS and JavaScripts to Enhance Header Navigation\",\"datePublished\":\"2009-08-03T13:39:12+00:00\",\"dateModified\":\"2020-09-22T08:54:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/drop-down-menu-30-free-scripts-to-enhance-header-navigation\\\/\"},\"wordCount\":552,\"commentCount\":78,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/drop-down-menu-30-free-scripts-to-enhance-header-navigation\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/multilevel-dropdown\\\/css-framework.gif\",\"keywords\":[\"CSS\",\"Javascripts\"],\"articleSection\":[\"Graphics\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/drop-down-menu-30-free-scripts-to-enhance-header-navigation\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/drop-down-menu-30-free-scripts-to-enhance-header-navigation\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/drop-down-menu-30-free-scripts-to-enhance-header-navigation\\\/\",\"name\":\"Useful CSS and JavaScripts to Enhance Header Navigation - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/drop-down-menu-30-free-scripts-to-enhance-header-navigation\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/drop-down-menu-30-free-scripts-to-enhance-header-navigation\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/multilevel-dropdown\\\/css-framework.gif\",\"datePublished\":\"2009-08-03T13:39:12+00:00\",\"dateModified\":\"2020-09-22T08:54:28+00:00\",\"description\":\"Drop-down menu (also known as pull-down menu) is an essential in most web design. It plays important role in the creation of an effective and user\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/drop-down-menu-30-free-scripts-to-enhance-header-navigation\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/drop-down-menu-30-free-scripts-to-enhance-header-navigation\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/drop-down-menu-30-free-scripts-to-enhance-header-navigation\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/multilevel-dropdown\\\/css-framework.gif\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/multilevel-dropdown\\\/css-framework.gif\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/drop-down-menu-30-free-scripts-to-enhance-header-navigation\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Useful CSS and JavaScripts to Enhance Header Navigation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e3613a3bf757e4f67770f0b7a339edd0\",\"name\":\"Hongkiat Lim\",\"description\":\"Founder and Editor in Chief of Hongkiat.com. Hongkiat is also a designer, developer, entrepreneur, and an active investor in the US stock market.\",\"sameAs\":[\"http:\\\/\\\/www.hongkiat.com\\\/blog\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/hongkiat\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Useful CSS and JavaScripts to Enhance Header Navigation - Hongkiat","description":"Drop-down menu (also known as pull-down menu) is an essential in most web design. It plays important role in the creation of an effective and user","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.hongkiat.com\/blog\/drop-down-menu-30-free-scripts-to-enhance-header-navigation\/","og_locale":"en_US","og_type":"article","og_title":"Useful CSS and JavaScripts to Enhance Header Navigation","og_description":"Drop-down menu (also known as pull-down menu) is an essential in most web design. It plays important role in the creation of an effective and user","og_url":"https:\/\/www.hongkiat.com\/blog\/drop-down-menu-30-free-scripts-to-enhance-header-navigation\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2009-08-03T13:39:12+00:00","article_modified_time":"2020-09-22T08:54:28+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/multilevel-dropdown\/css-framework.gif","type":"","width":"","height":""}],"author":"Hongkiat Lim","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Hongkiat Lim","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/drop-down-menu-30-free-scripts-to-enhance-header-navigation\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/drop-down-menu-30-free-scripts-to-enhance-header-navigation\/"},"author":{"name":"Hongkiat Lim","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e3613a3bf757e4f67770f0b7a339edd0"},"headline":"Useful CSS and JavaScripts to Enhance Header Navigation","datePublished":"2009-08-03T13:39:12+00:00","dateModified":"2020-09-22T08:54:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/drop-down-menu-30-free-scripts-to-enhance-header-navigation\/"},"wordCount":552,"commentCount":78,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/drop-down-menu-30-free-scripts-to-enhance-header-navigation\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/multilevel-dropdown\/css-framework.gif","keywords":["CSS","Javascripts"],"articleSection":["Graphics"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/drop-down-menu-30-free-scripts-to-enhance-header-navigation\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/drop-down-menu-30-free-scripts-to-enhance-header-navigation\/","url":"https:\/\/www.hongkiat.com\/blog\/drop-down-menu-30-free-scripts-to-enhance-header-navigation\/","name":"Useful CSS and JavaScripts to Enhance Header Navigation - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/drop-down-menu-30-free-scripts-to-enhance-header-navigation\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/drop-down-menu-30-free-scripts-to-enhance-header-navigation\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/multilevel-dropdown\/css-framework.gif","datePublished":"2009-08-03T13:39:12+00:00","dateModified":"2020-09-22T08:54:28+00:00","description":"Drop-down menu (also known as pull-down menu) is an essential in most web design. It plays important role in the creation of an effective and user","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/drop-down-menu-30-free-scripts-to-enhance-header-navigation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/drop-down-menu-30-free-scripts-to-enhance-header-navigation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/drop-down-menu-30-free-scripts-to-enhance-header-navigation\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/multilevel-dropdown\/css-framework.gif","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/multilevel-dropdown\/css-framework.gif"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/drop-down-menu-30-free-scripts-to-enhance-header-navigation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Useful CSS and JavaScripts to Enhance Header Navigation"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e3613a3bf757e4f67770f0b7a339edd0","name":"Hongkiat Lim","description":"Founder and Editor in Chief of Hongkiat.com. Hongkiat is also a designer, developer, entrepreneur, and an active investor in the US stock market.","sameAs":["http:\/\/www.hongkiat.com\/blog"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/hongkiat\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-1fX","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/4833","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=4833"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/4833\/revisions"}],"predecessor-version":[{"id":52388,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/4833\/revisions\/52388"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=4833"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=4833"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=4833"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=4833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}