VSEpodrad.ru

<a href="#"><span style="color:ffffff"><b>Главная</b></span></a>  
<a href="/load/"><span style="color:ffffff">Файлы</b></span></a>  
<a href="/forum/"><span style="color:ffffff">Форум</b></span></a>  
<a href="/photo"><span style="color:ffffff">Обои</b></span></a>  
<a href="/blog"><span style="color:ffffff">Блог</b></span></a>  
<a href="/index/0-2"><span style="color:ffffff">О сайте</b></span></a>  
<a href="/index/0-3"><span style="color:ffffff">Связь</b></span></a>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>  
<script type= "text/javascript">/*<![CDATA[*/  
function makeScrollable(wrapper, scrollable){  
  var wrapper = $(wrapper), scrollable = $(scrollable);  
  scrollable.hide();  
  var loading = $('<div class="loading">Загрузка...</div>').appendTo(wrapper);  
  var interval = setInterval(function(){  
  var images = scrollable.find('img');  
  var completed = 0;  
  images.each(function(){  
  if (this.complete) completed++;  
  });  
  if (completed == images.length){  
  clearInterval(interval);  
  setTimeout(function(){  
  loading.hide();  
  wrapper.css({overflow: 'hidden'});  
  scrollable.slideDown('slow', function(){  
  enable();  
  });  
  }, 1000);  
  }  
  }, 100);  
  function enable(){  
  var inactiveMargin = 100;  
  var wrapperWidth = wrapper.width();  
  var wrapperHeight = wrapper.height();  
  var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;  
  wrapper.mousemove(function(e){  
  var wrapperOffset = wrapper.offset();  
  var top = (e.pageY - wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin;  
  if (top < 0){  
  top = 0;  
  }  
  wrapper.scrollTop(top);  
  });  
  }  
}  
$(function(){  
  makeScrollable("div.sc_menu_wrapper", "div.sc_menu");  
});  
/*]]>*/</script>  
<div align="center"><div class="sc_menu_wrapper">  
  <div class="sc_menu">  
$MYINF_XX$  
  </div>  
  </div></div>

div.sc_menu_wrapper {  
  position: relative;  
  height: 200px;  
  margin-top: 5px;  
  overflow: auto;  
width: 256px;  
  -webkit-border-radius: 4px;  
  -moz-border-radius: 4px;  
  text-align: center;  
  color: #212121;  
  border: 1px #212121;  
  background: #212121;  
}  
div.sc_menu {  
  padding: 5px 0;  
}  
.sc_menu a {  
  display: block;  
  margin-bottom: 5px;  
  border: 3px rgb(79, 79, 79) solid;  
  -webkit-border-radius: 4px;  
  -moz-border-radius: 4px;  
  color: #fff;  
  background: rgb(79, 79, 79);  
}  
.sc_menu a:hover {  
  border-color: rgb(130, 130, 130);  
  border-style: solid;  
}  
.sc_menu img {  
  display: block;  
  border: none;  
}  
.sc_menu_wrapper .loading {  
  position: absolute;  
  top: 10px;  
  left: 0px;  
  margin: 0 auto;  
  padding: 10px;  
  width: 200px;  
  -webkit-border-radius: 4px;  
  -moz-border-radius: 4px;  
  text-align: center;  
  color: #fff;  
  border: 1px solid rgb(79, 79, 79);  
  background: #252525;  
}  
#back {  
  margin-left: 10px;  
  color: gray;  
  font-size: 18px;  
  text-decoration: none;  
}  
#back:hover {  
  text-decoration: underline;  
}