スマホのメニューなどに使えるjQueryを使って要素をクリックした時に開閉させる方法(ドグルボタン化)

このエントリーをはてなブックマークに追加
PR

jQueryを使えば色々と便利なことがあります、今回はjQueryを使って要素をボタン化して、それにアクションを加えてやるというものです

TENPARA.NETで現在作成中のテンプレートで作成しているスマートフォンでボタンをクリックしたらメニューが出来るものです、これもjQueryでボタン化してそれにアクションを加えています

初期状態

スマホのメニューなどに使えるjQueryを使って要素をクリックした時に開閉させる方法(ボタン化) (2)

 

左上のボタンをクリックして展開

スマホのメニューなどに使えるjQueryを使って要素をクリックした時に開閉させる方法(ボタン化) (1)

 

DEMO 表示

 

 

仕組み

左上のボタンはdivですクラスがbutton-toggleのやつです、このdivにアクションを付けることでボタン化しています
アクションは、他の要素がslideup、slidedownを交互に繰り替えるslideToggleを使うことで表現しています

HTML コード

<header>
    <div class="title"><h1><a href="">創造WEB</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>

 

jQuery コード

<script>
$(function(){
    $(".menu").css("display","none");
    $(".button-toggle").on("click", function() {
        $(".menu").slideToggle();
    });
});
</script>

まず開いている状態の.menuを閉じます、最初からCSSで閉じておいてもいいのですが。
これは好みです

次に.buuton-toggleのクラスが付いた要素にアクション付けます

.on(“click”,function(){アクションの内容})
セレクタで選択したものをクリックした時にカッコ内のものを実行するようにします。これでアクション化出来ました

そしてアクション化したものの内容をslidetoggleにすることで、display:noneになっているものはdisplay:blockに、あとはその逆を交互に繰り返させます

意外と簡単にボタン化できるので、例えば通常ホバーの時しかツールチップが表示されないですが、クリックしたらツールチップの表示が固定されるなど色々な場面で使えます

PR

COMMENT

  1. ako

    始めまして。レスポンシブで
    @media only screen and (max-width: 767px) {
    時に現れるように使わせていただきましたが、
    PCブラウザを小さいサイズにして、上記のナビを出して、
    出したまま、ブラウザのサイズを大きくすると、
    ナビがCSSがあたっていない状態のテキストの状態で残ってしまいます。
    それを消す方法はありますか?
    すみません・・・・早急に教えていただけると、非常に助かります!!!!!!!

    ちなみに。
    PCサイズのグロナビとは別で、767px以下のグロナビをhtmlソースに書いています。
    PCのグロナビは画像で、
    767px以下はテキストを使っています。

    レスポンシブ初心者なので、上記の方法しかわからなかったので。

  2. ako

    すみません。 display:none; の指定をしなおしたら消えました。失礼しました!
    今後も色々参考にさせていただきます!

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)