{"id":71,"date":"2017-04-16T17:23:59","date_gmt":"2017-04-16T16:23:59","guid":{"rendered":"https:\/\/www.graphicz.co.uk\/blog\/?p=71"},"modified":"2017-04-28T09:13:04","modified_gmt":"2017-04-28T08:13:04","slug":"opening-mega-menu-in-a-lightbbox","status":"publish","type":"post","link":"https:\/\/www.graphicz.co.uk\/blog\/opening-mega-menu-in-a-lightbbox\/","title":{"rendered":"Opening Mega Menu in a ‘Lightbox’"},"content":{"rendered":"

Opening Mega Menu in a ‘Lightbox’.<\/p>\n

There is a bit of a trend for the opening of mega menus in a ‘Lightbox’ type effect.<\/p>\n

This is easy to do with SellerDeck.<\/p>\n

1. Paste this into your css:<\/p>\n

#mm-nav-overlay {\r\nposition: fixed;\r\ntop: 0;\r\nleft: 0;\r\nwidth: 100%;\r\nheight: 100%;\r\nz-index: 211;\r\ndisplay: none\r\n}\r\n<\/pre>\n
2. In responsive outer layout just before<\/p>\n
<div class=\"navigation-bar\"><\/pre>\n
paste:<\/p>\n
<style>\r\n#mm-nav-overlay {\r\nbackground-color: #000000;\r\nopacity: 0.6;\r\n-ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=60.00000238418579)\";\r\n}\r\n<\/style>\r\n<script>\r\n$(document).ready(function() {\r\n$(\"#mega-menu\").mouseenter(function() {\r\n$(\"#mm-nav-overlay\").toggle();\r\n}).mouseleave(function () {\r\n$(\"#mm-nav-overlay\").hide();\r\n});\r\n});\r\n<\/script><\/pre>\n
Open the Mega Menu layout and at the end, just after<\/p>\n
 <\/div><div style=\"clear:left\"><\/div> <\/pre>\n
paste:<\/p>\n
<div style=\"display:none;\" id=\"mm-nav-overlay\"><\/div><\/pre>\n
Enjoy!<\/p>\n
Here it is in a responsive Sellerdeck website I designed for Kool Kingdom<\/a>:<\/p>\n
\"Mega<\/p>\n
Enjoy!<\/p>\n","protected":false},"excerpt":{"rendered":"
Opening Mega Menu in a ‘Lightbox’. There is a bit of a trend for the opening of mega menus in a ‘Lightbox’ type effect. This is easy to do with SellerDeck. 1. Paste this into your css: #mm-nav-overlay { position:…<\/span> <\/p>\n
Read more ›<\/b><\/div>\n
<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-71","post","type-post","status-publish","format-standard","hentry","category-graphicz-articles"],"_links":{"self":[{"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/posts\/71"}],"collection":[{"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=71"}],"version-history":[{"count":18,"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/posts\/71\/revisions"}],"predecessor-version":[{"id":93,"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/posts\/71\/revisions\/93"}],"wp:attachment":[{"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=71"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=71"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=71"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}