> JavaScript/jQuery > マウスオンでにゅるっと広がるjQueryメニュー

マウスオンでにゅるっと広がるjQueryメニュー

マウスオン時にアニメーションで大きくなったり小さくなったりするjQueryメニューです。
思わず触りたくなるフラットなメニューで閲覧者の遊び心を誘います。

デモ画面

マウスオンで広がる文字だけの丸型メニュー

sample1.jpg

HTMLサンプル
    <div id="sample1">
        <div class="wrap">
            <ul>
                <li><a href="#top"><span>メニュー</span></a></li>
                <li><a href="#top"><span>メニュー</span></a></li>
                <li><a href="#top"><span>メニュー</span></a></li>
                <li><a href="#top"><span>メニュー</span></a></li>
                <li><a href="#top"><span>メニュー</span></a></li>
            </ul>
        </div>
    </div>
CSSサンプル
        #sample1 ul{margin: 0; text-align: center;}
        #sample1 ul li{
            display: inline-block;
            list-style: none;
            width: 100px;
            margin: 20px;
        }
        #sample1 ul li a{
            display: block;
            margin: 10px;
            padding: 0;
            width: 100px;
            height: 100px;
            line-height: 100px;
            background-color: #ffb0bd;
            border: 5px solid #ff8095;
            color: #fff;
            font-weight: bold;
            text-decoration: none;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
        }
        #sample1 ul li a:hover{background-color: #ff8095}
jQueryサンプル
        $(function(){
        // mouseOver時のスタイルを定義
            var mouse_on = {
                paddingTop: 20,
                paddingBottom: 20,
                paddingLeft: 20,
                paddingRight: 20,
                marginTop: 0,
                marginBottom: 0,
                marginLeft: 0,
                marginRight: 0,
            }
        // mouseOut時のスタイルを定義
            var mouse_off = {
                paddingTop: 0,
                paddingBottom: 0,
                paddingLeft: 0,
                paddingRight: 0,
                marginTop: 20,
                marginBottom: 20,
                marginLeft: 20,
                marginRight: 20,
            }
        //メニューの設定
            $('#sample1 ul li a').hover(function(){
                $(this).animate(mouse_on, 100);
            }, 
            function(){
                $(this).animate(mouse_off, 100);
            });
        });

スタイルシートの#sample1 ul li aの margin値、jQueryのmargin値及びpadding値を調整すると、丸型の大きさを調整することができます。

マウスオンで広がって画像も拡大される丸型メニュー

sample2.jpg

HTMLサンプル
    <div id="sample2">
        <div class="wrap">
            <ul>
                <li><a href="#top"><img src="./sample.png" alt="メニュー" title="メニュー" /></a></li>
                <li><a href="#top"><img src="./sample.png" alt="メニュー" title="メニュー" /></a></li>
                <li><a href="#top"><img src="./sample.png" alt="メニュー" title="メニュー" /></a></li>
                <li><a href="#top"><img src="./sample.png" alt="メニュー" title="メニュー" /></a></li>
                <li><a href="#top"><img src="./sample.png" alt="メニュー" title="メニュー" /></a></li>
            </ul>
        </div>
    </div>
CSSサンプル
        #sample2 ul{margin: 0; text-align: center;}
        #sample2 ul li{
            display: inline-block;
            list-style: none;
            width: 100px;
            margin: 20px;
        }
        #sample2 ul li a{
            display: block;
            margin: 20px;
            padding: 0;
            width: 100px;
            height: 100px;
            line-height: 100px;
            background-color: #ffb0bd;
            border: 5px solid #ff8095;
            color: #fff;
            font-weight: bold;
            text-decoration: none;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
        }
        #sample2 ul li a img{width: 50%; height: 50%; margin: 25%;}
        #sample2 ul li a:hover{background-color: #ff8095}
        #sample2 ul li a:hover img{width: 100%; height: 100%; margin: 0;}
jQueryサンプル
        $(function(){
        // mouseOver時のスタイルを定義
            var mouse_on = {
                paddingTop: 20,
                paddingBottom: 20,
                paddingLeft: 20,
                paddingRight: 20,
                marginTop: 0,
                marginBottom: 0,
                marginLeft: 0,
                marginRight: 0,
            }
        // mouseOut時のスタイルを定義
            var mouse_off = {
                paddingTop: 0,
                paddingBottom: 0,
                paddingLeft: 0,
                paddingRight: 0,
                marginTop: 20,
                marginBottom: 20,
                marginLeft: 20,
                marginRight: 20,
            }
        //メニューの設定
            $('#sample2 ul li a').hover(function(){
                $(this).animate(mouse_on, 100);
            }, 
            function(){
                $(this).animate(mouse_off, 100);
            });
        });

