List of icons that expand from left to right on hover using CSS and JQuery

Looking for some help here!

I have a list that I want to style and make it expand from right to left like in the images provided below:

https://i.sstatic.net/H4LGb.png

This is how my list currently looks:

<div id="menu-wrapper">
    <ul>
        <li><a href=""><img src="btn1.gif" alt="" /></a></li>
        <li><a href=""><img src="btn2.gif" alt="" /></a></li>
    </ul>
</div>

//CSS 

#menu-wrapper {float:right;width:40px;}

Any ideas on how I can achieve the hover effect of expanding the list items from right to left?

jquerycss

Answer №1

Utilize the max-width property for creating a smooth animation effect

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: url('https://www.example.com/image.jpg');
  background-size: cover;
}
#menu-wrapper {
  text-align: right;
}
.nav {
  list-style: none;
  display: inline-block;
  margin: 0 auto;
}
.cell {
  float: right;
  clear: both;
  background: lightgrey;
  margin: 5px 0;
  padding: 10px 15px;
}
.cell span {
  float: left;
  max-width: 0px;
  overflow: hidden;
  transition: 1s linear;
}
.cell:hover span {
  max-width: 100px;
}
<div id="menu-wrapper">
  <ul class="nav">
    <li class="cell">
      <img src="https://www.example.com/icon1.png" /><span>expanded</span>
    </li>
    <li class="cell">
      <img src="https://www.example.com/icon2.png" /><span>expanded</span>
    </li>
    <li class="cell">
      <img src="https://www.example.com/icon3.png" /><span>expanded</span>
    </li>
  </ul>
</div>

Answer №2

To achieve smooth transitions, utilizing CSS transitions is recommended. Check out this demonstration on how to implement transitions: Example


  <div class="button"></div>
  <div class="list"></div>

<style type="text/css">
.button {position:relative; width: 40px; height: 40px; float: right; background-color: red; transition: margin-right 1s; z-index: 1000;}
.list {position:relative; width: 100px; height: 40px; float: right; margin-right: -100px; background-color: yellow; transition: margin-right 1s; z-index: 100;}

.button:hover + .list {margin-right: 0px;}
</style>

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

Utilizing a jQuery autocomplete feature to access an object

