Display additional information in a sidebar when hovering over it

I stumbled upon a sidebar code that caught my interest:

#sidebar {
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  height: 100%;
  width: 60px;
  background: #fff;
  border-right: 1px solid #ddd;
  text-align: center;
}

#sidebar a {
  text-decoration: none;
  display: block;
  padding: 20px 0 20px 0px;
  color: #000000;
  letter-spacing: 1px;
}

#sidebar a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: black !important;
}

#sidebar a:hover,
#sidebar a.active {
  text-decoration: none;
  background: #4caf50;
  color: black;
}

#sidebar a.active {
  background: #00ff00;
}
<div id="sidebar">
  <center>
  <img width="80%" height="10%" src="https://img.pngio.com/download-for-free-10-png-gold-star-png-icon-top-images-at-carlisle-small-gold-star-icon-png-512_512.png"/>
  </center><br>
  <a href="one.php">1️⃣</a>
  <a href="two.php">2️⃣</a>
  <a href="three.php">3️⃣</a>
</div>

I have a vision to enhance the sidebar with some descriptive text:

<div id="sidebar"><br>
    <center>
    <img width="80%" height="10%" src="https://img.pngio.com/download-for-free-10-png-gold-star-png-icon-top-images-at-carlisle-small-gold-star-icon-png-512_512.png"/>
    </center><br>
    <a href="one.php">1️⃣ Number one</a>
    <a href="two.php">2️⃣< Number two/a>
    <a href="three.php">3️⃣ Number three</a>
</div>
  • My goal is for the text to appear only when hovering over the sidebar. When not hovering, the sidebar will feature only symbols, and upon hovering, it expands to show the accompanying text. How can I achieve this effect?
htmlcss

Answer №1

To make this work, follow these steps:

  1. Enclose the text in an element that can be targeted on hover
  2. Transfer the width from the #sidebar to the actual a element

@keyframes over {
  0% {
    opacity: 0;
    margin-left: -99em;
  }
  50% {
    opacity: 0;
    margin-left: 15px;
  }
  100% {
    opacity: 1;
    margin-left: 15px;
  }
}

#sidebar {
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  height: 100%;
  background: #fff;
  border-right: 1px solid #ddd;
}

#sidebar img {
  width: 40px;
  height: auto;
  display: block;
  margin-left: 3px;
}

#sidebar #nav-items {
  width: 100%;
}

#sidebar #nav-items a {
  color: black;
  display: flex;
  padding: 20px;
  text-decoration: none;
}

#sidebar #nav-items a span {
  display: inline-block;
  margin-left: -999rem;
}

#sidebar #nav-items:hover a span {
  text-decoration: none;
  font-size: inherit;
  animation-name: over;
  animation-duration: .5s;
  animation-fill-mode: forwards;
}

#sidebar #nav-items a:active,
#sidebar #nav-items a:hover {
  text-decoration: none;
  background: #4caf50;
  color: black;
}

#sidebar #nav-items a:active {
  background: #00ff00;
}
<div id="sidebar">
  <img src="https://img.pngio.com/download-for-free-10-png-gold-star-png-icon-top-images-at-carlisle-small-gold-star-icon-png-512_512.png" />
  <div id="nav-items">
    <a href="one.php">1️⃣ <span>Some text here longer and this is here</span></a>
    <a href="two.php">2️⃣ <span>Some text here</span></a>
    <a href="three.php">3️⃣ <span>Some text here</span></a>
  </div>
</div>

Answer №2

solution:

#side-menu {
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  height: 100%;
  width: 60px;
  background: #fff;
  border-right: 1px solid #ddd;
  transition: all .3s ease-in-out;
  overflow: hidden;
}
#side-menu:hover {
  width: 160px;
}
#side-menu a {
  text-decoration: none;
  display: block;
  padding: 20px 20px;
  color: #000000;
  letter-spacing: 1px;
  font-size: 14px;
  font-weight: bold;
  font-family: Arial;
  width: 30px;
  white-space: nowrap;
  transition: all .2s ease-in-out;
}
#side-menu a span {
  opacity: 0;
  transition: all .2s ease-in-out;
}
#side-menu:hover a span {
  opacity: 0.2
}
#side-menu a:hover span {
  opacity: 1;
}
#side-menu a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: black !important;
  width: 150px;
}

#side-menu a:hover,
#side-menu a.active {
  text-decoration: none;
  background: #4caf50;
  color: black;
}

#side-menu a.active {
  background: #00ff00;
}
<div id="side-menu">
    <a href="one.php">1️⃣ <span>Number one</span></a>
    <a href="two.php">2️⃣ <span>Number two</span></a>
    <a href="three.php">3️⃣ <span>Number three</span></a>
</div>

Answer №3

Here's a straightforward solution without using any CSS libraries:

.navbar {
  position:fixed;
  top:0;
  left:0;
  background-color: black;
  display:flex;
  flex-direction:column;
  width: 53.8px;
  white-space: nowrap;
  overflow: hidden;
  height:100%;
  transition: 0.3s;
}

.navbar a {
  padding: 14px;
  color: white;
  text-decoration: none;
  font-size: 25px;
}

.navbar a:hover {
  background-color: #555;
}

