CSS3+HTML5 effect 8-fixed on top and right, with window-changing layout on the left

Original: CSS3+HTML5 effect 8-fixed on top and right, with window-changing layout on left

Effect Demo

Implementation principle

1. Use 3 div (one is the top bar, one is the left column and the other is the right column);
2. Use a checkbox to determine whether to show and hide the right column, and click Show and hide labels to achieve the final effect.

Code description

As1

+ View Code?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 8 5 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117

<style> body {   font-family:"Microsoft YaHei",arial,sans-serif;   margin: 0px;   padding: 0px;   color: #666; }ul {   margin:0;   padding:0;   list-style-type:none; }.topPanel{     position: fixed;     top: 0px;     left: 0px;     height: 30px;     width: 100%;     border-top: 1px solid #e0e0e0;     border-bottom: 1px solid #e0e0e0;     background: #F0FFFF; }.topPanel div{     display: inline-block;     padding: 3px 20px 0px 3px;     height: 27px; }.splitPanel{     position: fixed;     top: 49%;     width: 15px;     height: 50px;     right: 301px;     background: #1E90FF;     cursor: pointer;     border-top-left-radius: 10px;     border-bottom-left-radius: 10px;     z-index: 9999; } .showHideRightPanelChk {     display: none; }.showHideRightPanelChk:checked ~ .rightPanel {     display: none; }.showHideRightPanelChk:checked ~ .splitPanel {     right: 0px;     background: #FFC125; }.showHideRightPanelChk:checked ~ .splitPanel label{     right: 0px; } .showHideRightPanelChk:checked ~ .splitPanel label:nth-child(1){     margin: 20px 0px 0px 6px;     transform: rotate(315deg);     -webkit-transition:1s all ease;     transition:1s all ease; }.showHideRightPanelChk:checked ~ .contentPanel {     right: 0px; } .splitMark{     margin: 20px 0px 0px 3px;     width: 5px;     height: 5px;     border-top: 2px #fff solid;     border-left: 2px #fff solid;     transform: rotate(135deg);     display: inline-block;     -webkit-transition:1s all ease;     transition:1s all ease; } .splitBorder{     position: fixed;     top: 49%;     width: 15px;     height: 50px;     right: 301px; }.rightPanel{     position: fixed;     top: 31px;     right: 0px;     width: 299px;     bottom: 1px;     border-left: 1px solid #e0e0e0;     padding: 1px 1px 1px 1px; }.rightPanel div{     display: inline-block;     margin: 0px 0px 14px 0px; }.contentPanel{     position: fixed;     top: 32px;     left: 0px;     right: 301px;     bottom: 1px;     width: auto;     background: #FFFFF0; } </style>

　　

1. Set the top div,height to 30px,width for 100%, the bottom has a border effect;
2. Set the left Div,top to 32px, the distance to the right 301px, the distance from the bottom 1px,width for auto effect;
3. Set the right div,top to 31px,width to 300px, the distance from the bottom 1px, the left side has a border effect;
4. Set the area for the click Switch Effect, top for 49%,width to 15px,height for 50px, distance to the right 301px, at the same time set the upper left and bottom left for the fillet effect;
5. Sets the style used to identify the right div display and hide effects.

Html

<div><input id= "Showhiderightpanel" class= "Showhiderightpanelchk" type= "checkbox" ><div class= " Toppanel "><div>top panel</div></div><div class=" Contentpanel "><div> Contentcontent content content content content, content content, content, content, content, content, content Con Tent content content content, content content, content, content content, content and content content </div></div& Gt;<div class= "Splitpanel" ><label for= "Showhiderightpanel" class= "Splitmark" ></label><label For= "Showhiderightpanel" class= "Splitborder" ></label></div><div class= "RightPanel" ><div ><ul><li>right panel</li></ul></div></div></div>

After running, you can see the effect.