"Венчурные Интеллектуальные Проекты"

В помощь ASP.NET разработчику => Полезные советы => Тема начата: krakoss от 01 Апреля 2013, 05:54:26



Название: Выдвигающаяся панель на CSS
Отправлено: krakoss от 01 Апреля 2013, 05:54:26
это код HTML

 <asp:Panel ID="pressa" runat="server" Visible="true">
            <div id="button">
                <div id="s_panel">
                    Если Вы считаете, что на сайте допущена ошибка,
                то напишите нам электронное сообщение:
               <a href="mailto:admin@hotel-tortuga.ru" style="color: #FFFFFF; cursor: pointer;">admin@hotel-tortuga.ru</a>
                </div>
            </div>
        </asp:Panel>


и CSS

    /*Выдвигающаяся панель на CSS */
#button
{
    position: fixed;
    top: 10px;
    left: 0;
    background: transparent url(next-horizontal.png) no-repeat 0 0;
    width: 28px;
    height: 50px;
    font: 28px Georgia;
    color: #dddddd;
    text-align: center;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    cursor: pointer;
}
#s_panel
{
    margin: 0px;
    position: fixed;
    top: 10px;
    left: -260px;
    width: 250px;
    height: 90px;
    padding: 10px 0px 0px 10px;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    color: #dddddd;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    cursor:default;
   
}
#button:hover
{
    left: 250px;
    cursor: pointer;
    background: url('../images/fon.jpg');
    /*background: transparent url(prev-horizontal.png) no-repeat 0 0;*/
   
}
#button:hover #s_panel {
   left: 0;
    cursor:default;
}