\r\n

\r\n <img scr=\"images\/img1.jpg\" alt=\"\" \/>\r\n Main page<\/span>\r\n Main page welcome to our site<\/span><\/span>\r\n <\/div>\r\n<\/div>\r\n

\r\n

\r\n <img scr=\"images\/img2.jpg\" alt=\"\" \/>\r\n about us<\/span>\r\n about uswho we are<\/span><\/span>\r\n <\/div>\r\n<\/div>\r\n

\r\n

\r\n <img scr=\"images\/img3.jpg\" alt=\"\" \/>\r\n services<\/span>\r\n services & solutions<\/span><\/span>\r\n <\/div>\r\n<\/div>\r\n

\r\n

\r\n <img scr=\"images\/img4.jpg\" alt=\"\" \/>\r\n partners<\/span>\r\n partners parnters list<\/span><\/span>\r\n <\/div>\r\n<\/div>\r\n

\r\n

\r\n <img scr=\"images\/img5.jpg\" alt=\"\" \/>\r\n locations<\/span>\r\n locations our contacts<\/span><\/span>\r\n <\/div>\r\n<\/div>\r\n<\/pre>\r\n\r\nThe first item will get a z-index of 5 and then we will decrease the z-index for the next items. This will make the last item be in the lowest layer. We do this in order to create the card deck collapsing effect.\r\n\r\nNext goes the content of the pages:\r\n\r\n

\r\n\r\n        \r\n            ..............\r\n        <\/section>\r\n        \r\n            ..............\r\n        <\/section>\r\n        \r\n            ..............\r\n        <\/section>\r\n        ........\r\n        \r\n            ..............\r\n        <\/section>\r\n        \r\n            ..............\r\n        <\/section>\r\n<\/div>\r\nback to menu<\/span>\r\nback to page<\/span>\r\nPrivacy policy<\/a>\r\n<\/pre>\r\n\r\n\r\n <\/p>\r\n
CSS<\/h3>\r\n\r\n\r\n\r\n.cc_menu {\r\nwidth:979px;\r\nheight:591px;\r\nposition: absolute;\r\noverflow:hidden\r\n}\r\n.cc_item{\r\ntext-align:center;\r\nwidth:195px;\r\nheight:591px;\r\nfloat:left;\r\nbackground:#171717;\r\nposition:relative;\r\nmargin-right:1px;\r\n}\r\nspan.cc_title{\r\ncolor:#fff;\r\nline-height:46px;\r\nfont-size:30px;\r\ntop:224px;\r\nleft:14px;\r\nposition:absolute;\r\nbackground:#272727;\r\nwidth:167px;\r\ndisplay:block;\r\nz-index:11;\r\n}\r\n.cc_item div{\r\ncursor:pointer\r\n}\r\n.cc_submenu{\r\ndisplay:block;\r\nwidth:163px;\r\nmargin:0;\r\npadding:0;\r\nheight:0px;\r\noverflow:hidden;\r\ntext-align:left;\r\nposition:absolute;\r\nleft:0px;\r\nbottom:-32px;\r\nbackground:url(..\/images\/bg_opacity.png) repeat;z-index:13;\r\n}\r\n.cc_submenu{\r\ncolor:#fff;\r\nfont-size:30px;\r\ncursor:pointer;\r\npadding:16px;\r\nline-height:44px;\r\ntext-transform:uppercase\r\n}\r\n.cc_submenu span{\r\ndisplay:block;\r\nfont-size:20px;\r\ncolor:#c5c5c5;\r\nline-height:26px;\r\npadding-top:8px;\r\n}\r\n.cc_item img{\r\nposition:absolute;\r\nwidth:195px;\r\nheight:591px;\r\ntop:-591px;\r\nleft:0px;\r\n}\r\n.cc_content{\r\nwidth:783px;\r\nheight:591px;\r\nposition:absolute;\r\nleft:-800px;\r\nbackground:#171717;\r\noverflow:hidden;\r\n}\r\n.cc_content section{\r\nwidth:100%;\r\ntext-transform:none;\r\nfont-size:12px;\r\nline-height:18px;\r\ndisplay:none\r\n}\r\nspan.cc_back, .cc_back_page{\r\nposition:absolute;\r\ntop:11px;\r\nright:-140px;\r\ncursor:pointer;\r\nfont:14px Arial, Helvetica, sans-serif; color:#171717;\r\nline-height:35px;\r\ntext-transform:uppercase;\r\npadding:0 18px;\r\nbackground:#feb400;\r\n}\r\n.privacy, .read_more{\r\nwidth:887px;\r\nposition:absolute;\r\nright:-980px; top:0;\r\nbackground:#171717;\r\nz-index:20;\r\npadding:0 46px;\r\n}\r\n.read_more{\r\nz-index:19\r\n}\r\n<\/pre>","protected":false},"excerpt":{"rendered":"A collapsing menu contains vertical navigation bars and a slide out content area. When hovering over a menu item, an image slides down from the top and a submenu slides up from the bottom. Clicking on one of the submenu items will make the whole menu collapse like a card deck and the respective content […]<\/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":[815,794,813,571,634],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/6662"}],"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=6662"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/6662\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=6662"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=6662"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=6662"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}