スタイルシートの#sample2 ul li aの margin値、jQueryのmargin値及びpadding値を調整すると、丸型の大きさを調整することができます。
また、#sample2 ul li a imgのwidth値・height値・margin値、#sample2 ul li a:hover imgのwidth値・height値・margin値で拡大率を調整できます。
#sample2 ul li a imgのwidth値(またはheight値)プラスmargin値、#sample2 ul li a imgのwidth値(またはheight値)プラスmargin値が同じになるように調整してください。

マウスオンで広がって画像の上に文字が表示される丸型メニュー

sample3.jpg

HTMLサンプル
    <div id="sample3">
        <div class="wrap">
            <ul>
                <li><a href="#top"><img src="./home.png" alt="メニュー" /><span>メニュー</span></a></li>
                <li><a href="#top"><img src="./home.png" alt="メニュー" /><span>メニュー</span></a></li>
                <li><a href="#top"><img src="./home.png" alt="メニュー" /><span>メニュー</span></a></li>
                <li><a href="#top"><img src="./home.png" alt="メニュー" /><span>メニュー</span></a></li>
                <li><a href="#top"><img src="./home.png" alt="メニュー" /><span>メニュー</span></a></li>
            </ul>
        </div>
    </div>
CSSサンプル
        #sample3 ul{margin: 0; text-align: center;}
        #sample3 ul li{
            display: inline-block;
            list-style: none;
            width: 100px;
            margin: 20px;
        }
        #sample3 ul li a{
            display: block;
            margin: 20px;
            padding: 0;
            position: relative;
            width: 100px;
            height: 100px;
            line-height: 100px;
            background-color: #ffb0bd;
            border: 5px solid #ff8095;
            color: #fff;
            font-weight: bold;
            text-decoration: none;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
        }
        #sample3 ul li a:hover{background-color: #ff8095}
        #sample3 ul li a:hover img{opacity: 0.3;}
        #sample3 ul li span {
            color: #fff;
            position: absolute;
            opacity: 0;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
        #sample3 ul li a:hover span{opacity: 1; line-height: 140px;}
jQueryサンプル
        $(function(){
        // mouseOver時のスタイルを定義
            var mouse_on = {
                paddingTop: 20,
                paddingBottom: 20,
                paddingLeft: 20,
                paddingRight: 20,
                marginTop: 0,
                marginBottom: 0,
                marginLeft: 0,
                marginRight: 0,
            }
        // mouseOut時のスタイルを定義
            var mouse_off = {
                paddingTop: 0,
                paddingBottom: 0,
                paddingLeft: 0,
                paddingRight: 0,
                marginTop: 20,
                marginBottom: 20,
                marginLeft: 20,
                marginRight: 20,
            }
        //メニューの設定
            $('#sample3 ul li a').hover(function(){
                $(this).animate(mouse_on, 100);
            }, 
            function(){
                $(this).animate(mouse_off, 100);
            });
        });

スタイルシートの#sample3 ul li a spanの opacity値で表示・非表示を調整しています。
#sample3 ul li a:hover spanのline-height値はマウスオン時のサイズで調整してください。

この記事が気に入ったらシェアしてください

関連記事

jQueryでチェックボックスを操作する方法まとめ【2021年版】

jQueryでチェックボックスを操作する方法まとめ【2021年版】

jQueryプラグイン「Colorbox」でYoutube動画をモーダルで表示してみる(レスポンシブ対応済)

jQueryプラグイン「Colorbox」でYoutube動画をモーダルで表示してみる(レスポンシブ対応済)

jQueryプラグイン「Colorbox」でHTMLタグや外部HTMLファイルをモーダルで表示してみる

jQueryプラグイン「Colorbox」でHTMLタグや外部HTMLファイルをモーダルで表示してみる

簡単にモーダルウィンドウを実装できるjQueryプラグイン「Colorbox」

簡単にモーダルウィンドウを実装できるjQueryプラグイン「Colorbox」

SyntaxHighlighterでの表示を色々カスタマイズしてみる

SyntaxHighlighterでの表示を色々カスタマイズしてみる

クリックするとトリガーが×になるドロワーメニュー

クリックするとトリガーが×になるドロワーメニュー

Comment Form

コメント投稿はこちらをクリックしてください
  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Postkey
(スパム対策に、投稿キー を半角で入力してください。)