slidetoggle

<!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <link href="tab.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script> $(function(){ $(".menu").css("display","none"); $(".button-toggle").on("click",function(){ $(".menu").slideToggle(); }); }); </script> </head> <body> <header> <div class="title"><h1><a href="">俺のページ</a></h1></div> <div class="button-toggle">☰</div> <div class="menu"> <ul> <li><a href="">レスポンシブ</a></li> <li><a href="">モバイル</a></li> <li><a href="">スマートフォン</a></li> <li><a href="">カテゴリ</a></li> <li><a href="">カテゴリ2</a></li> </ul> </div> </header> </body> </html>

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.