「利用中のサービス(右画像)」のように、クリックしたときに、メニューを下に表示させる方法を教えて下さい。
はてなダイアリーで表示できるものだと幸いです。
はてなダイアリーはJAVAScriptを消してしまう仕様なので、
やるとすればスタイルシートによる切り替えになります。
日記の中にそのまま書ける簡単な例を作ってみましたので、
細かい部分は実際に設置したい場所に合わせて調整してくださいな。
<style> ul#pull_down_menu { position:absolute; background-color:#FFFFFF; } ul#pull_down_menu li { display:none; z-index:100000; } ul#pull_down_menu:hover li { display:block; } </style> <ul id="pull_down_menu"> <a href="#">はてなリンク</a> <li> <img src ="http://www.hatena.com/images/favicon/bookmark.gif" /> <a href="http://www.hatena.ne.jp/me/b/">はてなブックマーク</a> </li> <li> <img src ="http://www.hatena.com/images/favicon/diary.gif" /> <a href="http://www.hatena.ne.jp/me/d/">はてなダイアリー</a> </li> <li> <img src ="http://www.hatena.com/images/favicon/question.gif" /> <a href="http://www.hatena.ne.jp/me/q/">人力検索はてな</a> </li> </ul>
JavaScriptを使えばできるんですけど、この機能はプログラムしたことがありません。
僕はここまでです。(クリックしたら画像や文字が表示される↓)
http://ktskn.web.fc2.com/JavaSample_Englsh_04.htm
はてなダイアリーはJAVAScriptを消してしまう仕様なので、
やるとすればスタイルシートによる切り替えになります。
日記の中にそのまま書ける簡単な例を作ってみましたので、
細かい部分は実際に設置したい場所に合わせて調整してくださいな。
<style> ul#pull_down_menu { position:absolute; background-color:#FFFFFF; } ul#pull_down_menu li { display:none; z-index:100000; } ul#pull_down_menu:hover li { display:block; } </style> <ul id="pull_down_menu"> <a href="#">はてなリンク</a> <li> <img src ="http://www.hatena.com/images/favicon/bookmark.gif" /> <a href="http://www.hatena.ne.jp/me/b/">はてなブックマーク</a> </li> <li> <img src ="http://www.hatena.com/images/favicon/diary.gif" /> <a href="http://www.hatena.ne.jp/me/d/">はてなダイアリー</a> </li> <li> <img src ="http://www.hatena.com/images/favicon/question.gif" /> <a href="http://www.hatena.ne.jp/me/q/">人力検索はてな</a> </li> </ul>
コメント(0件)