сейчас на сайте:
Лучшие сказки мира 03skazki.ru
Детектив и фантастика 03pressa.ru
Песни прошлых лет 03pesni.ru
Для досуга
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><HTML><head> <title>Меню Горизонтальное меню из линков с применением фильтра fade и скрипта ie-css3.htc для обрамления</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <style> *{ margin:0; padding:0; } html,body{ margin:0; padding:0; } body{ background:#fff; min-width:400px; font:normal 13px Tahoma, Verdana, Arial, sans-serif; color:#000; } #topmenu{ height:36px; margin:10px; text-align:center; clear:both; } #topmenu ul{ list-style:none; margin:0; padding:0;} #topmenu ul li{ list-style-type:none; background:red; padding:2; margin:4 } #topmenu li{ width:24px; height:24px; float:left; position: relative; text-align: center; font-weight: bold; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 6px; -moz-box-shadow: 4px 4px 4px #FF0000; -webkit-box-shadow: 4px 4px 4px #FF0000; box-shadow: 4px 4px 4px #CCC; behavior: url(ie-css3.htc); border: 1px solid #FF0000; } #topmenu a{ width:24px; height:20px; cursor:pointer; background:#eba300; color:#fff; font:bold 12px Tahoma, Verdana, Arial, sans-serif; text-decoration:none; float:left; display:block; padding:2px 0 2px 0; border:1px solid #eba300; border-right:0; } #topmenu > ul a { width:auto; } #topmenu a { float:none; } </style> <script type="text/javascript"> function fade(sElemId,sRule,bBackward){if(!document.getElementById(sElemId))return;var aRuleList=sRule.split(/\s*,\s*/);for(var j=0;j<aRuleList.length;j++){sRule=aRuleList[j];if(!fade.aRules[sRule])continue;var i=0;if(!fade.aProc[sElemId]) {fade.aProc[sElemId]={};} else if(fade.aProc[sElemId][sRule]) {i=fade.aProc[sElemId][sRule].i;clearInterval(fade.aProc[sElemId][sRule].tId);} if((i==0&&bBackward)||(i==fade.aRules[sRule][3]&&!bBackward))continue;fade.aProc[sElemId][sRule]={'i':i,'tId':setInterval('fade.run("'+sElemId+'","'+sRule+'")',fade.aRules[sRule][4]),'bBackward':Boolean(bBackward)};}} fade.aProc={};fade.aRules={};fade.run=function(sElemId,sRule) {fade.aProc[sElemId][sRule].i+=fade.aProc[sElemId][sRule].bBackward?-1:1;var finishPercent=fade.aProc[sElemId][sRule].i/fade.aRules[sRule][3];var startPercent=1-finishPercent;var aRGBStart=fade.aRules[sRule][0];var aRGBFinish=fade.aRules[sRule][1];document.getElementById(sElemId).style[fade.aRules[sRule][2]]='rgb('+Math.floor(aRGBStart['r']*startPercent+aRGBFinish['r']*finishPercent)+','+Math.floor(aRGBStart['g']*startPercent+aRGBFinish['g']*finishPercent)+','+Math.floor(aRGBStart['b']*startPercent+aRGBFinish['b']*finishPercent)+')';if(fade.aProc[sElemId][sRule].i==fade.aRules[sRule][3]||fade.aProc[sElemId][sRule].i==0)clearInterval(fade.aProc[sElemId][sRule].tId);} fade.back=function(sElemId,sRule){fade(sElemId,sRule,true);};fade.addRule=function(sRuleName,sFadeStartColor,sFadeFinishColor,sCSSProp,nMiddleColors,nDelay) {fade.aRules[sRuleName]=[fade.splitRGB(sFadeStartColor),fade.splitRGB(sFadeFinishColor),fade.ccs2js(sCSSProp),nMiddleColors||50,nDelay||1];};fade.splitRGB=function(color){var rgb=color.replace(/[# ]/g,"").replace(/^(.)(.)(.)$/,'$1$1$2$2$3$3').match(/.{2}/g);for(var i=0;i<3;i++)rgb[i]=parseInt(rgb[i],16);return{'r':rgb[0],'g':rgb[1],'b':rgb[2]};};fade.ccs2js=function(prop){var i;while((i=prop.indexOf("-"))!=-1)prop=prop.substr(0,i)+prop.substr(i+1,1).toUpperCase()+prop.substr(i+2);return prop;}; </script> <script type="text/javascript"> fade.addRule('fontfade',"#fff","#eba300","color", 80, 1); fade.addRule('orfade',"#eba300","#fff8de","background-color", 80, 1); </script> </head> <body> <div id="topmenu"> <ul id="nav"> <li><a id="item0" onmouseover="fade(this.id, 'orfade,fontfade')" onmouseout="fade.back(this.id, 'orfade,fontfade')" href="#">1</a></li> <li><a id="item1" onmouseover="fade(this.id, 'orfade,fontfade')" onmouseout="fade.back(this.id, 'orfade,fontfade')" href="#">2</a></li> <li><a id="item2" onmouseover="fade(this.id, 'orfade,fontfade')" onmouseout="fade.back(this.id, 'orfade,fontfade')" href="#">3</a></li> <li><a id="item3" onmouseover="fade(this.id, 'orfade,fontfade')" onmouseout="fade.back(this.id, 'orfade,fontfade')" href="#">4</a></li> <li><a id="item4" onmouseover="fade(this.id, 'orfade,fontfade')" onmouseout="fade.back(this.id, 'orfade,fontfade')" href="#">5</a></li> <li><a id="item5" onmouseover="fade(this.id, 'orfade,fontfade')" onmouseout="fade.back(this.id, 'orfade,fontfade')" href="#">6</a></li> <li><a id="item6" onmouseover="fade(this.id, 'orfade,fontfade')" onmouseout="fade.back(this.id, 'orfade,fontfade')" href="#">7</a></li> </ul> </div> </body> </html>
