I've run into an irritating issue. My left menu text keeps shifting when I expand the border using jQuery. I've tried various solutions to prevent the text from moving, but nothing seems to work. Any suggestions?
Could it be a CSS problem with the left menu?
.main .left {
width: 220px;
margin-right: 20px;
float: left;
}
.main .box {
margin-top: 10px;
}
.main .box .bname {
font-size: 15px;
background: url(../images/sepa.png) no-repeat left center;
padding: 5px 0 5px 15px;
}
.main .box ul {
margin: 10px 0 0 0;
padding: 0;
list-style: none;
}
.main .box ul li {
padding-left: 10px;
margin-bottom: 1px;
}
.main .box ul li a {
display: block;
padding: 3px;
}
.main .box ul li a:hover{}
Here's my jQuery code for the animated border:
jQuery(document).ready(function($) {
$(".box ul li").hover(function() {
$(this).animate({borderWidth: 20}, "fast");
}, function() {
$(this).animate({borderWidth: 2}, "fast");
});
});
The issue arises when the border expands ( borderWidth: 20 ), causing the text to shift to the right. I'm looking to keep the text in place. Here's a snippet of my HTML:
<div class="box">
<div class="nadpis">Dokumenty</div>
<ul>
{foreach $MENU['USER1'] as $row}
<li>
<a href="{!$row->odkaz}" {widget rsLista 'MENU',$row->idecko,$MENU_WEB['USER1'],$MENU_SLOZKA['USER1'],$row->nazev}>{$row->nazev}</a>
</li>
{/foreach}
</ul>
</div>