{"id":6651,"date":"2011-03-17T02:32:52","date_gmt":"2011-03-17T06:32:52","guid":{"rendered":"http:\/\/info.template-help.com\/?p=6651"},"modified":"2016-02-18T04:41:31","modified_gmt":"2016-02-18T09:41:31","slug":"superfish-dropdown-menu","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/superfish-dropdown-menu.html","title":{"rendered":"“SuperFish” DropDown Menu"},"content":{"rendered":"Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and a lot of the much-sought-after enhancements. For details visit http:\/\/users.tpg.com.au\/j_birch\/plugins\/superfish<\/strong>\r\n

JavaScript<\/h3>\r\nWe should include jQuery framework and superfish.js by pointing src attribute in the script tag to the .js files\r\n\r\n
\r\n<script type=\"text\/javascript\" src=\"jquery-1.4.2.min.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\"superfish.js\"><\/script> \r\n<\/pre>\r\n\r\nThe  section of the index-#.html file contains these lines of code that initialize the script functionality with basic values:\r\n
\r\n\r\n<script type=\"text\/javascript\">\r\n$(document).ready(function() {\r\n   $('ul.sf-menu').superfish({\r\nhoverClass: 'sfHover', \/\/ the class applied to hovered list items    \r\npathClass: 'overideThisToUse', \/\/ the class you have applied to list items that lead to the current page     \r\npathLevels: 1,  \/\/ the number of levels of submenus that remain open or are restored using pathClass     \r\ndelay: 800,  \/\/ the delay in milliseconds that the mouse can remain outside a submenu without it closing     \r\nanimation:  {opacity:'show'}, \/\/ an object equivalent to first parameter of jQuery\u2019s .animate() method     \r\nspeed:  'normal', \/\/ speed of the animation. Equivalent to second parameter of jQuery\u2019s .animate() method     \r\nautoArrows: true, \/\/ if true, arrow mark-up generated automatically = cleaner source code at expense of initialisation performance     \r\ndropShadows: true,  \/\/ completely disable drop shadows by setting this to false     \r\ndisableHI: false, \/\/ set to true to disable hoverIntent detection     \r\nonInit: function(){}, \/\/ callback function fires once Superfish is initialised \u2013 'this' is the containing ul     \r\nonBeforeShow: function(){},  \/\/ callback function fires just before reveal animation begins \u2013 'this' is the ul about to open     \r\nonShow: function(){}, \/\/ callback function fires once reveal animation completed \u2013 'this' is the opened ul     \r\nonHide: function(){} \/\/ callback function fires after a sub-menu has closed \u2013 'this' is the ul that just closed\r\n   });\r\n });\r\n<\/script> \r\n\r\n<\/pre>\r\n
HTML<\/h3>\r\nBelow you can see general HTML script representation:\r\n
\r\n<ul class=\"sf-menu\">\r\n\r\n\t<li> <a class=\"current\" href=\"index.html\">Home<\/a>\r\n\r\n<ul>\r\n\r\n\t<li><a href=\"#\">Free Mobile Website<\/a><\/li>\r\n\r\n\r\n\t<li><a href=\"#\">Premium mobile templates<\/a><\/li>\r\n\r\n\r\n\t<li><a href=\"#\">All devices templates<\/a><\/li>\r\n\r\n<\/ul>\r\n<\/li>\r\n\r\n\r\n\t<li><a href=\"#\">templates<\/a><\/li>\r\n\r\n\r\n\t<li><a href=\"#\">Demo<\/a><\/li>\r\n\r\n\r\n\t<li><a href=\"index-1.html\">company<\/a><\/li>\r\n\r\n\r\n\t<li><a href=\"#\">Contacts<\/a><\/li>\r\n\r\n<\/ul>\r\n\r\n<\/pre>\r\n
CSS<\/h3>\r\n
. \/*** ESSENTIAL STYLES ***\/\r\n.sf-menu, .sf-menu * {\r\nmargin:0;\r\npadding:0;\r\nlist-style:none;\r\n}\r\n.sf-menu {\r\nline-height:1.0;\r\n}\r\n.sf-menu ul {\r\nposition:    absolute;\r\ntop:-999em;\r\nwidth:10em; \/* left offset of submenus need to match (see below) *\/\r\n}\r\n.sf-menu ul li {\r\nwidth:100%;\r\n}\r\n.sf-menu li:hover {\r\nvisibility:    inherit; \/* fixes IE7 'sticky bug' *\/\r\n}\r\n.sf-menu li {\r\nfloat:left;\r\nposition:    relative;\r\n}\r\n.sf-menu a {\r\ndisplay:    block;\r\nposition:    relative;\r\n}\r\n.sf-menu li:hover ul,.sf-menu li.sfHover ul {\r\nleft:0;\r\ntop:2.5em; \/* match top ul list item height *\/\r\nz-index:    99;\r\n}\r\n\r\nul.sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul {\r\ntop:-999em;\r\n}\r\nul.sf-menu li li:hover ul,ul.sf-menu li li.sfHover ul {\r\nleft:10em; \/* match ul width *\/\r\ntop:0;\r\n}\r\nul.sf-menu li li:hover li ul,ul.sf-menu li li.sfHover li ul {\r\ntop:-999em;\r\n}\r\nul.sf-menu li li li:hover ul,\r\nul.sf-menu li li li.sfHover ul {\r\nleft:10em; \/* match ul width *\/\r\ntop:0;\r\n}\r\n\/*** DEMO SKIN ***\/\r\n.sf-menu {\r\nfloat:left;\r\nmargin-bottom:1em;\r\n}\r\n.sf-menu a {\r\nborder-left:1px solid #fff;\r\nborder-top:    1px solid #CFDEFF;\r\npadding:         .75em 1em;\r\ntext-decoration:none;\r\n}\r\n.sf-menu a, .sf-menu a:visited  { \/* visited pseudo selector so IE6 applies text colour*\/\r\ncolor:#13a;\r\n}\r\n.sf-menu li {\r\nbackground:    #BDD2FF;\r\n}\r\n.sf-menu li li {\r\nbackground:    #AABDE6;\r\n}\r\n.sf-menu li li li {\r\nbackground:    #9AAEDB;\r\n}\r\n.sf-menu li:hover, .sf-menu li.sfHover,\r\n.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {\r\nbackground:    #CFDEFF;\r\noutline:    0;\r\n}\r\n\r\n\/*** arrows **\/\r\n.sf-menu a.sf-with-ul {\r\npadding-right:     2.25em;\r\nmin-width:    1px; \/* trigger IE7 hasLayout so spans position accurately *\/\r\n}\r\n.sf-sub-indicator {\r\nposition:    absolute;\r\ndisplay:    block;\r\nright:.75em;\r\ntop:1.05em; \/* IE6 only *\/\r\nwidth:10px;\r\nheight:10px;\r\ntext-indent:     -999em;\r\noverflow:    hidden;\r\nbackground:    url('..\/images\/arrows-ffffff.png') no-repeat -10px -100px; \/* 8-bit indexed alpha png. IE6 gets solid image only *\/\r\n}\r\na > .sf-sub-indicator {  \/* give all except IE6 the correct values *\/\r\ntop:.8em;\r\nbackground-position: 0 -100px; \/* use translucent arrow for modern browsers*\/\r\n}\r\n\/* apply hovers to modern browsers *\/\r\na:focus > .sf-sub-indicator,\r\na:hover > .sf-sub-indicator,\r\na:active > .sf-sub-indicator,\r\nli:hover > a > .sf-sub-indicator,\r\nli.sfHover > a > .sf-sub-indicator {\r\nbackground-position: -10px -100px; \/* arrow hovers for modern browsers*\/\r\n}\r\n\r\n\/* point right for anchors in subs *\/\r\n.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }\r\n.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }\r\n\/* apply hovers to modern browsers *\/\r\n.sf-menu ul a:focus > .sf-sub-indicator,\r\n.sf-menu ul a:hover > .sf-sub-indicator,\r\n.sf-menu ul a:active > .sf-sub-indicator,\r\n.sf-menu ul li:hover > a > .sf-sub-indicator,\r\n.sf-menu ul li.sfHover > a > .sf-sub-indicator {\r\nbackground-position: -10px 0; \/* arrow hovers for modern browsers*\/\r\n}\r\n\r\n\/*** shadows for all but IE6 ***\/\r\n.sf-shadow ul {\r\nbackground:url('..\/images\/shadow.png') no-repeat bottom right;\r\npadding: 0 8px 9px 0;\r\n-moz-border-radius-bottomleft: 17px;\r\n-moz-border-radius-topright: 17px;\r\n-webkit-border-top-right-radius: 17px;\r\n-webkit-border-bottom-left-radius: 17px;\r\n}\r\n.sf-shadow ul.sf-shadow-off {\r\nbackground: transparent;\r\n}\r\n<\/pre>","protected":false},"excerpt":{"rendered":"
Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and a lot of the much-sought-after enhancements. For details visit http:\/\/users.tpg.com.au\/j_birch\/plugins\/superfish JavaScript We should include jQuery framework and superfish.js by pointing src attribute in the script tag to the .js files <script type=”text\/javascript” […]<\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[265,270],"tags":[794,813,571,814],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/6651"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=6651"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/6651\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=6651"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=6651"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=6651"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}