Monday, 16 September 2013

Side menu pop up using css


                         Side menu pop up using css




<div id="left-panel">
<div>
<asp:imagebutton height="80px" id="imgBtnSave" imageurl="~/Images/Icons/Save.png" onclick="imgBtnSave_Click" runat="server" tooltip="Save" width="80px">
            </asp:imagebutton></div>
<div>
<asp:imagebutton height="80px" id="ImageButton1" imageurl="~/Images/Icons/email.png" runat="server" tooltip="Email" width="80px">
            </asp:imagebutton></div>
<div>
<asp:imagebutton height="80px" id="ImageButton2" imageurl="~/Images/Icons/print.png" runat="server" tooltip="Print" width="80px">
           </asp:imagebutton></div>
</div>

<style type="text/css">
        #left-panel
        {
            width: 117px;
            height: 275px;
            border: 5px solid #555;
            background-color: #fff;
            position: fixed;
            top: 150px;
            left: -50px;
            border-radius: 0 1em 1em 0;
            padding: 5px;
            -webkit-transition: all 0.5s ease-in-out;
            z-index: 10000;
        }
        #left-panel:hover
        {
            left: -10px;
        }
        #left-panel.show
        {
            left: -5px;
        }
        #left-panel a.controller
        {
            position: absolute;
            right: 5px;
            top: 5px;
            text-decoration: none;
            -webkit-transition: all 0.5s ease-in-out;
            color: black;
            font-weight: bold;
        }
        #left-panel.show a.controller
        {
            -webkit-transform: rotate(180deg);
        }
    </style>

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

<< Home