|
|
1.CSS Code ul { margin: 0; padding: 0; } li { width: 100px; height: 50px; float: left; color: #191919; text-align: center; overflow: hidden; } a { color: #FFF; text-decoration: none; } p { padding: 0px 5px; } .subtext { padding-top: 15px; } .green { background: #6AA63B url('green-item-bg.jpg') top left no-repeat; } .yellow { background: #FBC700 url('yellow-item-bg.jpg') top left no-repeat; } .red { background: #D52100 url('red-item-bg.jpg') top left no-repeat; } .purple { background: #5122B4 url('purple-item-bg.jpg') top left no-repeat; } .blue { background: #0292C0 url('blue-item-bg.jpg') top left no-repeat; }
2.jQuery Code <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
3.PLUGIN ANIMACIA Code <script src="jquery.easing.1.3.js" type="text/javascript"></script>
4.JavaScript Code <script type="text/javascript"> $(document).ready(function(){ $("a").click(function(){ $(this).blur(); }); $("li").mouseover(function(){ $(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'}) }); $("li").mouseout(function(){ $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'}) }); }); </script>
5.HTML Code <ul> <li class="green"> <p><a href="#">Пункт №1</a></p> <p class="subtext">Бла-бла</p> </li> <li class="yellow"> <p><a href="#">Пункт №2</a></p> <p class="subtext">Бла-бла</p> </li> <li class="red"> <p><a href="#">Пункт №3</a></p> <p class="subtext">Бла-бла</p> </li> <li class="blue"> <p><a href="#">Пункт №4</a></p> <p class="subtext">Бла-бла</p> </li> <li class="purple"> <p><a href="#">Пункт №5</a></p> <p class="subtext">Бла-бла</p> </li> </ul>
|
|
სტატისტიკა
www.wsa.ge
 სულ ონლაინში: 7 სტუმარი: 7 მომხმარებელი: 0
საათი: 12:45 PM თქვენი IP: 216.73.217.172 თარიღი: 2026-06-10 ბრაუზერი: ბრაუზერის ნომერი:
|