In the JSON data I am using, there are two main sections for GOD and LEG, each containing information about different ships. I want to extract all the ship names from both GOD and LEG categories and utilize them in a JQuery autocomplete feature. { "GOD" ...

jqueryjsonautocomplete

Can you provide instructions on how to vertically adjust a bootstrap div?

Here is the code snippet: <div class="container"> <div class="row"> <div class="container1 col-lg-4 col-md-4 col-sm"> <h1 class="status">Status:</h1> </div> & ...

cssbootstrap-4

When the size of a webpage changes, leveraging the vmin/vmax attribute in CSS

Just started using the brand new vmin css property for adjusting font size - and it's working like a charm! div.sample { font-size: 1.5vmin; text-align: center; ... } However, a bit of a snag appears when resizing the page. When the page is made sma ...

htmlcssresizeviewport-units

Is there a way to convert a URL into a user-friendly json format displayed on a web page

Can someone please help me figure out the proper way to convert this URL into a JSON format that is easily readable using jQuery on an HTML page? ...

javascriptjqueryhtmljsonparsing

Jquery refuses to load

Hey everyone! I'm currently working on an HTML file for my Angular 2 course. After setting up the dependencies and downloading them with npm, I encountered an error when trying to run the app... The error message I received was: file:///Users/Rocky/A ...

javascriptjqueryangularjsnode.js

Animating a child element while still keeping it within its parent's bounds

I have researched extensively for a solution and it seems that using position: relative; should resolve my issue. However, this method does not seem to work in my specific case. I am utilizing JQuery and AnimeJS. My goal is to achieve the Google ripple eff ...

javascriptjqueryhtmlcssanime.js

Issue with Bootstrap 'align-content-around' not functioning as expected

The align-content: space-around property does not seem to be working in this scenario. What is the solution? How can columns 3 and 4 be aligned to the bottom? .row { background: #f8f9fa; } .col { border: solid 1px red; padding: 10px; height: 20 ...

htmlcssflexboxbootstrap-4

Is it feasible to cancel or clear the queue for a jQuery fadeOut function after a delay is specified? If so,

Can anyone help me out with this question? Is there a way to eliminate the delay in chaining? Mn.Base.TopBox.show = function(timedur){ $('#element').fadeIn().delay(timedur).fadeOut(); } Mn.Base.TopBox.cancelFadeout = function(){ } I&apos ...

javascriptjquerydelay

Learn the process of updating a button attribute using a database value through AJAX

My goal was to dynamically change the status of a button from enabled to disabled depending on the data retrieved from a table in the database. Below you will find the code snippets for the ajax request, the controller function, and the database table sch ...

phpjqueryajaxframeworks

Verifying the content of the JSON data

If I receive JSON data that looks like this: {"d":1} Is it possible to determine whether the value after "d": is a 1 or a 0? I attempted the following method, but it always goes to the else block, even though I know the JSON data contains a 1. success: ...

javascriptjsonjquery

Different methods to retrieve content within a div that is located on a separate, included page

It's a bit tricky to come up with a title for this topic, but essentially, I'm trying to figure out how to get content from an included page into a specific div using HTML and PHP. Let me break it down: In the header.php file, we have the follo ...

javascriptphpjqueryhtml

A React component utilizing dangerouslySetInnerHTML and including CSS styles

One of my React components displays the following element: <div dangerouslySetInnerHTML={{__html: this.props.htmlString}}/> While the html renders correctly, I am facing a challenge with my client-side CSS code affecting the component I am renderin ...

javascripthtmlcssreactjs

Using jQuery to target all rows and select the input within a td

I am attempting to calculate the values within a table by capturing changes in the input fields. Below is an example of the HTML table being addressed and the jQuery code I am using to extract values from all input fields by iterating through the rows usin ...

javascriptjqueryhtml

Center text within a div container

I am facing an issue with a nested div element: <div id="footer"> <div id="footer_text"> <p>My foooo text</p> </div> </div> The CSS code for the nested div is as ...

htmlcss

Modifying icons with JavaScript

When I click on the play icon, it changes to the pause icon. However, I am only able to change the first icon from play to pause in my JavaScript code. How can I apply this functionality to all the audio elements on the page? let playIcon = "https://ima ...

javascripthtmlcss

Issue with alignment of divs causing them to stack in a strange manner instead of floating left and

Check it out in action right here: All I want is for the .news div boxes to gracefully float left and right using the handy cycle helper in Rails. However, the current output isn't quite what I had in mind: This is how I envision the layout should l ...

csshtml

Achieving proper stacking of a table with other div elements

I've come across some similar inquiries, but none seem to fully address the specific issue at hand. If there's an existing thread on this that I overlooked, I apologize in advance. So, here's a multi-part problem: my solution for the first ...

htmlcsshtml-tableflexbox

What is the reason that this button is unresponsive?

Seeking assistance with an issue that's not working... Each row in the pagination contains a button that redirects to the preview.php page for more information on the items with an ID number. Now, I want to make a change and fill a div with slideup ...

jquerybuttonloadslidedownslideup

Creating an arrow dialog box in Material UI: A step-by-step guide

I have successfully created an arrow box (div) using custom CSS and HTML. However, I am facing difficulty in implementing the same design in Material UI with React JS. The code below demonstrates how to achieve this using custom CSS. My question is: How ...

htmlcssreactjsmaterial-ui

Display a specific tab section upon clicking using jQuery or JavaScript

Hello everyone! I am completely new to JavaScript. I have added a tab slider to my HTML with 3 categories in the tab menu: All, Creative, and Branding. How can I show a div after clicking on one of the list items? I have assigned classes to the list items ...

javascriptjquerycsshtml