Teaching Tip: Using Cascading Style Sheets to Design a Fly-Out Menu with Microsoft Visual Studio

1. INTRODUCTION Increasingly, people go online for communication, interaction, searching, and buying products or services. Recent statistics indicate the number of Internet users worldwide reached over 1.80 billion as of December 31, 2009 (Internet Usage Statistics, 2010). This represents a global penetration rate of 26.6% which means over one fourth of the total world population is composed of Internet and Web users. One of the critical challenges facing businesses today is to develop a website that is "usable", as usability has been shown to correlate with site usage. Two key components of usability are "Ease of Use" and "Emotion" ("affective reactions invoked by a Web site"), and thus companies continually seek more effective ways to make professional and appealing sites which are easy to navigate (Downing and Liu, 2010). Innovative menus are receiving much attention in this area. A menu is a key part of any dynamic website that features more than one page. It allows users to navigate a website quickly and easily and allows them to get where they want to go. The menu tends to be the fundamental interaction component and contributes to the important aspect of "stickiness", or usage for a website design (Nielsen, 2000). A good menu design makes a huge difference in terms of whether or not users could effectively navigate and achieve a visually appealing effect of consistent look and feel when they come to visit a website (Baxley, 2003). Since the menu has become an integrated component within almost all professionally designed websites, and innovative menus mesh strongly with both the "Ease of Use" and "Emotion" aspects of site usability, the ability to create professional and innovative web menus is a highly prized skill for both students and seasoned developers. This teaching tip describes a no-code way to design either a vertical or horizontal fly-out menu as one visually appealing example in the classroom. It allows students with little or no programming experience the ability to create a functional and appealing web menu. This is the motivation for the teaching tip which follows. 2. THE HANDS-ON ENVIRONMENT The lesson described in this paper was based on a semester-long undergraduate level Web design course taught in the spring of 2009 at a large, Midwestern university. All students enrolled in this course were MIS majors. The lead author of this paper was the course instructor. One of the learning objectives in this course was requiring students to explore Cascading Style Sheets (CSS) to control the appearance of Web pages. CSS is a collection of rules of how a Web page should be formatted (Duckett, 2008). It is widely understood by all major browsers and overcomes the problem of mixed data and presentation in a Web page by allowing all formatting information, i.e., the rules, to be stored in a separate external CSS file. This helps create an easily accessible and maintainable website since the page content and the formatting rules are separated (Accessibility Features of CSS, 1999). The problem of using HTML markup tags for formatting and presentation is that markup tags are embedded into the content which means that visual significance of the content could only be processed the way determined by the designer. Moreover, using HTML markup tags to specify formatting details is not a good long-term solution because documents become big, cumbersome, and impossible to maintain. CSS, on the other hand, was designed to allow precise control--outside of markup--of character spacing, text alignment, object position on the page, audio and speech output, font characteristics, etc. By separating style from markup, a web designer can simplify and make web contents more accessible at the same time. In fact, accessibility is an important part of website usability since a website is not usable unless it's accessible (Krug, 2006). Students learned at the end of this course to use different rules of CSS to control the appearance of every element in their websites so that their Web design looked more accessible, appealing and interesting. …