.navbar:hover {
  width: 175px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div style="margin-left:55px;">
  <h2>Hover over the navbar to see the expanding effect</h2>
</div>

<div class="navbar">
  <a class="active" href="#"><i class="fa fa-fw fa-home"></i> Home</a> 
  <a href="#"><i class="fa fa-fw fa-search"></i> about</a> 
  <a href="#"><i class="fa fa-fw fa-envelope"></i> Contact</a> 
  <a href="#"><i class="fa fa-fw fa-user"></i> Login</a>
</div>

JavaScript functionality will be added for further customization.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve a dynamic HTML object ID using jQuery within Angular

In my Angular application, I have implemented three accordions on a single page. Each accordion loads a component view containing a dynamically generated table. As a result, there are three tables displayed on the page - one for each accordion section. Abo ...

javascriptjqueryhtmlangularjs

A guide on using jQuery to iterate through 3 separate div elements

Seeking assistance with creating a dynamic loop for multiple divs (3 or more) using jQuery. The desired outcome is to have the main image div on the homepage rotate with other divs, changing both the background image and links within each div. I initially ...

javascriptjqueryhtmlcss

Issue with PHP redirection not functioning as expected upon submission

Thank you for taking the time to offer assistance. I am encountering an issue with a basic HTML contact form that utilizes a PHP file for processing. The form's method is set to post and it directs its action to a PHP file. Upon completion of the PHP ...

phphtmlformshttp-redirect

Best Practices for Integrating PHP Code into an HTML File for Contact Form Placement

My current setup involves an html file named index.html, which contains the code for my contact form fields such as name and email. Is there a way to include PHP code in this file without converting it to index.php? ...

phphtml

What is the procedure for eliminating an event listener that does not directly invoke a function?

I have implemented an event listener in my JS file following a successful AJAX request: var pageButtonsParentElement = document.getElementById("page-buttons"); pageButtonsParentElement.addEventListener('click', event => { ...

javascripthtmljqueryajax

The pointer cursor seems to be missing in action

Currently using ReactJS, I have implemented a custom upload image button on my webpage. .upload-btn-wrapper { position: relative; overflow: hidden; display: inline-block; cursor: pointer; } .upload-btn-wrapper input[type=file] { font-size: 10 ...

htmlcssreactjs

How to Override Global CSS in a Freshly Created Angular Component

My CSS skills are a bit rusty and I need some assistance with a project I'm working on. The project includes multiple global CSS files that have properties defined for different tags, such as .btn. However, these global CSS files are causing conflicts ...

htmlcssangulartypescript

Javascript is not functioning properly when making an ajax call

Having a bit of trouble with JavaScript not working after an Ajax call. Everything functions normally until new data is fetched from the database or an Ajax call is made. The issue seems to be that the JavaScript doesn't load properly. Any help would ...

phpjavascriptjqueryhtmlajax

What is the process for verifying which classes have been assigned to a specific component?

I am working with a Vue component and I would like to determine, from within the component itself, which classes have been applied to it. Is there a way to accomplish this? Currently, I am using a workaround where I pass the class as a prop: <my-comp ...

cssvue.jsvue-component

Dropping anchor whilst skipping or jumping

One of my website elements is a drop anchor that connects from a downwards arrow situated at the bottom of a full-page parallax image to another section on the same page. The HTML code snippet for the drop anchor is as follows: <section id="first" cla ...

javascriptjqueryhtmlcsswordpress

Which HTML tag should I choose to apply color to text in Twitter Bootstrap?

I'm looking to enhance the appearance of a specific word in my text. For example: This is my text, <span class="red">this</span> should be red. Would using the span tag be the appropriate method for achieving this effect? Or are there ot ...

htmlcsstwitter-bootstrap

HTML - PHP, navigating the history of the page with the browser's back button in real-time

My current project involves the development of a website using HTML and PHP. On one of my HTML pages, I have a form with certain fields marked as "REQUIRED". To ensure that all required fields are filled before submission, I have implemented a feature wher ...

htmlbuttonbackbrowser-history

Styling: How can I create indentation for a specific text area while leaving another unaffected?

I am attempting to format this complete form with an indentation: <%= form_for([micropost, micropost.comments.build], :html => { :id => "blah_form" }) do |f| %> <div class="field"> <p2>Who are you?</p2> ...

cssruby-on-rails-3

Utilizing HTML templates efficiently without the need for a view engine

For a new application, we are implementing multiple servers for handling different functions - one server for delivering HTML files, another as a proxy to handle HTTPS requests, and a Java backend with a database. The view server should be simple, with an ...

javascriptjqueryhtmltiles

Creating CSS wrappers around div elements of varying sizes

I am looking for a way to "wrap" different divs of varying sizes, similar to how Microsoft Word wraps text around an image. I have a simplified structure outlined below: <div id = "div1"></div> <div id = "div2"></div> <div id = ...

csshtmlcss-float

What steps do I need to take to create a basic API that links to a MySQL database?

I'm currently trying to develop an API for PHP that will enable one web server to communicate with another web server. Additionally, I want this API to be able to update MySQL code. Previously, I was utilizing $_GET parameters for this purpose but rea ...

phpmysqlhtml

Update the radio button to display the value entered in the text input field

I'm trying to implement a feature where the value of a text box can be set as the value of the selected radio button. Below is the code I have: HTML <form action="add.php" id="registration" method="post" name='registration' onsubmit="re ...

javascripthtmlradio-button

Can a search engine algorithm be developed to display an iframe based on the keywords entered in the search query?

Is it possible to create a search engine algorithm in HTML, CSS, and JavaScript that takes keywords from a search bar input and displays the best solution (or solutions) through iframes? html, css, javascript Below is the code for the iframes and search ...

javascripthtmlcssalgorithmiframe

Steps for implementing an <h1> element with the React Material UI theme

I have chosen the 'dark' theme and would like to apply it to an h1 element. How can I achieve this? The method below does not yield the desired result: <MuiThemeProvider theme={theme}> <h1>Page Title</h1> ... The following ...

htmlcssreactjsmaterial-ui

The dimensions of the bottom border on left floating divs are inconsistent

One of my designers frequently uses a particular technique in various designs, and I'm struggling to determine the most effective way to style it with CSS so that it fluidly adapts (as it will be incorporated into a CMS). Essentially, when implementi ...

htmlcsscss-float