Плъзгащ тескт върху бутон.

[MrBlack]

Добър вечер на всички...вече от 30-тина минутки се ровя из нета и намирам все подобни работи,но не и това,което търся..

Та търся урок или примерен код или нещо :idea: за следния ефект (ще го обясня накратко):

Представете си едно меню с бутончета,като минеш върху един от бутончетата,текста върху бутона да се измества в дясно на определено разстояние.

Ще съм много благодарен,ако някой ме насочи,че въобще не знам,какво търся.

Благодаря предварително...


:?

 

[kriss]

Това, което търсиш (доколкото разбрах) е text-indent, ето пример:

<style>
ul {list-style-type:none;padding:none;margin:none;width:200px;}
ul li a {display:block;padding:3px 10px;background:#f5f5f5;border:1px solid #bbb;color:#555;text-decoration:none;font:14px Arial;}
ul li a:hover {background:#f0f0f0;color:#222;text-indent:5px;}
</style>
<ul>
<li><a href="#">Test</a></li>
<li><a href="#">Index</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Testg</a></li>
<li><a href="#">Testasd</a></li>
<li><a href="#">Testasdasf</a></li>
</ul>

 

[MrBlack]

Ами до някъде е това,но текста хубаво се мърда,но не може ли да се плъзга,в смисъл от едното място до другото ам да си върви(майко колко глупаво звучи)...Тоесто текста да се придвижва като анимацийка :?,такова подобно съм гледал и това имах предвид?

 

[kriss]

Тогава ти трябва и jQuery библиотеката.
Ето ти код, като може да си настроиш там където е "5px" с колко px навътре, като промениш и -5px, 100 ти е колко бързо да се движи. В момента е 0.1 секунда. 1000 = 1 секунда. Поиграй си.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
$("ul li a").hover(function(){
$(this).animate({"text-indent":"5px"},100);
},function(){
$(this).animate({"text-indent":"-5px"},100);
});
});
</script>
<style>
ul {list-style-type:none;padding:none;margin:none;width:200px;}
ul li a {display:block;padding:3px 10px;background:#f5f5f5;border:1px solid #bbb;color:#555;text-decoration:none;font:14px Arial;}
ul li a:hover {background:#f0f0f0;color:#222;}
</style>
<ul>
<li><a href="#">Test</a></li>
<li><a href="#">Index</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Testg</a></li>
<li><a href="#">Testasd</a></li>
<li><a href="#">Testasdasf</a></li>
</ul>

 

[MrBlack]

Много благодаря за усилията,които си положил,за да ми помогнеш

+1 Супер си ще си го настроя,както ми трябва !