さぁ!検索しよう!

スマートフォンサイトなどで実装されているスライドメニューの作り方です。

DEMO

はみ出たボタンをクリックすると、左からメニューが開きます。さらに、ボタンの矢印に注目すると、メニューが開いた後に向きが変わっていることが確認できます。

HTML

<aside class="sidebar">
    <ul>
        <li>
            <a href="#" class="img_01">画像1</a>
        </li>
        <li>
            <a href="#" class="img_02">画像2</a>
        </li>
        <li>
            <a href="#" class="img_03">画像3</a>
        </li>
    </ul>
    <div class="button">
        <a href="#"></a>
    </div>
</aside>

メニュー<aside class="sidebar"></aside>の中にメニュー項目とボタンが定義されています。

CSS

body {
    background-color: #333333;
}

.sidebar {
    position: relative;
    left: -110px;
    width: 100px;
    height: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.sidebar ul {
    list-style-type: none;
    padding: 0;
}

.sidebar li {
    padding: 10px;
}

.sidebar li a {
    width: 70px;
    height: 70px;
    display: block;
    border: 3px solid #CCC;
    border-radius: 50%;
    text-align: center;
    text-decoration: none;
    line-height: 70px;
    color: #333333;
    font-family: "メイリオ";
}

.img_01 {
    background-color: #FA8072;
}

.img_02 {
    background-color: #66CDAA;
}

.img_03 {
    background-color: #B0E0E6;
}

.button a {
    position: absolute;
    top: 70px;
    left: 100px;
    display: block;
    width: 30px;
    height: 70px;
    color: #FFF;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    text-decoration: none;
    line-height: 70px;
}

.open:after {
    content: "";
    display: block;
    position: absolute;
    top: 30px;
    right: 10px;
    width: 10px;
    height: 10px;
    border-top: 1px solid #CCC;
    border-right: 1px solid #CCC;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-tansform: rotate(45deg);
}

.close:after {
    content: "";
    display: block;
    position: absolute;
    top: 30px;
    right: 10px;
    width: 10px;
    height: 10px;
    border-top: 1px solid #CCC;
    border-left: 1px solid #CCC;
    transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-tansform: rotate(-45deg);
}

メニュー.sidebarleft:-110px;で左に隠しています。また、ボタンをメニューを基準に絶対配置するため、position:relative;を指定しています。

ボタン.button aposition:absolute;で絶対配置しています。

.open:afterは右向き、.close:afterは、左向の矢印です。

jQuery

$(function() {
    var duration = 500;
    var $sidebar = $('.sidebar');
    var $button = $('.button a');

    $button.addClass('open');
    $button.click(function() {
        $button.toggleClass('close');
        $button.removeClass('open');
        if ($button.hasClass('close')) {
            $sidebar.stop().animate({
                left: '0'
            }, duration, 'easeOutQuint');
        } else {
            $sidebar.stop().animate({
                left: '-100px'
            }, duration, 'easeOutQuint');
            $button.addClass('open');
        };
    });
});

duration

durationは、メニューが開閉する時間です。

var duration = 500;

$button.addClass

$button.addClass('open');とすることで、ボタンに前述でCSSに記述した.openクラスが追加されます。これによってボタンに右方向の矢印が表示されます。

$button.click(function() {…}

$button.click(function() {...}はボタンがクリックされたときの処理です。

$button.toggleClass(‘close’);

$button.toggleClass('close');で、ボタンがクリックされたときに$buttoncloseクラスが追加されていれば(左向きの矢印が表示されていれば)外し(非表示にし)、されていなければ追加します(表示します)。

$button.removeClass(‘open’);

$button.removeClass('open');で、ボタンがクリックされると、一旦リセットという形で.openクラスを削除します(右向きの矢印を削除します)。

if($button.hasClass(‘close’)) {…}

if($button.hasClass('close')) {...}で、メニューを開くべきかそうでないかを判別します。
前述の$button.toggleClass('close');によってボタンに.closeクラスが追加されていればメニューを開きます。

if ($button.hasClass('close')) {
    $sidebar.stop().animate({
        left: '0'
    }, duration, 'easeOutQuint');
}

前述の$button.toggleClass('close');によって、ボタンに.closeクラスが追加されていなければ、メニューを閉じます。
更に、$button.addClass('open');で右向きの矢印を表示します。

else {
        $sidebar.stop().animate({
            left: '-100px'
        }, duration, 'easeOutQuint');
        $button.addClass('open');
    };

以上で、左右に開閉するスライドメニューの作り方を終わります。