{"id":857,"date":"2009-07-09T12:40:51","date_gmt":"2009-07-09T12:40:51","guid":{"rendered":"http:\/\/aceinfowayindia.com\/blog\/?p=857"},"modified":"2019-01-08T17:02:42","modified_gmt":"2019-01-08T17:02:42","slug":"simple-verticale-menu-tutorial","status":"publish","type":"post","link":"http:\/\/aceinfowayindia.com\/blog\/2009\/07\/simple-verticale-menu-tutorial\/","title":{"rendered":"Simple Verticale Menu Tutorial"},"content":{"rendered":"<p>This is a very simple, verticale css menu .This tutorial helps to create a simple and attractive CSS menu with a cool hover effect.<br \/>\n<!--more--><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/aceinfowayindia.com\/blog\/wp-content\/uploads\/2009\/07\/css-vertical-menu.jpg\" alt=\"css-vertical-menu\" title=\"css-vertical-menu\" width=\"299\" height=\"179\" class=\"alignnone size-full wp-image-871\" \/><\/p>\n<h2>Step : 1<\/h2>\n<p>First of all let us write CSS code for menu. here goes the code..<\/p>\n<pre>\r\n[code lang=\"css\"]\r\n#nav ul {\r\nmargin:0;\r\npadding:0;\r\nlist-style-type:none;\r\n}\r\n[\/code]\r\n\r\n[code lang=\"css\"]\r\n#nav ul li {\r\ndisplay: inline; \/*IE 6*\/\r\n}\r\n[\/code]\r\n\r\n[code lang=\"css\"]\r\n#nav ul li a {\r\ndisplay:block;\r\nbackground:#d9d9d9;\r\nwidth:200px;\r\ntext-decoration:none;\r\npadding:4px\/*padding for top, bottom*\/ 7px \/*padding for left, right*\/;\r\nborder-bottom:1px solid #eeeeee;\r\nborder-top:1px solid #cccccc;\r\nborder-left:5px solid #333333;\r\ncolor:#333333;\r\n[\/code]\r\n\r\n[code lang=\"css\"]\r\n#nav ul li a:hover {\r\nborder-left-color:#0099FF;\r\ncolor:#0066FF;\r\nbackground:#c4c4c4;\r\n}\r\n[\/code]\r\n<\/pre>\n<h2>Step : 2<\/h2>\n<p>Now we create a basic html structure.<\/p>\n<pre>\r\n[code lang=\"htmlstrict\"]\r\n <div id=\"nav\">\r\n     <ul>\r\n          <li><a href=\"#\">Home<\/a><\/li>\r\n          <li><a href=\"#\">About Us<\/a><\/li>\r\n          <li><a href=\"#\">Services<\/a><\/li>\r\n          <li><a href=\"#\">Sitemap<\/a><\/li>\r\n          <li><a href=\"#\">Contact<\/a><\/li>\r\n    < \/ul>\r\n <\/div>\r\n[\/code]\r\n<\/pre>\n<p>Yeah..! its done! see how simple is to create a CSS menu\u2026 A <a href='http:\/\/aceinfowayindia.com\/blog\/wp-content\/uploads\/2009\/07\/simple-verticale-css-menu.html'>demo<\/a>..?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is a very simple, verticale css menu .This tutorial helps to create a simple and attractive CSS menu with a cool hover effect.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,56],"tags":[52,23],"class_list":["post-857","post","type-post","status-publish","format-standard","hentry","category-css","category-tutorials","tag-css","tag-tutorials"],"_links":{"self":[{"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts\/857","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/comments?post=857"}],"version-history":[{"count":18,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts\/857\/revisions"}],"predecessor-version":[{"id":905,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts\/857\/revisions\/905"}],"wp:attachment":[{"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/media?parent=857"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/categories?post=857"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/tags?post=857"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}