{"id":3111,"date":"2012-01-09T16:05:27","date_gmt":"2012-01-09T22:05:27","guid":{"rendered":"http:\/\/www.mrc-productivity.com\/blog\/?p=3111"},"modified":"2012-01-09T16:33:17","modified_gmt":"2012-01-09T22:33:17","slug":"tutorial-create-a-pure-css-navigation-menu-for-your-web-apps","status":"publish","type":"post","link":"https:\/\/www.mrc-productivity.com\/blog\/2012\/01\/tutorial-create-a-pure-css-navigation-menu-for-your-web-apps\/","title":{"rendered":"Tutorial: Create a pure CSS navigation menu for your web apps"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-725\" title=\"Education\" src=\"https:\/\/www.mrc-productivity.com\/blog\/wp-content\/uploads\/2010\/11\/Education.jpg\" alt=\"Education\" width=\"76\" height=\"100\" \/>You\u2019ve heard the saying, \u201cDon\u2019t judge a book by it\u2019s cover.\u201d It\u2019s good advice, but largely ignored. Whether consciously or subconsciously, we pass judgements based on appearance on a daily basis.<\/p>\n<p>This fact is especially important in business. Studies have shown that people judge a web page\/app in less than one second. What does that mean? If you\u2019re building apps for customers or prospects, appearance can affect revenue. If you\u2019re building for internal users, it can affect usability.<\/p>\n<p>Don\u2019t get me wrong&#8211;I\u2019m not telling you to focus solely on appearance. I\u2019m telling you not to ignore appearance, because like it or not, an app is judged by it\u2019s appearance first, and usefulness second.<\/p>\n<p>How can you improve your application\u2019s appearance? There are a few ways, but one of the best and easiest way is the navigation menu. A well-designed navigation menu will improve the overall look and feel as well as the usability of the web app. If you\u2019d like to learn a simple way to create a good-looking navigation menu using CSS, we\u2019ve written up a tutorial, which <a onclick=\"javascript:pageTracker._trackPageview('\/blog\/Click\/BIL120111_CSSNavigationTutorial_tutorial');\" href=\"https:\/\/www.mrc-productivity.com\/techblog\/?p=1049\" target=\"_blank\"><span style=\"color: red; font-weight: bold;\">you can find here<\/span><\/a>.<\/p>\n<p>For more tips on usability, <a onclick=\"javascript:pageTracker._trackPageview('\/blog\/Click\/BIL120111_CSSNavigationTutorial_UI');\" href=\"https:\/\/www.mrc-productivity.com\/techblog\/?p=679\" target=\"_blank\"><span style=\"color: red; font-weight: bold;\">this article gives a few more ideas<\/span><\/a>.<a name=\"20120106\"><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>You\u2019ve heard the saying, \u201cDon\u2019t judge a book by it\u2019s cover.\u201d It\u2019s good advice, but largely ignored. Whether consciously or subconsciously, we pass judgements based on appearance on a daily basis. This fact is especially important in business. Studies have shown that people judge a web page\/app in less than one second. What does that &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/www.mrc-productivity.com\/blog\/2012\/01\/tutorial-create-a-pure-css-navigation-menu-for-your-web-apps\/\"> <span class=\"screen-reader-text\">Tutorial: Create a pure CSS navigation menu for your web apps<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","slim_seo":{"title":"Tutorial: Create a pure CSS navigation menu for your web apps - mrc&#039;s Cup of Joe Blog","description":"You\u2019ve heard the saying, \u201cDon\u2019t judge a book by it\u2019s cover.\u201d It\u2019s good advice, but largely ignored. Whether consciously or subconsciously, we pass judgements ba"},"footnotes":""},"categories":[8],"tags":[53,43],"class_list":["post-3111","post","type-post","status-publish","format-standard","hentry","category-education","tag-tutorials","tag-usability"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/posts\/3111","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/comments?post=3111"}],"version-history":[{"count":9,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/posts\/3111\/revisions"}],"predecessor-version":[{"id":3142,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/posts\/3111\/revisions\/3142"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/media?parent=3111"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/categories?post=3111"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/tags?post=3111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}