Суббота, 11.02.2012, 20:42
♣Ястреб♣
Страна: Российская Федерация
Ето в CSS: Code
.blockmenu {height:20px;width: 160px;font: normal 11px Arial, Helvetica, sans-serif;text-align: left;} .blockmenu a:link,.blockmenu a:visited {height:20px;width: 180px;color:#DCDCDC;text-decoration:none;padding:3px 0px 0px 7px;line-height:18px;display:block;font-weight:normal;background: url(http://up-rise.ru/Design/1/img/24.png)no-repeat;text-align: left;} .blockmenu a:hover {height:20px;width: 180px;color:#ffffff;text-decoration:none;padding:3px 0px 0px 7px;line-height:18px;display:block;font-weight:normal;background:url('http://up-rise.ru/Design/1/img/25.png')no-repeat;text-align: left;}
js код: Кидаем в Блокнот и сохроняем как sliding_effect.js и залеваем в файловый менеджер Code
$(document).ready(function() { slide("#sliding-navigation", 25, 15, 150, .8); }); function slide(navigation_id, pad_out, pad_in, time, multiplier) { // creates the target paths var list_elements = navigation_id + " li.sliding-element"; var link_elements = list_elements + " a"; // initiates the timer used for the sliding animation var timer = 0; // creates the slide animation for all list elements $(list_elements).each(function(i) { // margin left = - ([width of element] + [total vertical padding of element]) $(this).css("margin-left","-180px"); // updates timer timer = (timer*multiplier + time); $(this).animate({ marginLeft: "0" }, timer); $(this).animate({ marginLeft: "15px" }, timer); $(this).animate({ marginLeft: "0" }, timer); }); // creates the hover-slide effect for all link elements $(link_elements).each(function(i) { $(this).hover( function() { $(this).animate({ paddingLeft: pad_out }, 150); }, function() { $(this).animate({ paddingLeft: pad_in }, 150); }); }); }
В блок: Code
<span class="blockmenu"> <script type="text/javascript" src="/js/sliding_effect.js"></script> <ul id="sliding-navigation"> <li class="sliding-element" style="margin-left: 0px; "><h3><font color="#00bfff"><b>OUR WEB-SITE</b></font></h3></li> <li class="sliding-element" style="margin-left: 0px; "><a href="/" style="padding-left: 15px; "><b>Г</b>лавная страница</a></li> <li class="sliding-element" style="margin-left: 0px; "><a href="//forum/" style="padding-left: 15px; "><b>Н</b>аш Форум</a></li> <li class="sliding-element" style="margin-left: 0px; "><a href="//news/" style="padding-left: 15px; "><b>Н</b>овости</a></li> <li class="sliding-element" style="margin-left: 0px; "><a href="//load/" style="padding-left: 15px; "><b>К</b>аталог файлов</a></li> <li class="sliding-element" style="margin-left: 0px; "><a href="//forum/14" style="padding-left: 15px; "><b>Б</b>аннерообмен</a></li> <li class="sliding-element" style="margin-left: 0px; "><a href="//search" style="padding-left: 15px; "><b>П</b>оиск по сайту</a></li> <li class="sliding-element" style="margin-left: 0px; "><h3><font color="#00bfff"><b>DESPERADOS TEAM</b></font></h3></li> <li class="sliding-element" style="margin-left: 0px; "><a href="//team_structure" style="padding-left: 15px; "><b>С</b>труктура команды</a></li> <li class="sliding-element" style="margin-left: 0px; "><a href="//stats_cw" style="padding-left: 15px; "><b>С</b>татистика CW <b>»MTA</b></a></li> <li class="sliding-element" style="margin-left: 0px; "><a href="//stats_cw" style="padding-left: 15px; "><b>С</b>татистика CW <b>»SA:MP</b></a></li> <li class="sliding-element" style="margin-left: 0px; "><a href="//news/novosti_kasajushhiesja_komandy_desp/1-0-1" style="padding-left: 15px; "><b>Н</b>овости команды</a></li> <li class="sliding-element" style="margin-left: 0px; "><a href="//index/ustav_komandy/0-7" style="padding-left: 15px; "><b>У</b>став команды</a></li> <li class="sliding-element" style="margin-left: 0px; "><a href="#" style="padding-left: 15px; "><b>Т</b>урниры</a></li> <li class="sliding-element" style="margin-left: 0px; "><a href="//team_graphics" style="padding-left: 15px; "><b>Г</b>рафика команды</a></li> <li class="sliding-element" style="margin-left: 0px; "><a href="#" style="padding-left: 15px; "><b>В</b>ступление</a></li> <li class="sliding-element" style="margin-left: 0px; "><a href="#" style="padding-left: 15px; "><b>И</b>стория</a></li> </span> </ul>
Сообщение Ето в CSS: Code
.blockmenu {height:20px;width: 160px;font: normal 11px Arial, Helvetica, sans-serif;text-align: left;} .blockmenu a:link,.blockmenu a:visited {height:20px;width: 180px;color:#DCDCDC;text-decoration:none;padding:3px 0px 0px 7px;line-height:18px;display:block;font-weight:normal;background: url(http://up-rise.ru/Design/1/img/24.png)no-repeat;text-align: left;} .blockmenu a:hover {height:20px;width: 180px;color:#ffffff;text-decoration:none;padding:3px 0px 0px 7px;line-height:18px;display:block;font-weight:normal;background:url('http://up-rise.ru/Design/1/img/25.png')no-repeat;text-align: left;}
js код: Кидаем в Блокнот и сохроняем как sliding_effect.js и залеваем в файловый менеджер Code
$(document).ready(function() { slide("#sliding-navigation", 25, 15, 150, .8); }); function slide(navigation_id, pad_out, pad_in, time, multiplier) { // creates the target paths var list_elements = navigation_id + " li.sliding-element"; var link_elements = list_elements + " a"; // initiates the timer used for the sliding animation var timer = 0; // creates the slide animation for all list elements $(list_elements).each(function(i) { // margin left = - ([width of element] + [total vertical padding of element]) $(this).css("margin-left","-180px"); // updates timer timer = (timer*multiplier + time); $(this).animate({ marginLeft: "0" }, timer); $(this).animate({ marginLeft: "15px" }, timer); $(this).animate({ marginLeft: "0" }, timer); }); // creates the hover-slide effect for all link elements $(link_elements).each(function(i) { $(this).hover( function() { $(this).animate({ paddingLeft: pad_out }, 150); }, function() { $(this).animate({ paddingLeft: pad_in }, 150); }); }); }
В блок: Code
<span class="blockmenu"> <script type="text/javascript" src="/js/sliding_effect.js"></script> <ul id="sliding-navigation"> <li class="sliding-element" style="margin-left: 0px; "><h3><font color="#00bfff"><b>OUR WEB-SITE</b></font></h3></li> <li class="sliding-element" style="margin-left: 0px; "><a href="/" style="padding-left: 15px; "><b>Г</b>лавная страница</a></li> <li class="sliding-element" style="margin-left: 0px; "><a href="//forum/" style="padding-left: 15px; "><b>Н</b>аш Форум</a></li> <li class="sliding-element" style="margin-left: 0px; "><a href="//news/" style="padding-left: 15px; "><b>Н</b>овости</a></li> <li class="sliding-element" style="margin-left: 0px; "><a href="//load/" style="padding-left: 15px; "><b>К</b>аталог файлов</a></li> <li class="sliding-element" style="margin-left: 0px; "><a href="//forum/14" style="padding-left: 15px; "><b>Б</b>аннерообмен</a></li> <li class="sliding-element" style="margin-left: 0px; "><a href="//search" style="padding-left: 15px; "><b>П</b>оиск по сайту</a></li> <li class="sliding-element" style="margin-left: 0px; "><h3><font color="#00bfff"><b>DESPERADOS TEAM</b></font></h3></li> <li class="sliding-element" style="margin-left: 0px; "><a href="//team_structure" style="padding-left: 15px; "><b>С</b>труктура команды</a></li> <li class="sliding-element" style="margin-left: 0px; "><a href="//stats_cw" style="padding-left: 15px; "><b>С</b>татистика CW <b>»MTA</b></a></li> <li class="sliding-element" style="margin-left: 0px; "><a href="//stats_cw" style="padding-left: 15px; "><b>С</b>татистика CW <b>»SA:MP</b></a></li> <li class="sliding-element" style="margin-left: 0px; "><a href="//news/novosti_kasajushhiesja_komandy_desp/1-0-1" style="padding-left: 15px; "><b>Н</b>овости команды</a></li> <li class="sliding-element" style="margin-left: 0px; "><a href="//index/ustav_komandy/0-7" style="padding-left: 15px; "><b>У</b>став команды</a></li> <li class="sliding-element" style="margin-left: 0px; "><a href="#" style="padding-left: 15px; "><b>Т</b>урниры</a></li> <li class="sliding-element" style="margin-left: 0px; "><a href="//team_graphics" style="padding-left: 15px; "><b>Г</b>рафика команды</a></li> <li class="sliding-element" style="margin-left: 0px; "><a href="#" style="padding-left: 15px; "><b>В</b>ступление</a></li> <li class="sliding-element" style="margin-left: 0px; "><a href="#" style="padding-left: 15px; "><b>И</b>стория</a></li> </span> </ul>
Автор - ♣Ястреб♣ Дата добавления - 11.02.2012 в 20:42