About Brian…<\/strong>
\nBrian Cray writes a blog that helps web 2.0 professionals build better websites. Among other things, he is known for his development of Nearby Tweets and PXtoEM.com<\/a>. Feel free to follow him on Twitter.<\/p><\/blockquote>\n
What will you be building?<\/h3>\nSee the working demo<\/a><\/p>\n
Contents…<\/h6>\n\n- Making a basic dropdown menu that works<\/a>\n
\n- The basic HTML<\/a><\/li>\n
- The basic CSS<\/a><\/li>\n
- The basic jQuery<\/a><\/li>\n<\/ol>\n<\/li>\n
- Making the basic menu look fancy<\/a>\n
\n- The images<\/a><\/li>\n
- The fancy HTML: What we’ve changed<\/a><\/li>\n
- The fancy CSS: What we’ve added<\/a><\/li>\n
- The fancy jQuery: What we’ve changed<\/a><\/li>\n<\/ol>\n<\/li>\n
- The final result with files<\/a><\/li>\n<\/ol>\n
* * * * *<\/span><\/p>\n
1. Making a basic dropdown that works<\/h6>\nBefore I begin – for those of you who want an easy way out of this tutorial, you can create a free\u00a0 flash website with Wix that will look like a very professional website. Now for those who are still interested in going through with the tutorial, I will continue. Web designers and developers find themselves creating dropdown menus over and over. I’ve drilled dropdown menu production to a science. Seriously. Here’s the benefits of Brian Cray’s basic dropdown menu code:<\/strong><\/p>\n
\n- Can be put anywhere on site in a matter of seconds<\/li>\n
- Forces no styling on the menu, but adapts to ANY styling<\/li>\n
- Can handle multiple dropdown levels gracefully<\/li>\n
- Covers variable-width tabs and dropdown menus<\/li>\n
- Semantic – only two classes needed on an otherwise plain UL<\/li>\n<\/ul>\n
Here’s what the basic dropdown looks like<\/a><\/p>\n
The basic HTML<\/h3>\nYou’ve seen this kind of thing a million times. But take notice of the two UL classes: tabs and dropdown.<\/p>\n
[html]<ul class=”tabs”>
\n<li><a href=”#”>Dropdown 1<\/a>
\n<ul class=”dropdown”>
\n<li><a href=”#”>Menu item 1<\/a>
\n<ul class=”dropdown”>
\n<li><a href=”#”>Submenu item 1<\/a><\/li>
\n<li><a href=”#”>Submenu item 1<\/a><\/li>
\n<li><a href=”#”>Submenu item 1<\/a><\/li>
\n<\/ul>
\n<\/li>
\n<li><a href=”#”>Menu item 2<\/a><\/li>
\n<li><a href=”#”>Menu item 3<\/a><\/li>
\n<li><a href=”#”>Menu item 4<\/a><\/li>
\n<li><a href=”#”>Menu item 5<\/a><\/li>
\n<li><a href=”#”>Menu item 6<\/a><\/li>
\n<\/ul>
\n<\/li>
\n<li><a href=”#”>Dropdown 2<\/a>
\n<ul class=”dropdown”>
\n<li><a href=”#”>Menu item 1<\/a><\/li>
\n<li><a href=”#”>Menu item 2<\/a><\/li>
\n<li><a href=”#”>Menu item 3<\/a><\/li>
\n<li><a href=”#”>Menu item 4<\/a><\/li>
\n<li><a href=”#”>Menu item 5<\/a><\/li>
\n<li><a href=”#”>Menu item 6<\/a><\/li>
\n<\/ul>
\n<\/li>
\n<li><a href=”#”>Dropdown 3<\/a>
\n<ul class=”dropdown”>
\n<li><a href=”#”>Menu item 1<\/a><\/li>
\n<li><a href=”#”>Menu item 2<\/a><\/li>
\n<li><a href=”#”>Menu item 3<\/a><\/li>
\n<li><a href=”#”>Menu item 4<\/a><\/li>
\n<li><a href=”#”>Menu item 5<\/a><\/li>
\n<li><a href=”#”>Menu item 6<\/a><\/li>
\n<\/ul>
\n<\/li>
\n<\/ul>[\/html]<\/p>\n
The tabs class makes the first UL a horizontal tab bar. The dropdown class makes the other UL dropdown menus. Simple, right?<\/p>\n
The basic CSS<\/h3>\n
This CSS sets and<\/em> resets the necessary styles so you don’t have to worry about your menu inheriting a bunch of crap that will make the menu look unexpected.<\/p>\n
[css]\/* tabs
\n*************************\/<\/p>\n
ul.tabs
\n{
\ndisplay: table;
\nmargin: 0;
\npadding: 0;
\nlist-style: none;
\nposition: relative;
\n}<\/p>\n
ul.tabs li
\n{
\nmargin: 0;
\npadding: 0;
\nlist-style: none;
\ndisplay: table-cell;
\nfloat: left;
\nposition: relative;
\n}<\/p>\n
ul.tabs a
\n{
\nposition: relative;
\ndisplay: block;
\n}<\/p>\n
\/* dropdowns
\n*************************\/<\/p>\n
ul.dropdown
\n{
\nmargin: 0;
\npadding: 0;
\ndisplay: block;
\nposition: absolute;
\nz-index: 999;
\ntop: 100%;
\nwidth: 250px;
\ndisplay: none;
\nleft: 0;
\n}<\/p>\n
ul.dropdown ul.dropdown
\n{
\ntop: 0;
\nleft: 95%;
\n}<\/p>\n
ul.dropdown li
\n{
\nmargin: 0;
\npadding: 0;
\nfloat: none;
\nposition: relative;
\nlist-style: none;
\ndisplay: block;
\n}<\/p>\n
ul.dropdown li a
\n{
\ndisplay: block;
\n}[\/css]<\/p>\n
The basic jQuery<\/h3>\nThe jQuery behind this is genius. It will pick up ANY dropdown class on the page and turn it into a working dropdown menu.<\/p>\n
[js]$(function () {
\n$(‘.dropdown’).each(function () {
\n$(this).parent().eq(0).hover(function () {
\n$(‘.dropdown:eq(0)’, this).show();
\n}, function () {
\n$(‘.dropdown:eq(0)’, this).hide();
\n});
\n});
\n});[\/js]<\/p>\n
And that’s all you need to add to each project to create dropdown menus in a flash! Now lets take this concept a step farther and REALLY light up the show.<\/p>\n
2. Making the basic menu look fancy<\/h6>\n
Here’s what the fancy menu looks like<\/a> that we’ll create below<\/p>\n
The first thing to do to make something fancy is to add colors and images.<\/p>\n
The images<\/h3>\n
![\"final\"](\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2009\/07\/final.jpg\" "\\"final\\"")
<\/p>\n- \n
- Making a basic dropdown menu that works<\/a>\n
- \n
- The basic HTML<\/a><\/li>\n
- The basic CSS<\/a><\/li>\n
- The basic jQuery<\/a><\/li>\n<\/ol>\n<\/li>\n
- Making the basic menu look fancy<\/a>\n
- \n
- The images<\/a><\/li>\n
- The fancy HTML: What we’ve changed<\/a><\/li>\n
- The fancy CSS: What we’ve added<\/a><\/li>\n
- The fancy jQuery: What we’ve changed<\/a><\/li>\n<\/ol>\n<\/li>\n
- The final result with files<\/a><\/li>\n<\/ol>\n
* * * * *<\/span><\/p>\n
1. Making a basic dropdown that works<\/h6>\n
Before I begin – for those of you who want an easy way out of this tutorial, you can create a free\u00a0 flash website with Wix that will look like a very professional website. Now for those who are still interested in going through with the tutorial, I will continue. Web designers and developers find themselves creating dropdown menus over and over. I’ve drilled dropdown menu production to a science. Seriously. Here’s the benefits of Brian Cray’s basic dropdown menu code:<\/strong><\/p>\n
- \n
- Can be put anywhere on site in a matter of seconds<\/li>\n
- Forces no styling on the menu, but adapts to ANY styling<\/li>\n
- Can handle multiple dropdown levels gracefully<\/li>\n
- Covers variable-width tabs and dropdown menus<\/li>\n
- Semantic – only two classes needed on an otherwise plain UL<\/li>\n<\/ul>\n
Here’s what the basic dropdown looks like<\/a><\/p>\n
The basic HTML<\/h3>\n
You’ve seen this kind of thing a million times. But take notice of the two UL classes: tabs and dropdown.<\/p>\n
[html]<ul class=”tabs”>
\n<li><a href=”#”>Dropdown 1<\/a>
\n<ul class=”dropdown”>
\n<li><a href=”#”>Menu item 1<\/a>
\n<ul class=”dropdown”>
\n<li><a href=”#”>Submenu item 1<\/a><\/li>
\n<li><a href=”#”>Submenu item 1<\/a><\/li>
\n<li><a href=”#”>Submenu item 1<\/a><\/li>
\n<\/ul>
\n<\/li>
\n<li><a href=”#”>Menu item 2<\/a><\/li>
\n<li><a href=”#”>Menu item 3<\/a><\/li>
\n<li><a href=”#”>Menu item 4<\/a><\/li>
\n<li><a href=”#”>Menu item 5<\/a><\/li>
\n<li><a href=”#”>Menu item 6<\/a><\/li>
\n<\/ul>
\n<\/li>
\n<li><a href=”#”>Dropdown 2<\/a>
\n<ul class=”dropdown”>
\n<li><a href=”#”>Menu item 1<\/a><\/li>
\n<li><a href=”#”>Menu item 2<\/a><\/li>
\n<li><a href=”#”>Menu item 3<\/a><\/li>
\n<li><a href=”#”>Menu item 4<\/a><\/li>
\n<li><a href=”#”>Menu item 5<\/a><\/li>
\n<li><a href=”#”>Menu item 6<\/a><\/li>
\n<\/ul>
\n<\/li>
\n<li><a href=”#”>Dropdown 3<\/a>
\n<ul class=”dropdown”>
\n<li><a href=”#”>Menu item 1<\/a><\/li>
\n<li><a href=”#”>Menu item 2<\/a><\/li>
\n<li><a href=”#”>Menu item 3<\/a><\/li>
\n<li><a href=”#”>Menu item 4<\/a><\/li>
\n<li><a href=”#”>Menu item 5<\/a><\/li>
\n<li><a href=”#”>Menu item 6<\/a><\/li>
\n<\/ul>
\n<\/li>
\n<\/ul>[\/html]<\/p>\nThe tabs class makes the first UL a horizontal tab bar. The dropdown class makes the other UL dropdown menus. Simple, right?<\/p>\n
The basic CSS<\/h3>\n
This CSS sets and<\/em> resets the necessary styles so you don’t have to worry about your menu inheriting a bunch of crap that will make the menu look unexpected.<\/p>\n
[css]\/* tabs
\n*************************\/<\/p>\nul.tabs
\n{
\ndisplay: table;
\nmargin: 0;
\npadding: 0;
\nlist-style: none;
\nposition: relative;
\n}<\/p>\nul.tabs li
\n{
\nmargin: 0;
\npadding: 0;
\nlist-style: none;
\ndisplay: table-cell;
\nfloat: left;
\nposition: relative;
\n}<\/p>\nul.tabs a
\n{
\nposition: relative;
\ndisplay: block;
\n}<\/p>\n\/* dropdowns
\n*************************\/<\/p>\nul.dropdown
\n{
\nmargin: 0;
\npadding: 0;
\ndisplay: block;
\nposition: absolute;
\nz-index: 999;
\ntop: 100%;
\nwidth: 250px;
\ndisplay: none;
\nleft: 0;
\n}<\/p>\nul.dropdown ul.dropdown
\n{
\ntop: 0;
\nleft: 95%;
\n}<\/p>\nul.dropdown li
\n{
\nmargin: 0;
\npadding: 0;
\nfloat: none;
\nposition: relative;
\nlist-style: none;
\ndisplay: block;
\n}<\/p>\nul.dropdown li a
\n{
\ndisplay: block;
\n}[\/css]<\/p>\nThe basic jQuery<\/h3>\n
The jQuery behind this is genius. It will pick up ANY dropdown class on the page and turn it into a working dropdown menu.<\/p>\n
[js]$(function () {
\n$(‘.dropdown’).each(function () {
\n$(this).parent().eq(0).hover(function () {
\n$(‘.dropdown:eq(0)’, this).show();
\n}, function () {
\n$(‘.dropdown:eq(0)’, this).hide();
\n});
\n});
\n});[\/js]<\/p>\nAnd that’s all you need to add to each project to create dropdown menus in a flash! Now lets take this concept a step farther and REALLY light up the show.<\/p>\n
2. Making the basic menu look fancy<\/h6>\n
Here’s what the fancy menu looks like<\/a> that we’ll create below<\/p>\n
The first thing to do to make something fancy is to add colors and images.<\/p>\n
The images<\/h3>\n
![\"download\"](\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2009\/07\/download.jpg\" "\\"download\\"")
<\/a><\/p>\nThe fancy HTML: what we’ve changed<\/h3>\n\n- Wrapped everything in a #menu div<\/li>\n
- Added h4 elements to add another layer to the menu’s organization<\/li>\n
- Added a “hasmore” class to the menu items containing dropdown menus<\/li>\n
- Added a “last” class to the last menu item in dropdown menus<\/li>\n
- Added a
<span><\/code> element around the main menu items<\/li>\n<\/ul>\n[html]<div id=”menu”>
\n<ul class=”tabs”>
\n<li><h4><a href=”#”>In the blog \u00bb<\/a><\/h4><\/li>
\n<li class=”hasmore”><a href=”#”><span>Recent<\/span><\/a>
\n<ul class=”dropdown”>
\n<li><a href=”#”>Menu item 1<\/a><\/li>
\n<li><a href=”#”>Menu item 2<\/a><\/li>
\n<li><a href=”#”>Menu item 3<\/a><\/li>
\n<li><a href=”#”>Menu item 4<\/a><\/li>
\n<li><a href=”#”>Menu item 5<\/a><\/li>
\n<li class=”last”><a href=”#”>Menu item 6<\/a><\/li>
\n<\/ul>
\n<\/li>
\n<li class=”hasmore”><a href=”#”><span>Topics<\/span><\/a>
\n<ul class=”dropdown”>
\n<li><a href=”#”>Topic 1<\/a><\/li>
\n<li><a href=”#”>Topic 2<\/a><\/li>
\n<li><a href=”#”>Topic 3<\/a><\/li>
\n<li class=”last”><a href=”#”>Topic 4<\/a><\/li>
\n<\/ul>
\n<\/li>
\n<li><a href=”#”><span><strong><img src=”images\/feed-icon-14×14.png” width=”14″ height=”14″ alt=”RSS”> Subscribe to RSS<\/strong><\/span><\/a><\/li>
\n<li><h4><a href=”#”>Elsewhere \u00bb<\/a><\/h4><\/li>
\n<li><a href=”#”><span>About<\/span><\/a><\/li>
\n<li class=”hasmore”><a href=”\/about\/#networks”><span>Networks<\/span><\/a>
\n<ul class=”dropdown”>
\n<li><a href=”#”>Twitter<\/a><\/li>
\n<li><a href=”#”>posterous<\/a><\/li>
\n<li><a href=”#”>SpeakerSite<\/a><\/li>
\n<li><a href=”#”>LinkedIn<\/a><\/li>
\n<li class=”last”><a href=”#”>See more\u2026<\/a><\/li>
\n<\/ul>
\n<\/li>
\n<li><a href=”#”><span>Bookmarks<\/span><\/a><\/li>
\n<\/ul>
\n<\/div>[\/html]<\/p>\n
The fancy CSS: what we’ve added<\/h3>\n\n- Added the
* {margin:0; padding:0}<\/code> simple reset hack (I know, there are better resets)<\/li>\n Styled to body<\/li>\nRemoved underline from links<\/li>\nStyled the menu heavily<\/li>\n<\/ul>\n[css]\/* hack reset (for production, use Yahoo! reset CSS)
\n*************************\/<\/p>\n
*
\n{
\nmargin: 0;
\npadding: 0;
\n}<\/p>\n
\/* body
\n*************************\/<\/p>\n
body
\n{
\nfont: 14px\/21px Georgia, serif;
\ncolor: #370707;
\nbackground: #e3d79b url(images\/mainbg.jpg) left 40px repeat-x;
\n}<\/p>\n
\/* links
\n*************************\/<\/p>\n
a:link, a:visited, a:hover, a:active
\n{
\ntext-decoration: none;
\n}<\/p>\n
\/* inline elements
\n*************************\/<\/p>\n
strong
\n{
\nfont-weight: bold;
\n}<\/p>\n
\/* menu-specifc
\n*************************\/<\/p>\n
#menu
\n{
\nposition: fixed;
\nz-index: 5;
\ntop: 0;
\nleft: 0;
\nwidth: 100%;
\nheight: 40px;
\nline-height: 40px;
\nbackground: #ffb35a url(images\/topbg.gif) repeat-x;
\nborder-bottom: 1px solid #000;
\n}<\/p>\n
#menu ul
\n{
\nmargin: 0 auto;
\n}<\/p>\n
#menu ul li.hasmore
\n{
\nbackground: url(images\/drophighlight.png) no-repeat center 27px;
\n}<\/p>\n
#menu ul li h4
\n{
\nmargin: 0;
\n}<\/p>\n
#menu ul li h4 a
\n{
\nfont-size: 14px;
\ncolor: #000;
\nfont-weight: bold;
\npadding: 0 15px;
\n}<\/p>\n
#menu ul li a
\n{
\ncolor: #9b2021;
\npadding-left: 4px;
\n}<\/p>\n
#menu ul li a img
\n{
\nvertical-align: middle;
\n}<\/p>\n
#menu ul li a:hover
\n{
\nbackground: url(images\/topselectionleft.png) top left no-repeat;
\n}<\/p>\n
#menu ul li a span
\n{
\ndisplay: block;
\npadding: 0 15px 0 11px;
\n}<\/p>\n
#menu ul li a:hover span
\n{
\nbackground: url(images\/topselectionright.png) top right;
\n}<\/p>\n
#menu ul.dropdown
\n{
\npadding: 10px;
\nbackground-image: url(images\/dropdown.png);
\noverflow:hidden;
\nborder-bottom: 1px solid #dc902f;
\nwidth: 290px;
\n}<\/p>\n
#menu ul.dropdown li a
\n{
\nborder-bottom: 1px solid #e5cd8e;
\nline-height: 30px;
\noverflow: hidden;
\nheight: 30px;
\n}<\/p>\n
#menu ul.dropdown li.last a
\n{
\nborder-bottom-width: 0;
\n}<\/p>\n
#menu ul.dropdown li a:hover
\n{
\nbackground: url(images\/menuarrow.png) no-repeat left center;
\n}<\/p>\n
#menu ul li h4 a:hover
\n{
\nbackground-image: none;
\n}[\/css]<\/p>\n
The fancy jQuery: what we’ve changed<\/h3>\n\n- Used the hoverIntent jQuery plugin<\/a> by Brian Cherne instead of jQuery’s default hover to prevent unintended dropdown menus<\/li>\n
- Used the easing jQuery plugin<\/a> by GSGD to add a visual effect to dropdown menu items<\/li>\n
- Changed the default dropdown menu show() and hide() functions to slideDown() and fadeOut() to add some pizzazz (without being annoying)<\/li>\n
- Preloaded the images necessary to make the menu happen<\/li>\n<\/ul>\n
[js]$(function () {<\/p>\n
$(‘.dropdown’).each(function () {
\n$(this).parent().eq(0).hoverIntent({
\ntimeout: 100,
\nover: function () {
\nvar current = $(‘.dropdown:eq(0)’, this);
\ncurrent.slideDown(100);
\n},
\nout: function () {
\nvar current = $(‘.dropdown:eq(0)’, this);
\ncurrent.fadeOut(200);
\n}
\n});
\n});<\/p>\n
$(‘.dropdown a’).hover(function () {
\n$(this).stop(true).animate({paddingLeft: ’35px’}, {speed: 100, easing: ‘easeOutBack’});
\n}, function () {
\n$(this).stop(true).animate({paddingLeft: ‘0’}, {speed: 100, easing: ‘easeOutBounce’});
\n});<\/p>\n
pic1 = new Image(310, 672);
\npic1.src = “images\/dropdown.png”;<\/p>\n
pic2 = new Image(4, 40);
\npic2.src = “images\/dropselectionleft.png”;<\/p>\n
pic3 = new Image(394, 40);
\npic3.src = “images\/dropselectionright.png”;<\/p>\n
});[\/js]<\/p>\n
3. The final result with files<\/h6>\n
Congratulations! You’ve walked through creating the fanciest menu ever<\/a>! By the way, if you feel frustrated with designing, or just want an easy way out, you can always create a free professional Website with Wix<\/a>.<\/p>\n
Here are the files this menu uses:<\/p>\n
\n- fancydropdown.js<\/a> – combines jQuery, easing plugin, hoverIntent plugin, and fancy dropdown menu code<\/li>\n
- fancydropdown.css<\/a> – combines dropdown menu styling and fancy menu styling<\/li>\n
- fancydropdown.html<\/a> – the HTML of the fancy menu<\/li>\n
- fancydropdownimages.zip<\/a> – all of the images used to create the fancy menu<\/li>\n
- fancydropdown.zip<\/a> – all of the files used to create the fancy menu<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
Brian Cray teaches you how to create this stunning website dropdown navigation menu. The dropdown menu uses HTML, CSS and Javascript. You can also include the hoverIntent JQuery plugin for extra juicy effects.<\/p>\n","protected":false},"author":30,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[30],"tags":[],"aioseo_notices":[],"yoast_head":"\n
Create The Fanciest Dropdown Menu You Ever Saw<\/title>\n<meta name=\"description\" content=\"Create The Fanciest Dropdown Menu You Ever Saw on WebDesignDev.com. Read about Create The Fanciest Dropdown Menu You Ever Saw.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create The Fanciest Dropdown Menu You Ever Saw\" \/>\n<meta property=\"og:description\" content=\"Create The Fanciest Dropdown Menu You Ever Saw on WebDesignDev.com. Read about Create The Fanciest Dropdown Menu You Ever Saw.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/\" \/>\n<meta property=\"og:site_name\" content=\"WebDesignDev\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/WebDesignDevBlog\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/pages\/WebDesignDev\/109134615846988\" \/>\n<meta property=\"article:published_time\" content=\"2009-07-26T22:27:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-11-08T18:23:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2009\/07\/final.jpg\" \/>\n<meta name=\"author\" content=\"Iggy\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/WebDesignDev\" \/>\n<meta name=\"twitter:site\" content=\"@WebDesignDev\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Iggy\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/\"},\"author\":{\"name\":\"Iggy\",\"@id\":\"https:\/\/webdesigndev.com\/#\/schema\/person\/d25d955ee0786bc10f0cda0dca381194\"},\"headline\":\"Create The Fanciest Dropdown Menu You Ever Saw\",\"datePublished\":\"2009-07-26T22:27:13+00:00\",\"dateModified\":\"2018-11-08T18:23:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/\"},\"wordCount\":2083,\"commentCount\":155,\"publisher\":{\"@id\":\"https:\/\/webdesigndev.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2009\/07\/final.jpg\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/\",\"url\":\"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/\",\"name\":\"Create The Fanciest Dropdown Menu You Ever Saw\",\"isPartOf\":{\"@id\":\"https:\/\/webdesigndev.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2009\/07\/final.jpg\",\"datePublished\":\"2009-07-26T22:27:13+00:00\",\"dateModified\":\"2018-11-08T18:23:12+00:00\",\"description\":\"Create The Fanciest Dropdown Menu You Ever Saw on WebDesignDev.com. Read about Create The Fanciest Dropdown Menu You Ever Saw.\",\"breadcrumb\":{\"@id\":\"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/#primaryimage\",\"url\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2009\/07\/final.jpg\",\"contentUrl\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2009\/07\/final.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webdesigndev.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Development\",\"item\":\"https:\/\/webdesigndev.com\/web-development\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Create The Fanciest Dropdown Menu You Ever Saw\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webdesigndev.com\/#website\",\"url\":\"https:\/\/webdesigndev.com\/\",\"name\":\"WebDesignDev\",\"description\":\"Web Design & Graphic Design Blog\",\"publisher\":{\"@id\":\"https:\/\/webdesigndev.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webdesigndev.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webdesigndev.com\/#organization\",\"name\":\"WebDesignDev\",\"url\":\"https:\/\/webdesigndev.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdesigndev.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2023\/05\/2023-WebDesignDev-Logo.svg\",\"contentUrl\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2023\/05\/2023-WebDesignDev-Logo.svg\",\"width\":601,\"height\":196,\"caption\":\"WebDesignDev\"},\"image\":{\"@id\":\"https:\/\/webdesigndev.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/WebDesignDevBlog\",\"https:\/\/x.com\/WebDesignDev\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webdesigndev.com\/#\/schema\/person\/d25d955ee0786bc10f0cda0dca381194\",\"name\":\"Iggy\",\"description\":\"Iggy is an entrepreneur, blogger, and designer who loves experimenting with new web design techniques, collating creative website designs, and writing about the latest design fonts, themes, plugins, inspiration, and more. You can follow him on Twitter\",\"sameAs\":[\"https:\/\/www.facebook.com\/pages\/WebDesignDev\/109134615846988\",\"https:\/\/x.com\/https:\/\/twitter.com\/WebDesignDev\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Create The Fanciest Dropdown Menu You Ever Saw","description":"Create The Fanciest Dropdown Menu You Ever Saw on WebDesignDev.com. Read about Create The Fanciest Dropdown Menu You Ever Saw.","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:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/","og_locale":"en_US","og_type":"article","og_title":"Create The Fanciest Dropdown Menu You Ever Saw","og_description":"Create The Fanciest Dropdown Menu You Ever Saw on WebDesignDev.com. Read about Create The Fanciest Dropdown Menu You Ever Saw.","og_url":"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/","og_site_name":"WebDesignDev","article_publisher":"https:\/\/www.facebook.com\/WebDesignDevBlog","article_author":"https:\/\/www.facebook.com\/pages\/WebDesignDev\/109134615846988","article_published_time":"2009-07-26T22:27:13+00:00","article_modified_time":"2018-11-08T18:23:12+00:00","og_image":[{"url":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2009\/07\/final.jpg"}],"author":"Iggy","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/WebDesignDev","twitter_site":"@WebDesignDev","twitter_misc":{"Written by":"Iggy","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/#article","isPartOf":{"@id":"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/"},"author":{"name":"Iggy","@id":"https:\/\/webdesigndev.com\/#\/schema\/person\/d25d955ee0786bc10f0cda0dca381194"},"headline":"Create The Fanciest Dropdown Menu You Ever Saw","datePublished":"2009-07-26T22:27:13+00:00","dateModified":"2018-11-08T18:23:12+00:00","mainEntityOfPage":{"@id":"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/"},"wordCount":2083,"commentCount":155,"publisher":{"@id":"https:\/\/webdesigndev.com\/#organization"},"image":{"@id":"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/#primaryimage"},"thumbnailUrl":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2009\/07\/final.jpg","articleSection":["Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/","url":"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/","name":"Create The Fanciest Dropdown Menu You Ever Saw","isPartOf":{"@id":"https:\/\/webdesigndev.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/#primaryimage"},"image":{"@id":"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/#primaryimage"},"thumbnailUrl":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2009\/07\/final.jpg","datePublished":"2009-07-26T22:27:13+00:00","dateModified":"2018-11-08T18:23:12+00:00","description":"Create The Fanciest Dropdown Menu You Ever Saw on WebDesignDev.com. Read about Create The Fanciest Dropdown Menu You Ever Saw.","breadcrumb":{"@id":"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/#primaryimage","url":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2009\/07\/final.jpg","contentUrl":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2009\/07\/final.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webdesigndev.com\/"},{"@type":"ListItem","position":2,"name":"Web Development","item":"https:\/\/webdesigndev.com\/web-development\/"},{"@type":"ListItem","position":3,"name":"Create The Fanciest Dropdown Menu You Ever Saw"}]},{"@type":"WebSite","@id":"https:\/\/webdesigndev.com\/#website","url":"https:\/\/webdesigndev.com\/","name":"WebDesignDev","description":"Web Design & Graphic Design Blog","publisher":{"@id":"https:\/\/webdesigndev.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webdesigndev.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webdesigndev.com\/#organization","name":"WebDesignDev","url":"https:\/\/webdesigndev.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdesigndev.com\/#\/schema\/logo\/image\/","url":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2023\/05\/2023-WebDesignDev-Logo.svg","contentUrl":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2023\/05\/2023-WebDesignDev-Logo.svg","width":601,"height":196,"caption":"WebDesignDev"},"image":{"@id":"https:\/\/webdesigndev.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/WebDesignDevBlog","https:\/\/x.com\/WebDesignDev"]},{"@type":"Person","@id":"https:\/\/webdesigndev.com\/#\/schema\/person\/d25d955ee0786bc10f0cda0dca381194","name":"Iggy","description":"Iggy is an entrepreneur, blogger, and designer who loves experimenting with new web design techniques, collating creative website designs, and writing about the latest design fonts, themes, plugins, inspiration, and more. You can follow him on Twitter","sameAs":["https:\/\/www.facebook.com\/pages\/WebDesignDev\/109134615846988","https:\/\/x.com\/https:\/\/twitter.com\/WebDesignDev"]}]}},"_links":{"self":[{"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/posts\/1943"}],"collection":[{"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/users\/30"}],"replies":[{"embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/comments?post=1943"}],"version-history":[{"count":0,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/posts\/1943\/revisions"}],"wp:attachment":[{"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/media?parent=1943"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/categories?post=1943"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/tags?post=1943"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<span><\/code> element around the main menu items<\/li>\n<\/ul>\n[html]<div id=”menu”>
\n<ul class=”tabs”>
\n<li><h4><a href=”#”>In the blog \u00bb<\/a><\/h4><\/li>
\n<li class=”hasmore”><a href=”#”><span>Recent<\/span><\/a>
\n<ul class=”dropdown”>
\n<li><a href=”#”>Menu item 1<\/a><\/li>
\n<li><a href=”#”>Menu item 2<\/a><\/li>
\n<li><a href=”#”>Menu item 3<\/a><\/li>
\n<li><a href=”#”>Menu item 4<\/a><\/li>
\n<li><a href=”#”>Menu item 5<\/a><\/li>
\n<li class=”last”><a href=”#”>Menu item 6<\/a><\/li>
\n<\/ul>
\n<\/li>
\n<li class=”hasmore”><a href=”#”><span>Topics<\/span><\/a>
\n<ul class=”dropdown”>
\n<li><a href=”#”>Topic 1<\/a><\/li>
\n<li><a href=”#”>Topic 2<\/a><\/li>
\n<li><a href=”#”>Topic 3<\/a><\/li>
\n<li class=”last”><a href=”#”>Topic 4<\/a><\/li>
\n<\/ul>
\n<\/li>
\n<li><a href=”#”><span><strong><img src=”images\/feed-icon-14×14.png” width=”14″ height=”14″ alt=”RSS”> Subscribe to RSS<\/strong><\/span><\/a><\/li>
\n<li><h4><a href=”#”>Elsewhere \u00bb<\/a><\/h4><\/li>
\n<li><a href=”#”><span>About<\/span><\/a><\/li>
\n<li class=”hasmore”><a href=”\/about\/#networks”><span>Networks<\/span><\/a>
\n<ul class=”dropdown”>
\n<li><a href=”#”>Twitter<\/a><\/li>
\n<li><a href=”#”>posterous<\/a><\/li>
\n<li><a href=”#”>SpeakerSite<\/a><\/li>
\n<li><a href=”#”>LinkedIn<\/a><\/li>
\n<li class=”last”><a href=”#”>See more\u2026<\/a><\/li>
\n<\/ul>
\n<\/li>
\n<li><a href=”#”><span>Bookmarks<\/span><\/a><\/li>
\n<\/ul>
\n<\/div>[\/html]<\/p>\n
The fancy CSS: what we’ve added<\/h3>\n\n- Added the
* {margin:0; padding:0}<\/code> simple reset hack (I know, there are better resets)<\/li>\n Styled to body<\/li>\nRemoved underline from links<\/li>\nStyled the menu heavily<\/li>\n<\/ul>\n[css]\/* hack reset (for production, use Yahoo! reset CSS)
\n*************************\/<\/p>\n
*
\n{
\nmargin: 0;
\npadding: 0;
\n}<\/p>\n
\/* body
\n*************************\/<\/p>\n
body
\n{
\nfont: 14px\/21px Georgia, serif;
\ncolor: #370707;
\nbackground: #e3d79b url(images\/mainbg.jpg) left 40px repeat-x;
\n}<\/p>\n
\/* links
\n*************************\/<\/p>\n
a:link, a:visited, a:hover, a:active
\n{
\ntext-decoration: none;
\n}<\/p>\n
\/* inline elements
\n*************************\/<\/p>\n
strong
\n{
\nfont-weight: bold;
\n}<\/p>\n
\/* menu-specifc
\n*************************\/<\/p>\n
#menu
\n{
\nposition: fixed;
\nz-index: 5;
\ntop: 0;
\nleft: 0;
\nwidth: 100%;
\nheight: 40px;
\nline-height: 40px;
\nbackground: #ffb35a url(images\/topbg.gif) repeat-x;
\nborder-bottom: 1px solid #000;
\n}<\/p>\n
#menu ul
\n{
\nmargin: 0 auto;
\n}<\/p>\n
#menu ul li.hasmore
\n{
\nbackground: url(images\/drophighlight.png) no-repeat center 27px;
\n}<\/p>\n
#menu ul li h4
\n{
\nmargin: 0;
\n}<\/p>\n
#menu ul li h4 a
\n{
\nfont-size: 14px;
\ncolor: #000;
\nfont-weight: bold;
\npadding: 0 15px;
\n}<\/p>\n
#menu ul li a
\n{
\ncolor: #9b2021;
\npadding-left: 4px;
\n}<\/p>\n
#menu ul li a img
\n{
\nvertical-align: middle;
\n}<\/p>\n
#menu ul li a:hover
\n{
\nbackground: url(images\/topselectionleft.png) top left no-repeat;
\n}<\/p>\n
#menu ul li a span
\n{
\ndisplay: block;
\npadding: 0 15px 0 11px;
\n}<\/p>\n
#menu ul li a:hover span
\n{
\nbackground: url(images\/topselectionright.png) top right;
\n}<\/p>\n
#menu ul.dropdown
\n{
\npadding: 10px;
\nbackground-image: url(images\/dropdown.png);
\noverflow:hidden;
\nborder-bottom: 1px solid #dc902f;
\nwidth: 290px;
\n}<\/p>\n
#menu ul.dropdown li a
\n{
\nborder-bottom: 1px solid #e5cd8e;
\nline-height: 30px;
\noverflow: hidden;
\nheight: 30px;
\n}<\/p>\n
#menu ul.dropdown li.last a
\n{
\nborder-bottom-width: 0;
\n}<\/p>\n
#menu ul.dropdown li a:hover
\n{
\nbackground: url(images\/menuarrow.png) no-repeat left center;
\n}<\/p>\n
#menu ul li h4 a:hover
\n{
\nbackground-image: none;
\n}[\/css]<\/p>\n
The fancy jQuery: what we’ve changed<\/h3>\n\n- Used the hoverIntent jQuery plugin<\/a> by Brian Cherne instead of jQuery’s default hover to prevent unintended dropdown menus<\/li>\n
- Used the easing jQuery plugin<\/a> by GSGD to add a visual effect to dropdown menu items<\/li>\n
- Changed the default dropdown menu show() and hide() functions to slideDown() and fadeOut() to add some pizzazz (without being annoying)<\/li>\n
- Preloaded the images necessary to make the menu happen<\/li>\n<\/ul>\n
[js]$(function () {<\/p>\n
$(‘.dropdown’).each(function () {
\n$(this).parent().eq(0).hoverIntent({
\ntimeout: 100,
\nover: function () {
\nvar current = $(‘.dropdown:eq(0)’, this);
\ncurrent.slideDown(100);
\n},
\nout: function () {
\nvar current = $(‘.dropdown:eq(0)’, this);
\ncurrent.fadeOut(200);
\n}
\n});
\n});<\/p>\n
$(‘.dropdown a’).hover(function () {
\n$(this).stop(true).animate({paddingLeft: ’35px’}, {speed: 100, easing: ‘easeOutBack’});
\n}, function () {
\n$(this).stop(true).animate({paddingLeft: ‘0’}, {speed: 100, easing: ‘easeOutBounce’});
\n});<\/p>\n
pic1 = new Image(310, 672);
\npic1.src = “images\/dropdown.png”;<\/p>\n
pic2 = new Image(4, 40);
\npic2.src = “images\/dropselectionleft.png”;<\/p>\n
pic3 = new Image(394, 40);
\npic3.src = “images\/dropselectionright.png”;<\/p>\n
});[\/js]<\/p>\n
3. The final result with files<\/h6>\n
Congratulations! You’ve walked through creating the fanciest menu ever<\/a>! By the way, if you feel frustrated with designing, or just want an easy way out, you can always create a free professional Website with Wix<\/a>.<\/p>\n
Here are the files this menu uses:<\/p>\n
\n- fancydropdown.js<\/a> – combines jQuery, easing plugin, hoverIntent plugin, and fancy dropdown menu code<\/li>\n
- fancydropdown.css<\/a> – combines dropdown menu styling and fancy menu styling<\/li>\n
- fancydropdown.html<\/a> – the HTML of the fancy menu<\/li>\n
- fancydropdownimages.zip<\/a> – all of the images used to create the fancy menu<\/li>\n
- fancydropdown.zip<\/a> – all of the files used to create the fancy menu<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
Brian Cray teaches you how to create this stunning website dropdown navigation menu. The dropdown menu uses HTML, CSS and Javascript. You can also include the hoverIntent JQuery plugin for extra juicy effects.<\/p>\n","protected":false},"author":30,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[30],"tags":[],"aioseo_notices":[],"yoast_head":"\n
Create The Fanciest Dropdown Menu You Ever Saw<\/title>\n<meta name=\"description\" content=\"Create The Fanciest Dropdown Menu You Ever Saw on WebDesignDev.com. Read about Create The Fanciest Dropdown Menu You Ever Saw.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create The Fanciest Dropdown Menu You Ever Saw\" \/>\n<meta property=\"og:description\" content=\"Create The Fanciest Dropdown Menu You Ever Saw on WebDesignDev.com. Read about Create The Fanciest Dropdown Menu You Ever Saw.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/\" \/>\n<meta property=\"og:site_name\" content=\"WebDesignDev\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/WebDesignDevBlog\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/pages\/WebDesignDev\/109134615846988\" \/>\n<meta property=\"article:published_time\" content=\"2009-07-26T22:27:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-11-08T18:23:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2009\/07\/final.jpg\" \/>\n<meta name=\"author\" content=\"Iggy\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/WebDesignDev\" \/>\n<meta name=\"twitter:site\" content=\"@WebDesignDev\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Iggy\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/\"},\"author\":{\"name\":\"Iggy\",\"@id\":\"https:\/\/webdesigndev.com\/#\/schema\/person\/d25d955ee0786bc10f0cda0dca381194\"},\"headline\":\"Create The Fanciest Dropdown Menu You Ever Saw\",\"datePublished\":\"2009-07-26T22:27:13+00:00\",\"dateModified\":\"2018-11-08T18:23:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/\"},\"wordCount\":2083,\"commentCount\":155,\"publisher\":{\"@id\":\"https:\/\/webdesigndev.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2009\/07\/final.jpg\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/\",\"url\":\"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/\",\"name\":\"Create The Fanciest Dropdown Menu You Ever Saw\",\"isPartOf\":{\"@id\":\"https:\/\/webdesigndev.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2009\/07\/final.jpg\",\"datePublished\":\"2009-07-26T22:27:13+00:00\",\"dateModified\":\"2018-11-08T18:23:12+00:00\",\"description\":\"Create The Fanciest Dropdown Menu You Ever Saw on WebDesignDev.com. Read about Create The Fanciest Dropdown Menu You Ever Saw.\",\"breadcrumb\":{\"@id\":\"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/#primaryimage\",\"url\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2009\/07\/final.jpg\",\"contentUrl\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2009\/07\/final.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webdesigndev.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Development\",\"item\":\"https:\/\/webdesigndev.com\/web-development\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Create The Fanciest Dropdown Menu You Ever Saw\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webdesigndev.com\/#website\",\"url\":\"https:\/\/webdesigndev.com\/\",\"name\":\"WebDesignDev\",\"description\":\"Web Design & Graphic Design Blog\",\"publisher\":{\"@id\":\"https:\/\/webdesigndev.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webdesigndev.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webdesigndev.com\/#organization\",\"name\":\"WebDesignDev\",\"url\":\"https:\/\/webdesigndev.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdesigndev.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2023\/05\/2023-WebDesignDev-Logo.svg\",\"contentUrl\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2023\/05\/2023-WebDesignDev-Logo.svg\",\"width\":601,\"height\":196,\"caption\":\"WebDesignDev\"},\"image\":{\"@id\":\"https:\/\/webdesigndev.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/WebDesignDevBlog\",\"https:\/\/x.com\/WebDesignDev\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webdesigndev.com\/#\/schema\/person\/d25d955ee0786bc10f0cda0dca381194\",\"name\":\"Iggy\",\"description\":\"Iggy is an entrepreneur, blogger, and designer who loves experimenting with new web design techniques, collating creative website designs, and writing about the latest design fonts, themes, plugins, inspiration, and more. You can follow him on Twitter\",\"sameAs\":[\"https:\/\/www.facebook.com\/pages\/WebDesignDev\/109134615846988\",\"https:\/\/x.com\/https:\/\/twitter.com\/WebDesignDev\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Create The Fanciest Dropdown Menu You Ever Saw","description":"Create The Fanciest Dropdown Menu You Ever Saw on WebDesignDev.com. Read about Create The Fanciest Dropdown Menu You Ever Saw.","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:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/","og_locale":"en_US","og_type":"article","og_title":"Create The Fanciest Dropdown Menu You Ever Saw","og_description":"Create The Fanciest Dropdown Menu You Ever Saw on WebDesignDev.com. Read about Create The Fanciest Dropdown Menu You Ever Saw.","og_url":"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/","og_site_name":"WebDesignDev","article_publisher":"https:\/\/www.facebook.com\/WebDesignDevBlog","article_author":"https:\/\/www.facebook.com\/pages\/WebDesignDev\/109134615846988","article_published_time":"2009-07-26T22:27:13+00:00","article_modified_time":"2018-11-08T18:23:12+00:00","og_image":[{"url":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2009\/07\/final.jpg"}],"author":"Iggy","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/WebDesignDev","twitter_site":"@WebDesignDev","twitter_misc":{"Written by":"Iggy","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/#article","isPartOf":{"@id":"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/"},"author":{"name":"Iggy","@id":"https:\/\/webdesigndev.com\/#\/schema\/person\/d25d955ee0786bc10f0cda0dca381194"},"headline":"Create The Fanciest Dropdown Menu You Ever Saw","datePublished":"2009-07-26T22:27:13+00:00","dateModified":"2018-11-08T18:23:12+00:00","mainEntityOfPage":{"@id":"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/"},"wordCount":2083,"commentCount":155,"publisher":{"@id":"https:\/\/webdesigndev.com\/#organization"},"image":{"@id":"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/#primaryimage"},"thumbnailUrl":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2009\/07\/final.jpg","articleSection":["Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/","url":"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/","name":"Create The Fanciest Dropdown Menu You Ever Saw","isPartOf":{"@id":"https:\/\/webdesigndev.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/#primaryimage"},"image":{"@id":"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/#primaryimage"},"thumbnailUrl":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2009\/07\/final.jpg","datePublished":"2009-07-26T22:27:13+00:00","dateModified":"2018-11-08T18:23:12+00:00","description":"Create The Fanciest Dropdown Menu You Ever Saw on WebDesignDev.com. Read about Create The Fanciest Dropdown Menu You Ever Saw.","breadcrumb":{"@id":"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/#primaryimage","url":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2009\/07\/final.jpg","contentUrl":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2009\/07\/final.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/webdesigndev.com\/create-the-fanciest-dropdown-menu-you-ever-saw\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webdesigndev.com\/"},{"@type":"ListItem","position":2,"name":"Web Development","item":"https:\/\/webdesigndev.com\/web-development\/"},{"@type":"ListItem","position":3,"name":"Create The Fanciest Dropdown Menu You Ever Saw"}]},{"@type":"WebSite","@id":"https:\/\/webdesigndev.com\/#website","url":"https:\/\/webdesigndev.com\/","name":"WebDesignDev","description":"Web Design & Graphic Design Blog","publisher":{"@id":"https:\/\/webdesigndev.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webdesigndev.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webdesigndev.com\/#organization","name":"WebDesignDev","url":"https:\/\/webdesigndev.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdesigndev.com\/#\/schema\/logo\/image\/","url":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2023\/05\/2023-WebDesignDev-Logo.svg","contentUrl":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2023\/05\/2023-WebDesignDev-Logo.svg","width":601,"height":196,"caption":"WebDesignDev"},"image":{"@id":"https:\/\/webdesigndev.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/WebDesignDevBlog","https:\/\/x.com\/WebDesignDev"]},{"@type":"Person","@id":"https:\/\/webdesigndev.com\/#\/schema\/person\/d25d955ee0786bc10f0cda0dca381194","name":"Iggy","description":"Iggy is an entrepreneur, blogger, and designer who loves experimenting with new web design techniques, collating creative website designs, and writing about the latest design fonts, themes, plugins, inspiration, and more. You can follow him on Twitter","sameAs":["https:\/\/www.facebook.com\/pages\/WebDesignDev\/109134615846988","https:\/\/x.com\/https:\/\/twitter.com\/WebDesignDev"]}]}},"_links":{"self":[{"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/posts\/1943"}],"collection":[{"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/users\/30"}],"replies":[{"embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/comments?post=1943"}],"version-history":[{"count":0,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/posts\/1943\/revisions"}],"wp:attachment":[{"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/media?parent=1943"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/categories?post=1943"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/tags?post=1943"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
