Панель, выдвигающаяся слева

автор moresol Сентябрь 29th 2011, 22:14

Подскажите, как можно сделать выезжающую панельку, навроде этой

http://radical-foto.ru/fp/d49045a717be9927162a3ef5

Могу предложить такой вариант: поставьте в виджет на главной странице

Код::  <style type="text/css"> #leftpanel:hover { /* изменение отступа слева при наведении */ margin-left: 250px; } /* общие настройки для ярлыка и содержимого Боковой панели*/ #leftpanel, #leftpanel .filling{ border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; -moz-border-radius:10px; -o-border-radius:10px; background-color:#F0F0F0; /* цвет фона панели */ box-shadow: 0px 5px 5px #626262; /* тень панели */ -webkit-box-shadow:0px 5px 5px #626262; -khtml-box-shadow:0px 5px 5px #626262; -moz-box-shadow:0px 5px 5px #626262; } /* ярлык Боковая панель */ #leftpanel { height:140px; /* высота */ width:230px; /* ширина */ position:fixed; z-index:1200; top:8px; left:-190px; /* ширина, на которую она спрятана за левый край экрана*/ margin-left: 0px; background:#F0F0F0 url(http://i33.servimg.com/u/f33/17/37/83/89/image011.png) center right no-repeat; /* кнопка с текстом боковое меню */ transition-duration: 0.33s; -webkit-transition-duration: 0.33s; -moz-transition-duration: 0.33s; -o-transition-duration: 0.33s; } /* содержимое Боковой панели */ #leftpanel .filling { padding:12px; height: 400px; /* высота */ width:100%; margin:-1px 0 0 -70px; } #patch2 { position:absolute; height:140px; /* высота должна быть равна высоте ярлыка */ width:11px; background-color:#F0F0F0; margin: -11px 0 0 234px; } </style>   <div id="leftpanel"><div class="filling"><div id="patch2"></div><div id="inr">  Тут любой ваш контент: ссылки, меню и т.д.  </div></div>