jqury css implements pop-up scalable layer_html/css_WEB-ITnose

1. Use the pop-up retractable window to adjust the previous page layout. Using this layout makes the entire interface look more refreshing and concise

2. Take the left panel of the above picture as an example. The implementation is relatively simple. You only need to understand the html and css layout.

html code:

<div id="shortcutPanelDiv">    <button id="shortcutPanelSwitcher" title="快捷面板">    </button>    <div id="shortcutPanelContent">        <div id="shortcutPanel-1">            <button id="btn-snq">            </button>            <button id="btn-sbq">            </button>            <button id="btn-lcq">            </button>        </div>        <div id="shortcutPanel-2">            <button id="btn-cyq">            </button>            <button id="btn-lsq">            </button>            <button id="btn-hdq">            </button>        </div>        <div id="shortcutPanel-3">            <button id="btn-jzs">            </button>            <button id="btn-jms">            </button>            <button id="btn-pds">            </button>        </div>        <div id="shortcutPanel-4">            <button id="btn-lxs">            </button>        </div>    </div></div>

CSS:

#shortcutPanelDiv	{		left: 0;		bottom: 100px;		position: absolute;		z-index: 1;		width: 22px;		height: 170px;	} #shortcutPanelSwitcher	{		margin-top: 45px;		height: 80px;		width: 22px;		border: 0;		right: 0;		position: absolute;		background-color: #F0F0F0;		background-image: url("../img/table/RightArrow.png");		background-position: center;		background-repeat: no-repeat;	} #shortcutPanelContent	{		background-color: #F0F0F0;		position: absolute;		right: 22px;		height: 100%;		width: 230px;	}#shortcutPanel-1	{		margin-top: 10px;		margin-left: 5px;	} #shortcutPanel-2	{		margin-top: 10px;		margin-left: 5px;	} #shortcutPanel-3	{		margin-top: 10px;		margin-left: 5px;	} #shortcutPanel-4	{		margin-top: 10px;		margin-left: 5px;	}	

js code:

var isShortcutPanelShow = false;$(function(){    $("#shortcutPanelSwitcher").click(function()    {        if (isShortcutPanelShow == false)         {            $("#shortcutPanelDiv").animate(            {                width: '252px',            }, "slow");            isShortcutPanelShow = true;            $("#shortcutPanelSwitcher").css("background-image", "url('img/table/LeftArrow.png')");        } else         {            $("#shortcutPanelDiv").animate(            {                width: '22px',            }, "slow");            isShortcutPanelShow = false;            $("#shortcutPanelSwitcher").css("background-image", "url('img/table/RightArrow.png')");        }    });});

Layout requires patience, a little adjustment has arrived on its own Level of satisfaction

Copyright statement: This article is written by the blogger Original articles cannot be reproduced without the permission of the blogger.