Navigation List Item Hover and Focus Effect

Introduction

In this lab, we will be exploring CSS programming and creating a custom hover and focus effect for navigation items. The purpose of this lab is to teach you how to use CSS transformations to create visually appealing hover and focus effects on your website. By the end of this lab, you will have a better understanding of how to utilize CSS to enhance the user experience of your website.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/BasicStylingGroup(["`Basic Styling`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/IntermediateStylingGroup(["`Intermediate Styling`"]) css(("`CSS`")) -.-> css/DynamicStylingGroup(["`Dynamic Styling`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/BasicStylingGroup -.-> css/colors("`Colors`") css/BasicStylingGroup -.-> css/text_styling("`Text Styling`") css/CoreLayoutGroup -.-> css/margin_and_padding("`Margin and Padding`") css/CoreLayoutGroup -.-> css/width_and_height("`Width and Height`") css/CoreLayoutGroup -.-> css/display_property("`Display Property`") css/CoreLayoutGroup -.-> css/positioning("`Positioning`") css/IntermediateStylingGroup -.-> css/backgrounds("`Backgrounds`") css/IntermediateStylingGroup -.-> css/lists_and_tables("`Lists and Tables`") css/DynamicStylingGroup -.-> css/transitions("`Transitions`") css/DynamicStylingGroup -.-> css/transformations("`Transformations`") css/IntermediateStylingGroup -.-> css/pseudo_classes("`Pseudo-classes`") css/IntermediateStylingGroup -.-> css/pseudo_elements("`Pseudo-elements`") subgraph Lab Skills css/selectors -.-> lab-35226{{"`Navigation List Item Hover and Focus Effect`"}} css/colors -.-> lab-35226{{"`Navigation List Item Hover and Focus Effect`"}} css/text_styling -.-> lab-35226{{"`Navigation List Item Hover and Focus Effect`"}} css/margin_and_padding -.-> lab-35226{{"`Navigation List Item Hover and Focus Effect`"}} css/width_and_height -.-> lab-35226{{"`Navigation List Item Hover and Focus Effect`"}} css/display_property -.-> lab-35226{{"`Navigation List Item Hover and Focus Effect`"}} css/positioning -.-> lab-35226{{"`Navigation List Item Hover and Focus Effect`"}} css/backgrounds -.-> lab-35226{{"`Navigation List Item Hover and Focus Effect`"}} css/lists_and_tables -.-> lab-35226{{"`Navigation List Item Hover and Focus Effect`"}} css/transitions -.-> lab-35226{{"`Navigation List Item Hover and Focus Effect`"}} css/transformations -.-> lab-35226{{"`Navigation List Item Hover and Focus Effect`"}} css/pseudo_classes -.-> lab-35226{{"`Navigation List Item Hover and Focus Effect`"}} css/pseudo_elements -.-> lab-35226{{"`Navigation List Item Hover and Focus Effect`"}} end

index.html and style.css have already been provided in the VM.

To create a custom hover and focus effect for navigation items, use CSS transformations as follows:

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.

You can use the following HTML code for your navigation menu:

<nav class="hover-nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

And apply the following CSS rules:

.hover-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.hover-nav li {
  float: left;
}

.hover-nav li a {
  position: relative;
  display: block;
  color: #fff;
  text-align: center;
  padding: 8px 12px;
  text-decoration: none;
  z-index: 0;
}

.hover-nav li a::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  background-color: #2683f6;
  z-index: -1;
  transform: scale(0);
  transition: transform 0.5s ease-in-out;
}

.hover-nav li a:hover::before,
.hover-nav li a:focus::before {
  transform: scale(1);
}

Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Summary

Congratulations! You have completed the Navigation List Item Hover and Focus Effect lab. You can practice more labs in LabEx to improve your skills.

Navigation List Item Hover and Focus Effect

Introduction

Skills Graph

Navigation List Item Hover and Focus Effect

Summary

Other CSS Tutorials you may like