Hide with Display
The display property can also be used to ‘hide’ elements. At first, it may seem difficult to understand why it would be useful to hide an element, but this is done often in order to create “drop-down menus” or “hidden tips” type content.
To hide an element, set the display properties value to none. To get it to appear, you create a selector made up of the parent container and element in question, with the :hover pseudo-class added to the parent.
CSS
.child-class-to-unhide {
display: none;
}
.parent-container:hover .child-class-to-unhide {
display: block;
}
In the following example, this exact technique is used to create an “additional information” type box.
This is some hidden information,
that serves to further enlighten your end-user.
This same technique can be used for to create dropdown menus.
The following code is one solution to creating a horizontal menu with a dropdown. Notice in line 33, that the content is hidden. Lines 47-49, cause the menu to be displayed, and lines 32-62 are used to present and style the dropdown menu.
Please study the following code to understand it better. You should also download the code and play with it via the links under the example.
Page Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nisi quam, iaculis porta faucibus a, pharetra at purus. Nam sed elit erat. In in consectetur ipsum. Vestibulum vestibulum convallis purus, vestibulum egestas lectus consequat nec. Nullam malesuada, lorem nec blandit accumsan, lectus ante eleifend est, eu dictum nisl diam nec quam. Nunc hendrerit varius sagittis. Cras faucibus semper sapien, tincidunt consequat dolor condimentum sit amet. Donec rhoncus, risus gravida suscipit finibus, nisi ipsum luctus lacus, in mattis arcu sem nec tortor. Phasellus et rhoncus turpis. Donec nec nunc vehicula nisl luctus ultricies a et metus. Nam id nisl feugiat, porta lacus in, euismod diam.
{ TODO: }
- Study W3School’s fantastic examples of CSS Navigation Bars.
- Read pages 318-329 of Chapter 13 in Duckett.