Introduction
In this tutorial, we'll learn how to create a stunning navigation menu with interactive tooltips using HTML and CSS. This menu will have attractive icons and tooltips that pop up when you hover over them, giving your website a modern and professional look. Let's begin by setting up our project.
We'll create two important files: index.html to structure our menu and style.css to make it look amazing. Join me as we explore the art of web design and navigation enhancements together!
Html Code Explanation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tooltip Menu Indicator | Html & CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html><!DOCTYPE html> Declares the document type and version of HTML used, ensuring proper rendering by web browsers. <head> Contains metadata and external resource links for the HTML document. <meta name="viewport" content="width=device-width, initial-scale=1.0"> Sets the viewport properties for responsive web design, ensuring proper scaling on various devices. <title></title> Sets the title displayed in the browser tab. <link rel="stylesheet" href="style.css"> Links an external CSS file (style.css) to style the HTML document.
<body> Contains the visible content of the HTML document, including the navigation menu.
<div class="wrapper">
<!-- Unordered list to hold menu items -->
<ul>
<!-- List item 1: Home -->
<li>
<!-- Anchor tag for Home link -->
<a href="">
<!-- Icon for Home using ion-icon -->
<ion-icon name="home-outline"></ion-icon>
</a>
<!-- Tooltip for Home icon -->
<span class="tooltip">Home</span>
</li>
</ul>
</div>
<!-- same for List item 1, item 2, item 3, item 4, item 5 -->Complete code is provided in source code file which is provided below.wrapper class used to design the navigation menu and works as a parent div. <ul> Represents an unordered list to organize the menu items inside it <li> which represents each list item within the navigation menu. <a> anchor tag used to create clickable links here we use it show external icons on our menu. ion-icon Custom element (likely from the Ionicons library that provide free icons that we can use in any part of our project) used to display icons. name attribute specifying the name of the icon to display (e.g., "home-outline", "chatbubbles-outline"). span tag with .tooltip class used to display tooltips like text content inside <span> (e.g., "Home", "Messages", etc.) represents the tooltip text when we hover our wrapper it shows names.
Video Tutorial
CSS Code Explanation
Let's break down each CSS rule and property used in the provided code snippet to style the navigation menu with tooltips
/* Import Google Font 'Poppins' */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
/* Global styling for all elements */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}Importing Google Font 'Poppins' It makes the font available for use throughout the webpage and sets the default font family of all elements to "Poppins" and falls back to a generic sans-serif font if 'Poppins' is not available.
Global Styling * Selector targets all elements on the page to apply consistent styling, padding: 0; margin: 0; resets default padding and margin of all elements to 0, eliminating unwanted spacing, box-sizing: border-box; ensures that padding and border are included in the element's total width and height calculation.
/* Styling for HTML and body */
html, body {
display: grid;
height: 100%;
place-items: center;
background: #222327;
}
/* Styling for the wrapper container */
.wrapper {
position: relative;
height: 80px;
width: 620px;
background-color: #ecf0f1;
border-radius: 17px;
box-shadow: 3px 7px 2px rgba(0,0,0,0.1);
}Sets specific styling for the <html> and <body> elements.
display: grid; utilizes CSS Grid layout to center the content vertically and horizontally within the viewport, height: 100%; sets the height of the <html> and <body> elements to occupy the full height of the viewport. place-items: center; centers the content both horizontally and vertically within the grid. background: #222327; sets the background color of the page to a dark shade.
Styles the container that wraps the navigation menu. position: relative; positions the wrapper container relative to its normal flow in the document, height: 80px; width: 620px; sets the dimensions (height and width) of the wrapper container. background-color: #ecf0f1; sets the background color of the wrapper container to a light shade, border-radius: 17px; adds rounded corners to the wrapper container for a softer appearance. box-shadow: 3px 7px 2px rgba(0,0,0,0.1); applies a subtle box shadow to the wrapper container for depth and dimension.
/* Styling for the unordered list */
.wrapper ul {
display: flex;
justify-content: space-between;
}
/* Styling for list items within the unordered list */
.wrapper ul li {
position: relative;
list-style: none;
line-height: 85px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}Configures the display and layout of the unordered list (<ul>) that contains the navigation menu items. display: flex; uses Flexbox layout for the <ul> element to arrange list items in a row. justify-content: space-between; distributes the space evenly between list items, pushing them to opposite ends of the container.
Styling <li> it defines styling for individual list items within the navigation menu, position: relative; positions list items relative to their normal flow in the document, list-style: none; removes default list styling (bullet points) from list items, line-height: 85px; sets the line height to vertically center text within list items, display: flex; justify-content: center; align-items: center; text-align: center; uses Flexbox to center content (text and icons) both horizontally and vertically within list items.
/* Styling for tooltips */
.tooltip {
position: absolute;
top: -20px;
height: 40px;
width: 100px;
background: #29fd53;
border-radius: 15px;
text-align: center;
line-height: 30px;
font-size: 14px;
color: #000;
font-weight: 500;
pointer-events: none;
margin: 0 10px;
transition: 0.5s;
border: 6px solid #000;
opacity: 0;
}Defines the appearance and behavior of tooltips displayed when hovering over navigation icons. position: absolute; positions tooltips relative to the nearest positioned ancestor, top: -20px; positions tooltips 20 pixels above their normal position to appear above the icons, height: 40px; width: 100px; sets the dimensions (height and width) of the tooltips, background: #29fd53; sets the background color of tooltips to a light green shade, border-radius: 15px; adds rounded corners to tooltips for a smoother appearance, text-align: center; centers text content (tooltip text) horizontally within tooltips, line-height: 30px; font-size: 14px; color: #000; font-weight: 500; specifies text properties (size, color, weight, line height) for tooltip text, pointer-events: none; disables pointer events on tooltips to prevent interaction (hover/click) with underlying elements, margin: 0 10px; adds margin around tooltips to create spacing between tooltips and icons, transition: 0.5s; applies a smooth transition effect with a duration of 0.5s for tooltip visibility, border: 6px solid #000; adds a solid black border around tooltips for emphasis and opacity: 0; sets the initial opacity of tooltips to 0, making them initially invisible.
/* Styling for tooltip arrow - left */
.tooltip::before {
content: "";
position: absolute;
top: 50%;
left: -22px;
width: 20px;
height: 20px;
background: transparent;
border-top-right-radius: 20px;
box-shadow: 0 -10px 0 0 #222327;
}Creates a custom arrow shape on the left side of tooltips. Content: ""; generates a pseudo-element (::before) to style the tooltip arrow, position: absolute; positions the arrow relative to its parent tooltip, top: 50%; left: -22px; positions the arrow vertically centered and to the left of the tooltip, width: 20px; height: 20px; sets the dimensions (width and height) of the arrow., background: transparent; sets the background color of the arrow to transparent, border-top-right-radius: 20px; adds a rounded corner to the top-right of the arrow, box-shadow: 0 -10px 0 0 #222327; applies a shadow effect to create the appearance of an arrow pointing towards the tooltip.
/* Styling for tooltip arrow - right */
.tooltip::after {
content: "";
position: absolute;
top: 50%;
right: -22px;
width: 20px;
height: 20px;
background: transparent;
border-top-left-radius: 20px;
box-shadow: 0 -10px 0 0 #222327;
}Creates a custom arrow shape on the right side of tooltips. Its same like before element you used we just changed border-top-left-radius: 20px; adds a rounded corner to the top-left of the arrow, box-shadow: 0 -10px 0 0 #222327; applies a shadow effect to create the appearance of an arrow pointing towards the tooltip.
/* Hover effect for list items to display tooltips */
.wrapper ul li:hover .tooltip {
opacity: 1;
}
/* Styling for anchor tags within list items */
.wrapper ul li a {
display: block;
color: #000;
font-size: 1.5em;
margin: 0 50px;
}Defines the behavior when hovering over list items (<li>) to display tooltips. Opacity: 1; changes the opacity of tooltips to 1 (fully visible) when hovering over list items, making them appear.
Styles the anchor tags (<a>) within list items to create clickable links. Display: block; converts anchor tags into block-level elements, allowing them to occupy full width within list items, color: #000; sets the text color of anchor tags to black, font-size: 1.5em; sets the font size of anchor tag text to 1.5em, margin: 0 50px; adds horizontal margin to anchor tags for spacing between icons and tooltips.
Conclusion
This navigation menu project showcases the power of combining HTML and CSS to create engaging and visually appealing user interfaces. The use of tooltips adds an interactive element, improving usability and providing contextual information to users. The project's clean code structure and effective use of modern CSS techniques make it suitable for educational purposes and serve as a foundation for building more complex web applications. By further exploring JavaScript and backend integration, developers can extend the project's capabilities and create robust, user-friendly experiences on the web.
Download Source Code: