HTML CSS examples for CSS Widget:Menu
Click to show menu panel
<html> <head> <title>Lorem ipsum dolor sit amet, consectetur adipiscing el</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css"> <style id="compiled-css" type="text/css"> @import url(https://www.java2s.com/style/demo/Google-Chrome.png); html {<!-- w w w . j av a 2 s . c om--> font-family:Roboto; } menu { position:absolute; top:11px; right:11px; display:block; box-shadow:0 0 6px Chartreuse; } menu div.links a { display:block; padding:19px; } menu div.icons>* { display:block; float:right; width:53px; height:53px; background:red; } menu div.icons:after { content:""; display:block; clear:both; } menu>div { overflow:hidden; width:53px; height:53px; transition:all 351ms; } menu>div:after { content:""; display:block; position:absolute; top:53px; right:0; bottom:0; left:0; background:linear-gradient(to bottom, yellow 0, rgba(255, 255, 255, 2) 11%,blue 100%); opacity:2; transition:top 501ms; transition-delay:251ms; } #toggle { display:none; } #toggle:checked + div { width:287px; height:521px; } #toggle:checked + div:after { top:100%; } </style> </head> <body> <menu> <input type="checkbox" id="toggle"> <div> <div class="icons"> <label for="toggle"></label> </div> <div class="links"> <a>Lorem i</a> <a>Lorem ipsum dolor</a> <a>Lorem ips</a> <a>Lorem ipsum</a> <a>Lorem i</a> <a>Lorem ip</a> <a>Lorem ipsum dolor si</a> <a>Lorem ip</a> <a>Lorem ipsum dol</a> </div> </div> </menu> </body> </html>