{"id":1214,"date":"2010-10-28T14:43:27","date_gmt":"2010-10-28T13:43:27","guid":{"rendered":"http:\/\/www.simonbattersby.com\/blog\/?page_id=1214"},"modified":"2013-07-18T14:09:41","modified_gmt":"2013-07-18T13:09:41","slug":"jquery-dropdown-menu-plugin-with-css-fallback","status":"publish","type":"page","link":"https:\/\/www.simonbattersby.com\/blog\/jquery-dropdown-menu-plugin-with-css-fallback\/","title":{"rendered":"jQuery dropdown menu plugin with css fallback"},"content":{"rendered":"

Partly as an exercise in writing a jQuery plugin, I’ve created a configurable jQuery dropdown menu. In the absence of javascript, the menu reverts to a standard css dropdown menu. It’s based on my original css dropdown menu here<\/a>. My thinking was to allow the simple use of a few nice jQuery animations without compromising the experience for anyone without javascript.<\/p> \r\n\r\n

View a demo here<\/a>, which illustrates two menus with different options selected, plus another running on css only. Have a look at option 4.3 and option 4.3.1 to see the third and fourth level menus.<\/p>\r\n\r\n

I’ve tested in FF3, IE8, IE7, IE6, Opera 9, Opera 10, Safari 4, Safari 5 and Chrome, on Win\/XP, and FF15, Opera 12, IE7, IE and IE9 on Windows 7. If you’re (still) using IE6, then this will work for two level menus but no more…<\/p>\r\n\r\n

Setup<\/h3>\r\n\r\n

This menu requires jQuery, so you need to load this and the plugin into in your head, plus the css file:<\/p>\r\n\r\n

<script type=\"text\/javascript\" src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.4.3\/jquery.min.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\"\/javascript\/jquery.orangemenu.js\"><\/script>\r\n<link rel=\"stylesheet\" href=\"\/css\/orangemenu.css\"\/>\r\n<\/pre>\r\n\r\n
The plugin expects html in the form of a nested unordered list like this:<\/p>\r\n\r\n
<ul class=\"orangemenu\" id=\"mymenu\">\r\n<li><a href=\"#\">Item 1<\/a>\r\n     <ul>\r\n     <li><a href=\"#\">Item 1.1<\/a><\/li>\r\n     <\/ul>\r\n<\/li>\r\n<li><a href=\"#\">Item 2<\/a>\r\n     <ul>\r\n     <li><a href=\"#\">Item 2.1<\/a><\/li>\r\n     <li><a href=\"#\">Item 2.2<\/a>\r\n\t \t<ul>\r\n\t\t\t <li><a href=\"#\">Item 2.2.1<\/a><\/li>\r\n\t\t\t <li><a href=\"#\">Item 2.2.2<\/a><\/li>\r\n\t\t<\/ul>\r\n\t <\/li>\r\n     <\/ul>\r\n<\/li>\r\n<\/ul><\/pre>\r\n\r\n
Give the menu any id you want, but make sure it has the orangemenu class otherwise it won’t work. Right, now we’ve got the plugin, some css and some html we’re ready to go.<\/p>\r\n\r\n
Configuration<\/h3>\r\n\r\n
To use the plugin with default settings all you need is this:<\/p>\r\n\r\n
<script type="text\/javascript">\r\n$(document).ready(function(){\r\n$('#mymenu').orangemenu();\r\n});\r\n<\/script><\/pre>\r\n\r\n
Animation effect options<\/h4>\r\n