A sidebar menu with tooltips in CSS is a user interface element typically located on the side of a webpage. It displays navigation options and provides tooltips (hover-over text) to explain each option when the user interacts with it, enhancing usability and user experience.
Prerequisites
Approach
- We use HTML to create an essential structure for our sidebar menu, which contains an unordered list (<ul>) of menu items inside a fixed-position sidebar.
- Each menu item is represented by a list item (<li>) with an anchor link (<a>) and a title attribute for tooltips.
- We use styles for a fixed sidebar, including its width, background color, and text color.
- we use CSS pseudo-elements (::before) to display tooltips with a fade-in effect on link hover.
- The viewport meta tag helps ensure the design is responsive to different screen sizes.
- On screens 768px or less in width, the sidebar becomes full-width, enabling vertical expansion, and ensuring responsiveness for smaller devices.
Example: In this example, we are using the above-explained approach.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width,initial-scale=1.0">
<style>
.sidebar {
width: 300px;
background-color: #333;
color: #fff;
position: fixed;
top: 0;
left: 0;
height: 100%;
}
.sidebar ul {
list-style: none;
padding: 0;
}
.sidebar li {
padding: 12px;
text-align: center;
}
.sidebar a {
color: #fff;
text-decoration: none;
display: block;
padding: 10px;
position: relative;
}
/* Tooltip styling */
.sidebar a::before {
content: attr(title);
position: absolute;
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 5px 10px;
border-radius: 2px;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s, visibility 0.3s;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
}
.sidebar a:hover::before {
visibility: visible;
opacity: 1;
}
@media (max-width: 768px) {
.sidebar {
width: 100%;
/* Take full width on smaller screens */
height: auto;
/* Allow the content to expand vertically */
}
.sidebar ul {
text-align: center;
}
.sidebar li {
padding: 12px 0;
}
}
</style>
<title>
Sidebar Menu with Tooltips
</title>
</head>
<body>
<div class="sidebar">
<ul>
<li>
<a href="#"
title="Home">
Home
</a>
</li>
<li>
<a href="#"
title="About">
About
</a>
</li>
<li>
<a href="#"
title="Services">
Services
</a>
</li>
<li>
<a href="#"
title="Contact">
Contact
</a>
</li>
</ul>
</div>
</body>
</html>
|
Output: