<div id=\"wrap\">\n <ul class=\"navbar\">\n <li><a href=\"#\">Home<\/a><\/li>\n <li>\n <a href=\"#\">Retrievals<\/a>\n <ul>\n <li><a href=\"#\">Data Listing<\/a><\/li>\n <li><a href=\"#\">Web Scheduling<\/a><\/li>\n <li><a href=\"#\">Google Maps Application<\/a><\/li>\n <\/ul>\n <\/li>\n <li>\n <a href=\"#\">Reporting<\/a>\n <ul>\n <li><a href=\"#\">Ad Hoc Report<\/a><\/li>\n <li><a href=\"#\">Drill Down Report<\/a><\/li>\n <li><a href=\"#\">Ranking Report<\/a><\/li>\n <\/ul>\n <\/li>\n <li>\n <a href=\"#\">Business Intelligence<\/a>\n <ul>\n <li><a href=\"#\">Business Dashboard<\/a><\/li>\n <li><a href=\"#\">Web Pivot Table<\/a><\/li>\n <li><a href=\"#\">Interactive Report<\/a><\/li>\n <li><a href=\"#\">What-If Analysis<\/a><\/li>\n <\/ul>\n <\/li>\n <li>\n <a href=\"#\">Data Maintenance<\/a>\n <ul>\n <li><a href=\"#\">Database CRUD<\/a><\/li>\n <li><a href=\"#\">Database Update<\/a><\/li>\n <li><a href=\"#\">Order Entry<\/a><\/li>\n <li><a href=\"#\">Drag-and-Drop Application<\/a><\/li>\n <\/ul>\n <\/li>\n <li>\n <a href=\"#\">B2B Portal<\/a>\n <ul>\n <li><a href=\"#\">B2B Portal<\/a><\/li>\n <li><a href=\"#\">Secure Data-Driven Listings<\/a><\/li>\n <li><a href=\"#\">Secure Shopping Cart<\/a><\/li>\n <\/ul>\n <\/li>\n <\/ul>\n<\/div><\/code><\/pre>\n\n\n\nNow, if you were to copy and paste that code into a web app, it would look just like a bulleted list. How does it look so different in the example? Why can\u2019t you see the drop-down list items until you hover over one of the options? The answer lies in the CSS, which we will cover next.<\/p>\n\n\n\n
CSS<\/h3>\n\n\n\n
The CSS portion of the menu provides all of the styling. In short, it\u2019s what makes the bulleted list look like a drop-down menu. It\u2019s what hides the drop-down options until you hover over the menu. It\u2019s what changes the colors when a selection is hovered over. To learn how, let\u2019s go over the code, and explain what each style does. To make things easier, I\u2019ve included an image with each section of code. In each image, I\u2019ve highlighted the area of the menu bar that code applies to.<\/p>\n\n\n\n
Sound good? Let\u2019s start at the top. The first style essentially creates a container for our navigation menu. It places the blue rectangle across the width of the page, and assigns it a height of 50px. You can find the code below, as well as an image to illustrate which section of the menu the code applies to. I\u2019ve placed comments on the parts of the code whose purpose may not be obvious:<\/p>\n\n\n\n
#wrap\t{\n\twidth: 100%; \/* Spans the width of the page *\/\n\theight: 50px; \n\tmargin: 0; \/* Ensures there is no space between sides of the screen and the menu *\/\n\tz-index: 99; \/* Makes sure that your menu remains on top of other page elements *\/\n\tposition: relative; \n\tbackground-color: #366b82;\n\t}<\/code><\/pre>\n\n\n\nThe next style ensures that the navigation menu does not affect other elements on the page. We accomplish this with the \u201cposition: absolute;\u201d style. When you position an element absolutely, it is taken out of the flow of the page. In other words, it\u2019s ignored by other elements. This is quite important as you don\u2019t want your drop-down menus to push other elements down, which they would do otherwise. Here\u2019s the code and the corresponding image for this style:<\/p>\n\n\n\n
.navbar\t{\n\theight: 50px;\n padding: 0;\n\tmargin: 0;\n\tposition: absolute; \/* Ensures that the menu doesn\u2019t affect other elements *\/\n\tborder-right: 1px solid #54879d; \n\t}<\/code><\/pre>\n\n\n\nNext, we move on to the styles that are responsible for making the menu items line up horizontally across the top of the page. I\u2019ve placed comments after the more important styles, so you understand how this code works. This code is responsible for main menu items in the navigation bar. Here\u2019s the code as well as the corresponding image:<\/p>\n\n\n\n
.navbar li \t{\n\t\t\theight: auto;\n\t\t\twidth: 150px; \/* Each menu item is 150px wide *\/\n\t\t\tfloat: left; \/* This lines up the menu items horizontally *\/\n\t\t\ttext-align: center; \/* All text is placed in the center of the box *\/\n\t\t\tlist-style: none; \/* Removes the default styling (bullets) for the list *\/\n\t\t\tfont: normal bold 12px\/1.2em Arial, Verdana, Helvetica; \n\t\t\tpadding: 0;\n\t\t\tmargin: 0;\n\t\t\tbackground-color: #366b82;\n }<\/code><\/pre>\n\n\n\nSo far, we\u2019ve created a list, removed the bullets, and lined up all of the list items horizontally. The next bit of code styles the anchor tags that are found in each list item. As you will see from the image, each anchor tag is the same size and shape as the list item. Here\u2019s the code for each anchor, as well as the corresponding image. I\u2019ve placed comments on the code to help you understand what each style does:<\/p>\n\n\n\n
\n.navbar a\t{\t\t\t\t\t\t\t\n\t\tpadding: 18px 0; \/* Adds a padding on the top and bottom so the text appears centered vertically *\/\n\t\tborder-left: 1px solid #54879d; \/* Creates a border in a slightly lighter shade of blue than the background. Combined with the right border, this creates a nice effect. *\/\n\t\tborder-right: 1px solid #1f5065; \/* Creates a border in a slightly darker shade of blue than the background. Combined with the left border, this creates a nice effect. *\/\n\t\ttext-decoration: none; \/* Removes the default hyperlink styling. *\/\n\t\tcolor: white; \/* Text color is white *\/\n\t\tdisplay: block;\n\t\t}\n<\/code><\/pre>\n\n\n\nThe next style is responsible for changing the color of each menu item\u2019s background when hovered over with a mouse pointer. There is no image, as it is fairly straightforward. Here\u2019s the code:<\/p>\n\n\n\n
.navbar li:hover, a:hover {background-color: #54879d;} <\/code><\/pre>\n\n\n\nI\u2019ve combined the next two styles as they are related. The first style hides the drop-down menu, while the second style displays it when a mouse pointer is hovered over the main menu item. Here\u2019s the code:<\/p>\n\n\n\n
\n.navbar li ul \t{\n\t\tdisplay: none; \/* Hides the drop-down menu *\/\n\t\theight: auto;\t\t\t\t\t\t\t\t\t\n\t\tmargin: 0; \/* Aligns drop-down box underneath the menu item *\/\n\t\tpadding: 0; \/* Aligns drop-down box underneath the menu item *\/\t\t\t\n\t\t}\t\t\t\t\n\n.navbar li:hover ul \t{\n display: block; \/* Displays the drop-down box when the menu item is hovered over *\/\n }\n<\/code><\/pre>\n\n\n\nThe next few styles apply to the drop down menu. Keep in mind that this style inherits most of its styles from \u201c.navbar li\u201d, which applies to all \u201cli\u201d elements found within the dropdown. We do want to change the background color of the drop-down menu. This only requires one style, which you\u2019ll find below (along with the image):<\/p>\n\n\n\n
.navbar li ul li {background-color: #54879d;} <\/code><\/pre>\n\n\n\nJust as we placed hyperlinks within each list item in the main menu, we\u2019ll do the same in each list item in the drop-down menu. The hyperlinks also inherit the styles found in \u201c.navbar li a\u201d, so our job will be pretty easy. We only want to change the borders, so as to create the same effect found in the main menu. The first style listed below is responsible for the borders, while the second style changes the background color when hovered over. Here\u2019s the code and the corresponding image:<\/p>\n\n\n\n
Code:<\/strong><\/p>\n\n\n\n\n.navbar li ul li a \t{\n\t\tborder-left: 1px solid #1f5065; \n\t\tborder-right: 1px solid #1f5065; \n\t\tborder-top: 1px solid #74a3b7; \n\t\tborder-bottom: 1px solid #1f5065; \n\t\t}\n\t\t\t\t\n.navbar li ul li a:hover {background-color: #366b82;}\n<\/code><\/pre>\n\n\n\nHow to use this menu with your m-Power apps<\/h3>\n\n\n\n
If you\u2019d like to use this menu bar in your own m-Power web apps, it\u2019s very easy to add. In the Admin section, there\u2019s an option to \u201cEdit data dictionary files.\u201d Click that option and add the HTML and CSS portions of this menu to the appropriate files. One thing to note: If you customize the colors of this menu to match your corporate colors, make sure you change the border colors as well. The left border should be slightly lighter than the background color, while the right border should be slightly darker.<\/p>\n\n\n\n
Conclusion<\/h3>\n\n\n\n
That\u2019s it! Feel free to grab the code from the demo and use this menu in your own web apps. It\u2019s a quick way to improve the look and feel of your web apps. It\u2019s simple to build, simple to maintain, and looks pretty good as well. Now, stay tuned, because in the next few weeks, I plan on writing some tutorials that build on this navigation menu. I\u2019ll explore a few ways you can use some news features found in CSS3 to enhance your web apps.<\/p>\n","protected":false},"excerpt":{"rendered":"
Creating a good-looking navigation menu is a great way to improve the overall look and feel of a web application. A well-designed and attractive menu will increase usability and give your application a polished feel. There are a few ways to go about creating a dropdown menu on a web…<\/p>\n","protected":false},"author":2,"comment_status":"closed","ping_status":"open","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[],"ht-kb-tag":[],"class_list":["post-1049","ht_kb","type-ht_kb","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/1049","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1049"}],"version-history":[{"count":14,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/1049\/revisions"}],"predecessor-version":[{"id":12126,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/1049\/revisions\/12126"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1049"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fht-kb-category&post=1049"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fht-kb-tag&post=1049"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}