Code
body { background: #ffffff; /*это цвет фона*/ padding: 0px 0 0 0px; } div.sc_menu_wrapper { position: relative; height: 234px; /*высота панели*/ margin-top: 5px; overflow: auto; width: 156px; (ширина панели*/ -webkit-border-radius: 4px; /*это */ -moz-border-radius: 4px; /*и это - округления краёв*/ text-align: center; color: #ffffff; border: 1px solid rgb(79, 79, 79); background: #ffffff; } div.sc_menu { padding: 15px 0; } .sc_menu a { display: block; margin-bottom: 5px; width: 150px; 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: dotted; } .sc_menu img { display: block; border: none; } .sc_menu_wrapper .loading { position: absolute; top: 10px; left: 0px; margin: 0 auto; padding: 10px; width: 150px; -webkit-border-radius: 4px; -moz-border-radius: 4px; text-align: center; color: #fff; border: 1px solid rgb(79, 79, 79); background: #1F1D1D; /*цвет обводки*/ } #back { margin-left: 10px; color: gray; font-size: 18px; text-decoration: none; } #back:hover { text-decoration: underline; }
Code
<script src="/js/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>