HTML-CSS: Navigation list item hover and focus effect

Last update on March 07 2024 13:22:39 (UTC/GMT +8 hours)

HTML-CSS : Exercise-6 with Solution

Using HTML, CSS create a custom hover and focus effect for navigation items, using CSS transformations.

Use the :before pseudo-element at the list item anchor to create a hover effect. Hide it using transform: scale(0).
Use the :hover and :focus pseudo-class selectors to transition the pseudo-element to transform: scale(1) and show its colored background.
Prevent the pseudo-element from covering the anchor element by using z-index.

HTML Code:

<!--License: https://bit.ly/3GjrtVF--<<!-- License information --<
<!DOCTYPE html<<!-- Document type declaration --<
<html<<!-- Opening HTML tag --<
<head<<!-- Head section containing metadata --<
<meta charset="utf-8"<<!-- Character encoding declaration --<
<meta name="viewport" content="width=device-width"<<!-- Viewport meta tag for responsive design --<
<title<Using HTML, CSS create a custom hover and focus effect for navigation items, using CSS transformations</title<<!-- Title of the HTML document --<
</head<<!-- Closing head tag --<
<body<<!-- Body section of the HTML document --<

<div class="w3rcontainer"<<!-- Opening div w3rcontainer with class w3rcontainer --<
<strong<Preview:</strong<<!-- Strong tag for emphasizing the preview label --<
<div class="hover-div"<<!-- Opening div hover-div with class hover-div --<
<ul<<!-- Unordered list tag --<
<li<<a href="#"<Home</a<</li<<!-- List item containing a hyperlink for Home --<
<li<<a href="#"<About</a<</li<<!-- List item containing a hyperlink for About --<
<li<<a href="#"<Contact</a<</li<<!-- List item containing a hyperlink for Contact --<
</ul<<!-- Closing unordered list tag --<
</div<<!-- Closing div hover-div --<
</div<<!-- Closing div w3rcontainer --<

</body<<!-- Closing body tag --<
</html<<!-- Closing HTML tag --<

Explanation:

The HTML document contains a navigation menu with custom hover and focus effects.
The navigation items are structured using an unordered list (<ul<) with list items (<li<) containing hyperlinks (<a<).
Comments are provided to explain each section of the HTML code, including the purpose of each element and attribute.

CSS Code:

<style<
/* Opening style tag for CSS */

.w3rcontainer{
   border: 1px solid #cccfdb; /* Border style declaration */
   border-radius: 2px; /* Border radius declaration for rounded corners */
}

.hover-div ul {
  list-style: none; /* Removing default list styling */
  margin: 0; /* Setting margin to 0 */
  padding: 0; /* Setting padding to 0 */
  overflow: hidden; /* Hiding any overflowing content */
}

.hover-div li {
  float: left; /* Making list items float to align horizontally */
}

.hover-div li a {
  position: relative; /* Setting position to relative for positioning pseudo-element */
  display: block; /* Displaying links as block-level elements for proper styling */
  color: #fff; /* Setting text color to white */
  text-align: center; /* Centering text horizontally */
  padding: 8px 12px; /* Setting padding for the links */
  text-decoration: none; /* Removing underline from links */
  z-index: 0; /* Setting z-index to 0 for stacking context */
}

li a:before {
  position: absolute; /* Setting position to absolute for positioning */
  content: ""; /* Empty content property to generate pseudo-element */
  width: 100%; /* Setting width to cover the entire link */
  height: 100%; /* Setting height to cover the entire link */
  bottom: 0; /* Aligning pseudo-element at the bottom of the link */
  left: 0; /* Aligning pseudo-element at the left of the link */
  background-color: #F68026; /* Setting background color for the pseudo-element */
  z-index: -1; /* Setting negative z-index to position below the link */
  transform: scale(0); /* Initially scaling the pseudo-element to 0 */
  transition: transform 0.5s ease-in-out; /* Adding transition effect for smooth scaling */
}

li a:hover:before, /* CSS rule for pseudo-element before links on hover */
li a:focus:before { /* CSS rule for pseudo-element before links on focus */
  transform: scale(1); /* Scaling the pseudo-element to 1 on hover/focus */
}

</style<<!-- Closing style tag --<

Explanation:

The CSS code provides styling for a navigation menu with custom hover and focus effects.
Comments are added using the CSS commenting format (/* comment */) to explain each CSS rule and declaration.
The .w3rcontainer class styles the container element with a border and border radius.
The .hover-div ul rule styles the unordered list within the .hover-div class by removing default list styling and hiding overflowing content.
The .hover-div li rule styles the list items within the .hover-div class by making them float to align horizontally.
The .hover-div li a rule styles the anchor links within list items by setting their display, color, text alignment, padding, and removing text decoration.
The li a:before rule creates a pseudo-element before anchor links, positioning it absolutely at the bottom-left corner of the link and scaling it to 0.
The li a:hover:before and li a:focus:before rules scale the pseudo-element to 1 on hover and focus, creating a hover and focus effect.

HTML-CSS Editor:

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