[英]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: 我有一个列表,将其包装在div中,然后将其浮动:
I need to be able to make the li a expand from right to left like the images below: 我需要像下面的图片一样使li从右向左扩展:
So for the list id do this: 因此,对于列表ID,请执行以下操作:
<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 // CSS
#menu-wrapper {float:right;width:40px;}
How to I get the list to expant on hover right to left like the image? 如何使列表像图像一样从右到左悬停显示?
use max-width
to give animating effect 使用
max-width
来赋予动画效果
* { 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>
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.