2012-01-08 2nd mretchin Follow 2012-01-08 15:34:24 License: MIT License Fork1 Fav0 View2714 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 6 lines HTML 35 lines CSS 58 lines 2012-01-08 2nd $(document).ready(function () { $('img.menu_class').hover(function () { $('ul.file_menu').slideToggle('medium'); }); }); <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Sliding Menu Tutorial | HV-DESIGNS.CO.UK</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/slider.js"></script> </head> <body> <div id="container"> <div id="header"> </div> <div id="button"> <img src="images/button.png" width="184" height="32" class="menu_class" /> <ul class="file_menu"> <li><a href="#file">File</a></li> <li><a href="#edit">Edit</a></li> <li><a href="#view">View</a></li> <li><a href="#insert">Insert</a></li> <li><a href="#modify">Modify</a></li> <li><a href="#control">Control</a></li> <li><a href="#debug">Debug</a></li> <li><a href="#window">Window</a></li> <li><a href="#help">Help</a></li> </ul> </div> </div> </body> </html> 2012-01-08 2nd body { font-family:Arial, Helvetica, sans-serif; font-size:12px; background-color: #333333; } #container { margin: auto; width: 490px; } #header { background-image: url(images/header.png); background-repeat: no-repeat; height: 42px; width: 490px; margin-bottom: 20px; } #button { height: 32px; width: 184px; margin: auto; } ul, li { margin:0; padding:0; list-style:none; } .menu_class { border:1px solid #1c1c1c; } .file_menu { display:none; width:300px; border: 1px solid #1c1c1c; } .file_menu li { background-color: #302f2f; } .file_menu li a { color:#FFFFFF; text-decoration:none; padding:10px; display:block; } .file_menu li a:hover { padding:10px; font-weight:bold; color: #F00880; } $(document).ready(function () { $('img.menu_class').hover(function () { $('ul.file_menu').slideToggle('medium'); }); }); <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Sliding Menu Tutorial | HV-DESIGNS.CO.UK</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/slider.js"></script> </head> <body> <div id="container"> <div id="header"> </div> <div id="button"> <img src="images/button.png" width="184" height="32" class="menu_class" /> <ul class="file_menu"> <li><a href="#file">File</a></li> <li><a href="#edit">Edit</a></li> <li><a href="#view">View</a></li> <li><a href="#insert">Insert</a></li> <li><a href="#modify">Modify</a></li> <li><a href="#control">Control</a></li> <li><a href="#debug">Debug</a></li> <li><a href="#window">Window</a></li> <li><a href="#help">Help</a></li> </ul> </div> </div> </body> </html> body { font-family:Arial, Helvetica, sans-serif; font-size:12px; background-color: #333333; } #container { margin: auto; width: 490px; } #header { background-image: url(images/header.png); background-repeat: no-repeat; height: 42px; width: 490px; margin-bottom: 20px; } #button { height: 32px; width: 184px; margin: auto; } ul, li { margin:0; padding:0; list-style:none; } .menu_class { border:1px solid #1c1c1c; } .file_menu { display:none; width:300px; border: 1px solid #1c1c1c; } .file_menu li { background-color: #302f2f; } .file_menu li a { color:#FFFFFF; text-decoration:none; padding:10px; display:block; } .file_menu li a:hover { padding:10px; font-weight:bold; color: #F00880; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author mretchin Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/4Ewk/js"></script> Tweet Twitter Discussion Questions on this code? Forked sort by latest page views favorite forked forked: 2012-01-08 2nd Aram.Mkrtchy 00 42 7/35/58
