1347789143 ウェブ作成について、クリックしたとき、メニューを下に出す方法を教えて下さい。

「利用中のサービス(右画像)」のように、クリックしたときに、メニューを下に表示させる方法を教えて下さい。
はてなダイアリーで表示できるものだと幸いです。

回答の条件
  • 1人5回まで
  • 登録:2012/09/16 18:52:23
  • 終了:2012/09/23 18:55:04

ベストアンサー

id:windofjuly No.2

うぃんど回答回数2625ベストアンサー獲得回数11492012/09/18 07:34:29

はてなダイアリーは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>

その他の回答(1件)

id:IDktskn No.1

カツくん回答回数2ベストアンサー獲得回数02012/09/17 14:07:15

JavaScriptを使えばできるんですけど、この機能はプログラムしたことがありません。
僕はここまでです。(クリックしたら画像や文字が表示される↓)
http://ktskn.web.fc2.com/JavaSample_Englsh_04.htm

id:windofjuly No.2

うぃんど回答回数2625ベストアンサー獲得回数11492012/09/18 07:34:29ここでベストアンサー

はてなダイアリーは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>

コメントはまだありません

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません