I'm encountering issues with expanding list elements using jQuery. The lists consist of social media icon links that I would like to enlarge upon mouseover. The problem arises when enlarging the width of the li element, causing the ul to also expand. This results in the floated images within the li appearing away from the right edge of the screen. To address this, I have resorted to floating the image so that the text and image align properly. Each a element has a fixed width of 30px, which is then expanded to 200px using jQuery.
This visual aid might provide better clarity.
https://i.sstatic.net/xTHMp.jpg
Is there a solution to expand the list elements individually while keeping the images aligned with the right edge of the screen?
Here is my code:
HTML
<ul id="social">
<li> <a href="#"><img src="images/iconFacebook.jpg" />Like me on Facebook</a></li>
<li><a href="#"><img src="images/iconTwitter.jpg" />Follow me on Twitter</a></li>
<li><a href="#"><img src="images/iconGoogle.jpg" />Add me to Google+</a></li>
<li><a href="#"><img src="images/iconBlog.jpg" />Check out my blog</a></li>
</ul>
CSS
ul#social {
display: block;
list-style: none;
position: absolute;
right: 0px;
top: 283px;
z-index: 1600;
}
ul#social li {
margin-top: 10px;
}
ul#social li img {
float: left;
}
ul#social li a {
display: block;
height: 30px;
width: 30px;
line-height: 30px;
vertical-align: middle;
text-decoration: none;
display: block;
color: #FFFFFF;
background: #f47920;
}
jQuery
$(document).ready(function(){
$('ul#social li a').mouseover(function() {
$(this).stop().animate({
width: '200px'
}, 300);
});
$('ul#social li a').mouseout(function() {
$(this).stop().animate({
width: '30px'
}, 300);
});
});
Your assistance is greatly appreciated. Thank you.