{"id":1343,"date":"2020-03-19T20:00:00","date_gmt":"2020-03-19T19:00:00","guid":{"rendered":"https:\/\/merseli.com\/?p=1343"},"modified":"2020-06-03T11:01:44","modified_gmt":"2020-06-03T09:01:44","slug":"lavalamp-menu-using-css3","status":"publish","type":"post","link":"https:\/\/merseli.com\/en\/2020\/03\/19\/lavalamp-menu-using-css3\/","title":{"rendered":"Lavalamp menu using CSS3"},"content":{"rendered":"\n<p>Example of a simple menu in lavalamp style written using only CSS attributes and properties.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">CSS3<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; first-line: 2; title: ; notranslate\" title=\"\">\nnav.lavalamp {\n\tmargin: 27px auto 0;\n\tposition: relative;\n\twidth: 590px;\n\theight: 50px;\n\tbackground-color: #34495e;\n\tborder-radius: 8px;\n\tfont-size: 0;\n}\nnav.lavalamp a {\n\tline-height: 50px;\n\theight: 100%;\n\tfont-size: 15px;\n\tdisplay: inline-block;\n\tposition: relative;\n\tz-index: 1;\n\ttext-decoration: none;\n\ttext-transform: uppercase;\n\ttext-align: center;\n\tcolor: white;\n\tcursor: pointer;\n}\nnav.lavalamp .animation {\n\tposition: absolute;\n\theight: 100%;\n\ttop: 0;\n\tz-index: 0;\n\ttransition: all .5s ease 0s;\n\tborder-radius: 8px;\n}\nnav.lavalamp a:nth-child(1) {\n\twidth: 100px;\n}\nnav.lavalamp a:nth-child(2) {\n\twidth: 110px;\n}\nnav.lavalamp a:nth-child(3) {\n\twidth: 100px;\n}\nnav.lavalamp a:nth-child(4) {\n\twidth: 160px;\n}\nnav.lavalamp a:nth-child(5) {\n\twidth: 120px;\n}\nnav.lavalamp .start-home, a:nth-child(1):hover~.animation {\n\twidth: 100px;\n\tleft: 0;\n\tbackground-color: #1abc9c;\n}\nnav.lavalamp .start-about, a:nth-child(2):hover~.animation {\n\twidth: 110px;\n\tleft: 100px;\n\tbackground-color: #e74c3c;\n}\nnav.lavalamp .start-blog, a:nth-child(3):hover~.animation {\n\twidth: 100px;\n\tleft: 210px;\n\tbackground-color: #3498db;\n}\nnav.lavalamp .start-portefolio, a:nth-child(4):hover~.animation {\n\twidth: 160px;\n\tleft: 310px;\n\tbackground-color: #9b59b6;\n}\nnav.lavalamp .start-contact, a:nth-child(5):hover~.animation {\n\twidth: 120px;\n\tleft: 470px;\n\tbackground-color: #e67e22;\n}\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">HTML<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;h1&gt;Lavalamp CSS Menu&lt;\/h1&gt;\n\n&lt;nav class=&quot;lavalamp&quot;&gt;\n\t&lt;a href=&quot;#&quot;&gt;Home&lt;\/a&gt;\n\t&lt;a href=&quot;#&quot;&gt;About&lt;\/a&gt;\n\t&lt;a href=&quot;#&quot;&gt;Blog&lt;\/a&gt;\n\t&lt;a href=&quot;#&quot;&gt;Portefolio&lt;\/a&gt;\n\t&lt;a href=&quot;#&quot;&gt;Contact&lt;\/a&gt;\n\t&lt;div class=&quot;animation start-home&quot;&gt;&lt;\/div&gt;\n&lt;\/nav&gt;\n<\/pre><\/div>\n\n\n<style>\n\nnav.lavalamp {\n\tmargin: 27px auto 0;\n\n\tposition: relative;\n\twidth: 590px;\n\theight: 50px;\n\tbackground-color: #34495e;\n\tborder-radius: 8px;\n\tfont-size: 0;\n}\nnav.lavalamp a {\n\tline-height: 50px;\n\theight: 100%;\n\tfont-size: 15px;\n\tdisplay: inline-block;\n\tposition: relative;\n\tz-index: 1;\n\ttext-decoration: none;\n\ttext-transform: uppercase;\n\ttext-align: center;\n\tcolor: white;\n\tcursor: pointer;\n}\nnav.lavalamp .animation {\n\tposition: absolute;\n\theight: 100%;\n\ttop: 0;\n\tz-index: 0;\n\ttransition: all .5s ease 0s;\n\tborder-radius: 8px;\n}\nnav.lavalamp a:nth-child(1) {\n\twidth: 100px;\n}\nnav.lavalamp a:nth-child(2) {\n\twidth: 110px;\n}\nnav.lavalamp a:nth-child(3) {\n\twidth: 100px;\n}\nnav.lavalamp a:nth-child(4) {\n\twidth: 160px;\n}\nnav.lavalamp a:nth-child(5) {\n\twidth: 120px;\n}\nnav.lavalamp .start-home, a:nth-child(1):hover~.animation {\n\twidth: 100px;\n\tleft: 0;\n\tbackground-color: #1abc9c;\n}\nnav.lavalamp .start-about, a:nth-child(2):hover~.animation {\n\twidth: 110px;\n\tleft: 100px;\n\tbackground-color: #e74c3c;\n}\nnav.lavalamp .start-blog, a:nth-child(3):hover~.animation {\n\twidth: 100px;\n\tleft: 210px;\n\tbackground-color: #3498db;\n}\nnav.lavalamp .start-portefolio, a:nth-child(4):hover~.animation {\n\twidth: 160px;\n\tleft: 310px;\n\tbackground-color: #9b59b6;\n}\nnav.lavalamp .start-contact, a:nth-child(5):hover~.animation {\n\twidth: 120px;\n\tleft: 470px;\n\tbackground-color: #e67e22;\n}\n<\/style>\n\n<h1>Lavalamp Menu CSS3<\/h1>\n\n<nav class=\"lavalamp\">\n\t<a href=\"#\">Home<\/a>\n\t<a href=\"#\">About<\/a>\n\t<a href=\"#\">Blog<\/a>\n\t<a href=\"#\">Portefolio<\/a>\n\t<a href=\"#\">Contact<\/a>\n\t<div class=\"animation start-home\"><\/div>\n<\/nav>\n","protected":false},"excerpt":{"rendered":"<p>Example of a simple menu in lavalamp style written using only CSS attributes and properties. CSS3 nav.lavalamp { margin: 27px auto 0; position: relative; width: 590px; height: 50px; background-color: #34495e; border-radius: 8px; font-size: 0; } nav.lavalamp a { line-height: 50px; height: 100%; font-size: 15px; display: inline-block; position: relative; z-index: 1; text-decoration: none; text-transform: uppercase; text-align: [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1346,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_vp_format_video_url":"","_vp_image_focal_point":[],"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[39],"tags":[10,42,25],"class_list":["post-1343","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development","tag-css3","tag-lavalamp","tag-menu"],"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/merseli.com\/wp-content\/uploads\/2020\/03\/lavalamp-ccs3.png","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/merseli.com\/en\/wp-json\/wp\/v2\/posts\/1343","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/merseli.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/merseli.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/merseli.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/merseli.com\/en\/wp-json\/wp\/v2\/comments?post=1343"}],"version-history":[{"count":6,"href":"https:\/\/merseli.com\/en\/wp-json\/wp\/v2\/posts\/1343\/revisions"}],"predecessor-version":[{"id":1355,"href":"https:\/\/merseli.com\/en\/wp-json\/wp\/v2\/posts\/1343\/revisions\/1355"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/merseli.com\/en\/wp-json\/wp\/v2\/media\/1346"}],"wp:attachment":[{"href":"https:\/\/merseli.com\/en\/wp-json\/wp\/v2\/media?parent=1343"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/merseli.com\/en\/wp-json\/wp\/v2\/categories?post=1343"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/merseli.com\/en\/wp-json\/wp\/v2\/tags?post=1343"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}