{"id":2291,"date":"2015-01-10T07:27:00","date_gmt":"2015-01-10T07:27:00","guid":{"rendered":"http:\/\/www.vishmax.com\/en\/?p=2291"},"modified":"2015-05-10T07:24:44","modified_gmt":"2015-05-10T07:24:44","slug":"how-to-create-a-tab-menu-using-html5-and-css3","status":"publish","type":"post","link":"https:\/\/www.vishmax.com\/en\/labs\/how-to-create-a-tab-menu-using-html5-and-css3\/","title":{"rendered":"How to create a tab menu Using HTML5 And CSS3"},"content":{"rendered":"<p>Here is another CSS trick for creating tab menu using only HTML5 And CSS3. you can change it according to your needs and almost modern browsers supports this. This is tested on latest version of Firefox, Chrome, Opera and IE. Below you can find code used for developing this example and after that there is also option for viewing live demo of this tutorial.<\/p>\n<h2>CSS<\/h2>\n<pre lang=\"css\">\r\n\r\n\t#tab li { \r\n\t\tfloat:left;\r\n\t\twidth:90px; \r\n\t\tlist-style:none; \r\n\t\tline-height:25px;\r\n\t\tpadding:10px; \r\n\t\tfont-size:16px;\r\n\t\tborder-radius:3px 3px 0 0; \r\n\t\tbackground:#24bd91; \r\n\t\tcolor:#fff;\r\n\t\ttext-align:center; \r\n\t\tborder-bottom:none;\r\n\t\tcursor:pointer;\r\n\t\tmargin: 0 5px 0 0; \r\n\t}\r\n\t#tab li:hover { \r\n\t\tbackground:#37dcad;\r\n\t}\r\n\tlabel { \r\n\t\tpadding:10px;\r\n\t\tcursor:pointer; \r\n\t}\r\n\tinput { \r\n\t\tdisplay:none; \r\n\t}\r\n\t#t1:checked ~ ul .li:nth-child(1),\r\n\t#t2:checked ~ ul .li:nth-child(2),\r\n\t#t3:checked ~ ul .li:nth-child(3),\r\n\t#t4:checked ~ ul .li:nth-child(4)\r\n\t{ \r\n\t\tbackground:#fff;\r\n\t\tcolor:#000; \r\n\t}\r\n\t.tab-bottom{\r\n\t\tfloat:left; \r\n\t\twidth:100%; \r\n\t\theight:250px; \r\n\t\tbackground:#fff;\r\n\t}\r\n\r\n\r\n<\/pre>\n<h2>HTML<\/h2>\n<pre lang=\"html\">\r\n\r\n\r\n\t\t<h1>Tab Menu using HTML5 and CSS3 Demo <\/h1>\r\n\r\n\t\t\t\t\r\n\t\t\t<div style=\"width:60%; height:auto; margin: 0 auto;\">\r\n\t\t\t\r\n\t\t\t<!-- TAB -->\t\r\n\r\n\t\t\t\t\t<input type=\"radio\" id=\"t1\" name=\"t1\">\r\n\t\t\t\t\t<input type=\"radio\" id=\"t2\" name=\"t1\">\r\n\t\t\t\t\t<input type=\"radio\" id=\"t3\" name=\"t1\">\r\n\t\t\t\t\t<input type=\"radio\" id=\"t4\" name=\"t1\">\r\n\t\t\t\t\t<ul id=\"tab\">\r\n\t\t\t\t\t\t<li class=\"li\"><label for=\"t1\">Tab 1<\/label><\/li>\r\n\t\t\t\t\t\t<li class=\"li\"><label for=\"t2\">Tab 2<\/label><\/li>\r\n\t\t\t\t\t\t<li class=\"li\"><label for=\"t3\">Tab 3<\/label><\/li>\r\n\t\t\t\t\t\t<li class=\"li\"><label for=\"t4\">Tab 4<\/label><\/li>\r\n\t\t\t\t\t<\/ul>\r\n\t\t\t\t\t<div class=\"tab-bottom\"><\/div>\r\n\t\t\t\t\t\r\n\t\t\t<!-- \/ TAB -->\t\r\n\t\t\t\r\n\t\t\t<\/div>\t\r\n\r\n\r\n\r\n\r\n<\/pre>\n<p><a class=\"external-download\" href=\"http:\/\/vishmax.com\/demos\/css-tab-menu.html\" target=\"_blank\">Live Demo<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here is another CSS trick for creating tab menu using only HTML5 And CSS3. you can change it according to your needs and almost modern browsers supports this. This is tested on latest version of Firefox, Chrome, Opera and IE. Below you can find code used for developing this example and after that there is [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2591,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[44],"tags":[72,67,101,94],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.2.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to create a tab menu Using HTML5 And CSS3 - Vishmax.com<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vishmax.com\/en\/labs\/how-to-create-a-tab-menu-using-html5-and-css3\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create a tab menu Using HTML5 And CSS3 - Vishmax.com\" \/>\n<meta property=\"og:description\" content=\"Here is another CSS trick for creating tab menu using only HTML5 And CSS3. you can change it according to your needs and almost modern browsers supports this. This is tested on latest version of Firefox, Chrome, Opera and IE. Below you can find code used for developing this example and after that there is [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vishmax.com\/en\/labs\/how-to-create-a-tab-menu-using-html5-and-css3\/\" \/>\n<meta property=\"og:site_name\" content=\"Vishmax.com\" \/>\n<meta property=\"article:published_time\" content=\"2015-01-10T07:27:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-05-10T07:24:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2015\/01\/tab-menu-400x230.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"400\" \/>\n\t<meta property=\"og:image:height\" content=\"230\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.vishmax.com\/en\/labs\/how-to-create-a-tab-menu-using-html5-and-css3\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.vishmax.com\/en\/labs\/how-to-create-a-tab-menu-using-html5-and-css3\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93\"},\"headline\":\"How to create a tab menu Using HTML5 And CSS3\",\"datePublished\":\"2015-01-10T07:27:00+00:00\",\"dateModified\":\"2015-05-10T07:24:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.vishmax.com\/en\/labs\/how-to-create-a-tab-menu-using-html5-and-css3\/\"},\"wordCount\":78,\"publisher\":{\"@id\":\"https:\/\/www.vishmax.com\/en\/#organization\"},\"keywords\":[\"Code Library\",\"CSS\",\"Examples\",\"Web Design Tips\"],\"articleSection\":[\"Labs\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vishmax.com\/en\/labs\/how-to-create-a-tab-menu-using-html5-and-css3\/\",\"url\":\"https:\/\/www.vishmax.com\/en\/labs\/how-to-create-a-tab-menu-using-html5-and-css3\/\",\"name\":\"How to create a tab menu Using HTML5 And CSS3 - Vishmax.com\",\"isPartOf\":{\"@id\":\"https:\/\/www.vishmax.com\/en\/#website\"},\"datePublished\":\"2015-01-10T07:27:00+00:00\",\"dateModified\":\"2015-05-10T07:24:44+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vishmax.com\/en\/labs\/how-to-create-a-tab-menu-using-html5-and-css3\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vishmax.com\/en\/labs\/how-to-create-a-tab-menu-using-html5-and-css3\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vishmax.com\/en\/labs\/how-to-create-a-tab-menu-using-html5-and-css3\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vishmax.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to create a tab menu Using HTML5 And CSS3\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vishmax.com\/en\/#website\",\"url\":\"https:\/\/www.vishmax.com\/en\/\",\"name\":\"Vishmax.com\",\"description\":\"Software Company in Calicut for Web Design and eCommerce\",\"publisher\":{\"@id\":\"https:\/\/www.vishmax.com\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vishmax.com\/en\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vishmax.com\/en\/#organization\",\"name\":\"Vishmax.com\",\"url\":\"https:\/\/www.vishmax.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png\",\"contentUrl\":\"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png\",\"width\":150,\"height\":50,\"caption\":\"Vishmax.com\"},\"image\":{\"@id\":\"https:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vishmax.com\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g\",\"caption\":\"admin\"},\"url\":\"https:\/\/www.vishmax.com\/en\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to create a tab menu Using HTML5 And CSS3 - Vishmax.com","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vishmax.com\/en\/labs\/how-to-create-a-tab-menu-using-html5-and-css3\/","og_locale":"en_US","og_type":"article","og_title":"How to create a tab menu Using HTML5 And CSS3 - Vishmax.com","og_description":"Here is another CSS trick for creating tab menu using only HTML5 And CSS3. you can change it according to your needs and almost modern browsers supports this. This is tested on latest version of Firefox, Chrome, Opera and IE. Below you can find code used for developing this example and after that there is [&hellip;]","og_url":"https:\/\/www.vishmax.com\/en\/labs\/how-to-create-a-tab-menu-using-html5-and-css3\/","og_site_name":"Vishmax.com","article_published_time":"2015-01-10T07:27:00+00:00","article_modified_time":"2015-05-10T07:24:44+00:00","og_image":[{"width":400,"height":230,"url":"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2015\/01\/tab-menu-400x230.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.vishmax.com\/en\/labs\/how-to-create-a-tab-menu-using-html5-and-css3\/#article","isPartOf":{"@id":"https:\/\/www.vishmax.com\/en\/labs\/how-to-create-a-tab-menu-using-html5-and-css3\/"},"author":{"name":"admin","@id":"https:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93"},"headline":"How to create a tab menu Using HTML5 And CSS3","datePublished":"2015-01-10T07:27:00+00:00","dateModified":"2015-05-10T07:24:44+00:00","mainEntityOfPage":{"@id":"https:\/\/www.vishmax.com\/en\/labs\/how-to-create-a-tab-menu-using-html5-and-css3\/"},"wordCount":78,"publisher":{"@id":"https:\/\/www.vishmax.com\/en\/#organization"},"keywords":["Code Library","CSS","Examples","Web Design Tips"],"articleSection":["Labs"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.vishmax.com\/en\/labs\/how-to-create-a-tab-menu-using-html5-and-css3\/","url":"https:\/\/www.vishmax.com\/en\/labs\/how-to-create-a-tab-menu-using-html5-and-css3\/","name":"How to create a tab menu Using HTML5 And CSS3 - Vishmax.com","isPartOf":{"@id":"https:\/\/www.vishmax.com\/en\/#website"},"datePublished":"2015-01-10T07:27:00+00:00","dateModified":"2015-05-10T07:24:44+00:00","breadcrumb":{"@id":"https:\/\/www.vishmax.com\/en\/labs\/how-to-create-a-tab-menu-using-html5-and-css3\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vishmax.com\/en\/labs\/how-to-create-a-tab-menu-using-html5-and-css3\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vishmax.com\/en\/labs\/how-to-create-a-tab-menu-using-html5-and-css3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vishmax.com\/en\/"},{"@type":"ListItem","position":2,"name":"How to create a tab menu Using HTML5 And CSS3"}]},{"@type":"WebSite","@id":"https:\/\/www.vishmax.com\/en\/#website","url":"https:\/\/www.vishmax.com\/en\/","name":"Vishmax.com","description":"Software Company in Calicut for Web Design and eCommerce","publisher":{"@id":"https:\/\/www.vishmax.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vishmax.com\/en\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vishmax.com\/en\/#organization","name":"Vishmax.com","url":"https:\/\/www.vishmax.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png","contentUrl":"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png","width":150,"height":50,"caption":"Vishmax.com"},"image":{"@id":"https:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vishmax.com\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g","caption":"admin"},"url":"https:\/\/www.vishmax.com\/en\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/posts\/2291"}],"collection":[{"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/comments?post=2291"}],"version-history":[{"count":0,"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/posts\/2291\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/media\/2591"}],"wp:attachment":[{"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/media?parent=2291"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/categories?post=2291"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/tags?post=2291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}