Chapter: Internet & World Wide Web HOW TO PROGRAM - The Ajax Client - Cascading Style Sheets (CSS)

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail

Building a CSS Drop-Down Menu

Drop-down menus are a good way to provide navigation links on a website without using a lot of screen space.

Building a CSS Drop-Down Menu

 

Drop-down menus are a good way to provide navigation links on a website without using a lot of screen space. In this section, we take a second look at the :hover pseudoclass and introduce the display property to create a drop-down menu using CSS and XHTML.

 

We’ve already seen the :hover pseudoclass used to change a link’s style when the mouse hovers over it. We will use this feature in a more advanced way to cause a menu to appear when the mouse hovers over a menu button. The other important property we need is the display property. This allows a programmer to decide whether an element is rendered on the page or not. Possible values include block, inline and none. The block and inline values display the element as a block element or an inline element, while none stops the element from being rendered. The code for the drop-down menu is shown in Fig. 5.14.

      <?xml version = "1.0" encoding = "utf-8"?>

 

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 

      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

      <!-- Fig. 5.14: dropdown.html -->

 

      <!-- CSS drop-down menu. -->

 

      <html xmlns = "http://www.w3.org/1999/xhtml">

 

      <head>

 

      <title>

 

        Drop-Down Menu

 

        </title>

 

<style type = "text/css">

body { font-family: arial, sans-serif }

div.menu   { font-weight: bold;

           color: white;

           border: 2px solid #225599;

           text-align: center;

           width: 10em;

           background-color: #225599 }

     div.menu:hover a     { display: block }  

     div.menu a { display: none;    

           border-top: 2px solid #225599;

           background-color: white;

           width: 10em;

           text-decoration: none;

           color: black }

        div.menu a:hover  { background-color: #dfeeff }

 

        </style>

 

        </head>

 

        <body>

 

        <div class = "menu">Menu

 

        <a href = "#">Home</a>

 

<a href = "#">News</a>

      <a href = "#">Articles</a>

 

      <a href = "#">Blog</a>

 

      <a href = "#">Contact</a>

 

      </div>

 

      </body>

 

</html>


Fig. 5.14 |  CSS drop-down menu.

First let’s look at the XHTML code. In lines 31–37, a div of class menu has the text “Menu” and five links inside it. This is our drop-down menu. The behavior we want is as follows: the text that says “Menu” should be the only thing visible on the page, unless the mouse is over the menu div. When the mouse cursor hovers over the menu div, we want the links to appear below the menu for the user to choose from.

 

To see how we get this functionality, let’s look at the CSS code. There are two lines that give us the drop-down functionality. Line 21 selects all the links inside the menu div and sets their display value to none. This instructs the browser not to render the links. The other important style is in line 20. The selectors in this line are similar to those in line 21, except that this line selects only the a (anchor) elements that are children of a menu div that has the mouse over it. The display: block in this line means that when the mouse is over the menu div, the links inside it will be displayed as block-level elements.

The selectors in line 27 are also similar to lines 20 and 21. This time, however, the style is applied only to any a element that is a child of the menu div when that child has the mouse cursor over it. This style changes the background-color of the currently high-lighted menu option. The rest of the CSS simply adds aesthetic style to the components of our menu. Look at the screen captures or run the code example to see the menu in action.

 

This drop-down menu is just one example of more advanced CSS formatting. Many additional resources are available online for CSS navigation menus and lists. Specifically, check out List-o-Matic, an automatic CSS list generator located at www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/ and Dynamic Drive’s library of vertical and horizontal CSS menus at www.dynamicdrive.com/style/.

 

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail


Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.