{"id":1479,"date":"2016-08-15T19:40:43","date_gmt":"2016-08-15T09:40:43","guid":{"rendered":"http:\/\/codemyui.com\/?p=1479"},"modified":"2018-05-17T12:17:22","modified_gmt":"2018-05-17T02:17:22","slug":"pure-css-slide-navigation-menu","status":"publish","type":"post","link":"https:\/\/codemyui.com\/pure-css-slide-navigation-menu\/","title":{"rendered":"Pure CSS Slide Out Navigation Menu"},"content":{"rendered":"

A menu navigation<\/a> designed by Max Kurapov. The menu sits on the right corner and slides into view when you hover over it.
\n<\/p>\n

If you are having trouble with the pen, try the archived copy on GitHub<\/a><\/p>\n

\nSee the Pen Pure CSS Slide Out Menu by Max Kurapov (@mkurapov) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"

A menu navigation designed by Max Kurapov. The menu sits on the right corner and slides into view when you hover over it.<\/p>\nRead More<\/a>","protected":false},"author":2,"featured_media":1482,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[192416248,1520705,30305495],"class_list":["post-1479","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-hover-animation","tag-navigation-menu","tag-pure-css","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/pure-css-slide-out-navigation-menu.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":1400,"url":"https:\/\/codemyui.com\/pure-css-sliding-navigation-button-animation\/","url_meta":{"origin":1479,"position":0},"title":"Pure CSS Sliding Navigation Button Animation","author":"Hima Vincent","date":"August 4, 2016","format":false,"excerpt":"This is a cool navigation button animation you can use in your web project. When you hover over the small round-edged white tab on the left side of the screen, it will come out as a long white rectangular tab with the navigation name label on it. If you are\u2026","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Pure CSS Sliding Navigation Button Hover Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/pure-css-sliding-navigation-button-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/pure-css-sliding-navigation-button-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/pure-css-sliding-navigation-button-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/pure-css-sliding-navigation-button-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25634,"url":"https:\/\/codemyui.com\/pure-css-hamburger-menu-slide-in\/","url_meta":{"origin":1479,"position":1},"title":"Pure CSS Hamburger Menu Slide In","author":"Saijo George","date":"April 23, 2018","format":false,"excerpt":"With this hamburger menu when you click on it, the navigation menu sidebar expands into view from the top left. If you are having trouble with the pen, try the archived copy on GitHub Hamburger Menu Slide In Snippet","rel":"","context":"In \"hamburger menu\"","block_context":{"text":"hamburger menu","link":"https:\/\/codemyui.com\/tag\/hamburger-menu\/"},"img":{"alt_text":"Pure CSS Hamburger Menu Slide In","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/04\/Pure-CSS-Hamburger-Menu-Slide-In.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/04\/Pure-CSS-Hamburger-Menu-Slide-In.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/04\/Pure-CSS-Hamburger-Menu-Slide-In.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/04\/Pure-CSS-Hamburger-Menu-Slide-In.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":912,"url":"https:\/\/codemyui.com\/simple-mega-menu-pure-css\/","url_meta":{"origin":1479,"position":2},"title":"A Simple Mega Menu in Pure CSS","author":"Hima Vincent","date":"June 27, 2016","format":false,"excerpt":"Most of the time a menu is the starting point for your users on the website and when it comes to big e-commerce sites there is no way you are able to add all the important navigation elements on a standard menu. Today we are looking a simple mega menu\u2026","rel":"","context":"In \"hover animation\"","block_context":{"text":"hover animation","link":"https:\/\/codemyui.com\/tag\/hover-animation\/"},"img":{"alt_text":"A Simple Mega Menu in Pure CSS","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/06\/a-simple-mega-menu-in-pure-css.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/06\/a-simple-mega-menu-in-pure-css.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/06\/a-simple-mega-menu-in-pure-css.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/06\/a-simple-mega-menu-in-pure-css.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25630,"url":"https:\/\/codemyui.com\/css-only-hover-show-hide-navigation-menu\/","url_meta":{"origin":1479,"position":3},"title":"CSS Only Hover Show\/Hide Navigation Menu","author":"Saijo George","date":"April 23, 2018","format":false,"excerpt":"Need a simple navigation menu on the left-hand side that is collapsed by default and is expanded when you hover over it? Look no further this CSS only navigation menu will help you easily achieve it. If you are having trouble with the pen, try the archived copy on GitHub\u2026","rel":"","context":"In \"hover animation\"","block_context":{"text":"hover animation","link":"https:\/\/codemyui.com\/tag\/hover-animation\/"},"img":{"alt_text":"CSS Only Hover Show-Hide Navigation Menu","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/04\/CSS-Only-Hover-Show-Hide-Navigation-Menu.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/04\/CSS-Only-Hover-Show-Hide-Navigation-Menu.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/04\/CSS-Only-Hover-Show-Hide-Navigation-Menu.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/04\/CSS-Only-Hover-Show-Hide-Navigation-Menu.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":1848,"url":"https:\/\/codemyui.com\/hamburger-menu-full-screen-navigation-menu-pure-css\/","url_meta":{"origin":1479,"position":4},"title":"Hamburger Menu to Full-Screen Navigation Menu in Pure CSS","author":"Hima Vincent","date":"August 24, 2016","format":false,"excerpt":"Use this pure CSS hamburger menu in your next project where you want to show a full-screen navigation menu. It was designed by Julien Lejeune. When you click on the menu icon on the top right it slides out the navigation menu that fills up the entire screen and turns\u2026","rel":"","context":"In \"full screen\"","block_context":{"text":"full screen","link":"https:\/\/codemyui.com\/tag\/full-screen\/"},"img":{"alt_text":"Hamburger Menu to Full-Screen Navigation Menu in Pure CSS","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/hamburger-menu-to-full-screen-navigation-menu-in-pure-css.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/hamburger-menu-to-full-screen-navigation-menu-in-pure-css.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/hamburger-menu-to-full-screen-navigation-menu-in-pure-css.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/hamburger-menu-to-full-screen-navigation-menu-in-pure-css.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":30278,"url":"https:\/\/codemyui.com\/hamburger-menu-to-css-only-full-screen-slide-in-navigation-menu\/","url_meta":{"origin":1479,"position":5},"title":"Hamburger Menu to CSS Only Full-Screen Slide in Navigation Menu","author":"Hima Vincent","date":"June 3, 2021","format":false,"excerpt":"Code by: Ryan Mulligan If you are having trouble with the pen, try the archived copy on GitHub. Hamburger Menu to Full-Screen Navigation Menu Snippet","rel":"","context":"In \"hamburger menu\"","block_context":{"text":"hamburger menu","link":"https:\/\/codemyui.com\/tag\/hamburger-menu\/"},"img":{"alt_text":"Hamburger Menu to CSS Only Full-Screen Slide in Navigation Menu","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/06\/Hamburger-Menu-to-CSS-Only-Full-Screen-Slide-in-Navigation-Menu.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/06\/Hamburger-Menu-to-CSS-Only-Full-Screen-Slide-in-Navigation-Menu.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/06\/Hamburger-Menu-to-CSS-Only-Full-Screen-Slide-in-Navigation-Menu.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/06\/Hamburger-Menu-to-CSS-Only-Full-Screen-Slide-in-Navigation-Menu.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/1479","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=1479"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/1479\/revisions"}],"predecessor-version":[{"id":26078,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/1479\/revisions\/26078"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/1482"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=1479"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=1479"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=1479"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}