HTML-CSS: Popout menu

Last update on March 08 2024 13:34:55 (UTC/GMT +8 hours)

HTML-CSS : Exercise-23 with Solution

Using HTML, CSS reveals an interactive popout menu on hover/focus.

Use left: 100% to move the popout menu to the right of the parent.
Use visibility: hidden to hide the popout menu initially, allowing for transitions to be applied (unlike display: none).
Use the :hover, :focus and :focus-within pseudo-class selectors to apply visibility: visible to the popout menu, displaying it when the parent element is hovered/focused.

HTML Code:

<!--License: https://bit.ly/3GjrtVF--><!-- Comment: Indicates the license information for the code -->
<!DOCTYPE html><!-- Comment: Declares the document type and version of HTML -->
<html><!-- Comment: Indicates the start of the HTML document -->
<head><!-- Comment: Contains meta-information about the HTML document -->
<meta charset="utf-8"><!-- Comment: Declares the character encoding for the document -->
<meta name="viewport" content="width=device-width"><!-- Comment: Sets the viewport width to the width of the device -->
<title>Using HTML, CSS reveals an interactive popout menu on hover/focus</title><!-- Comment: Sets the title of the document -->
</head><!-- Comment: End of the head section -->
<body><!-- Comment: Contains the content of the HTML document -->
<div class="reference" tabindex="0"><!-- Comment: Defines a container for the reference element -->
<div class="popout-menu">w3resource Popout menu</div><!-- Comment: Defines the popout menu element -->
</div><!-- Comment: End of the reference container -->
</body><!-- Comment: End of the body section -->
</html><!-- Comment: End of the HTML document -->

Explanation:

This HTML code creates a simple webpage with a container div for a reference element and a popout menu.
The comment indicates the license information for the code.
<!DOCTYPE html> declares the document type and version of HTML, which is HTML5.
<html> marks the start of the HTML document.
<head> contains meta-information about the HTML document, such as character encoding and viewport settings.
The <title> element sets the title of the webpage.
<body> contains the content of the HTML document.
Within the reference container, there's a div with the class "popout-menu" representing the popout menu.

CSS Code:

<style> /* Comment: Begins the CSS styling for the HTML document */
.reference { /* Comment: Styles the reference container */
  position: relative; /* Comment: Positions the reference container relative to its normal position */
  background: #CC56FF; /* Comment: Sets the background color of the reference container */
  width: 100px; /* Comment: Sets the width of the reference container */
  height: 80px; /* Comment: Sets the height of the reference container */
}

.popout-menu { /* Comment: Styles the popout menu */
  position: absolute; /* Comment: Positions the popout menu relative to its nearest positioned ancestor */
  visibility: hidden; /* Comment: Hides the popout menu by default */
  left: 100%; /* Comment: Positions the popout menu to the right of its parent container */
  background: #FF89CC; /* Comment: Sets the background color of the popout menu */
  color: white; /* Comment: Sets the text color of the popout menu */
  padding: 16px; /* Comment: Adds padding inside the popout menu */
}

.reference:hover > .popout-menu, /* Comment: Displays the popout menu when the reference container is hovered */
.reference:focus > .popout-menu, /* Comment: Displays the popout menu when the reference container is focused */
.reference:focus-within > .popout-menu { /* Comment: Displays the popout menu when the reference container or any of its descendants is focused */
  visibility: visible; /* Comment: Makes the popout menu visible */
}
</style> /* Comment: End of the CSS styling */

Explanation:

.reference styles the reference container, positioning it relative to its normal position and setting its background color, width, and height.
.popout-menu styles the popout menu, positioning it absolutely relative to its nearest positioned ancestor, hiding it by default, setting its background color, text color, and padding.
The .reference:hover > .popout-menu, .reference:focus > .popout-menu, and .reference:focus-within > .popout-menu selectors control the visibility of the popout menu when the reference container is hovered, focused, or focused within, respectively.

HTML-CSS Editor:

See the Pen html-css-practical-exercises by w3resource (@w3resource) on CodePen.