CODEWITHSUNDEEP
jquerycss
Satch3000
Satch3000

Reputation: 49422

CSS / JQuery List of icons on hover expand left to right

I have a list which I wrap in a div and float it right:

I need to be able to make the li a expand from right to left like the images below:

enter image description here

So for the list id do this:

<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;}

How to I get the list to expant on hover right to left like the image?

Upvotes: 0

Views: 1604

Answers (2)

Vitorino fernandes
Vitorino fernandes

Reputation: 15971

use max-width to give animating effect

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: url('http://placeimg.com/640/480/nature');
  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://cdn3.iconfinder.com/data/icons/streamline-icon-set-free-pack/48/Streamline-18-32.png" /><span>expanded</span>
    </li>
    <li class="cell">
      <img src="https://cdn3.iconfinder.com/data/icons/streamline-icon-set-free-pack/48/Streamline-18-32.png" /><span>expanded</span>
    </li>
    <li class="cell">
      <img src="https://cdn3.iconfinder.com/data/icons/streamline-icon-set-free-pack/48/Streamline-18-32.png" /><span>expanded</span>
    </li>
  </ul>
</div>

Upvotes: 2

AlexARH
AlexARH

Reputation: 212

You should use transitions, here is a fiddle: Fiddle

  <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>

Upvotes: 0

Related Questions