{"id":1762,"date":"2010-11-15T10:24:58","date_gmt":"2010-11-15T10:24:58","guid":{"rendered":"http:\/\/mts-help.nick.php.dev\/after_sale_support\/jquery\/menu\/article2.html"},"modified":"2020-01-31T05:42:49","modified_gmt":"2020-01-31T10:42:49","slug":"gradient-menu-effect","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/gradient-menu-effect.html","title":{"rendered":"Gradient Menu Effect"},"content":{"rendered":"This is a Script that allows you to add special effects to your website page menu. All of these effects are based on the smooth movement of a menu item background image. The most common case is when the background image is a smooth color gradient. But you can use other effects as well. <p> <strong>JavaScript<\/strong> <br \/>In order to make the script work, the <strong>index-#.html<\/strong> file with the menu should contain these lines of HTML code:<\/p> <p>The <strong>menu.js<\/strong> file contains these lines of code that initialize the script functionality:<\/p> <p>Here the script attributes define the following values: <br \/>\u2022&nbsp; <strong>backgroundPosition: &#8220;(0 -250px)&#8221;<\/strong> &ndash; maximum width of the slide when it\u2019s opened; <br \/>\u2022&nbsp; <strong>duration: 500<\/strong> &ndash; total animation duration; <br \/>Script is smoothly changing <strong>backgroundPosition<\/strong> value, thus menu background animates. Here the animation effect is added to bulleted list with <strong>.nav<\/strong> class.<\/p> <p> <strong>HTML<\/strong> <br \/>Below you can see the HTML script representation:<\/p> <p>A bulleted list is used to create a menu.<\/p> <p> <strong>CSS<\/strong> <br \/>You can find script related stylesheet in the main <strong>style.css<\/strong> file. You will need to modify the following styles:<\/p> <p>It is important to specify an active class (<strong>.active<\/strong>) for a menu item on a correspondent page.<\/p>","protected":false},"excerpt":{"rendered":"<p>This is a Script that allows you to add special effects to your website page menu. All of these effects are based on the smooth movement of a menu item background image. The most common case is when the background image is a smooth color gradient. But you can use other effects as well. JavaScript [&hellip;]<\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[265],"tags":[813],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1762"}],"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=1762"}],"version-history":[{"count":4,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1762\/revisions"}],"predecessor-version":[{"id":86140,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1762\/revisions\/86140"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=1762"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=1762"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=1762"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}