CSS・CSS3

CSSだけで作るドロワーメニュー【Pure Drawer】使い方

pure-drawer

今回は、javascriptを使わずCSSのみで作成できるドロワーメニュー【Pure Drawer】のご紹介です。

機能がjavascriptで作っているドロワーに劣るのでは?と思われますが、エフェクト効果・ドロワー位置の変更も簡単に行えます。
実際に【Pure Drawer】を使ったデモサイトもありますので、ご参考下さい。

デモサイト

実際に利用する場合は、下記サイトより必要ファイルをダウンロードして下さい。

Pure Drawer

Pure Drawer 使い方

それでは、CSSだけで作る【Pure Drawer】の使い方のご紹介をしていきたいと思います。

必要ファイルの読み込み

ダウンロードしたファルダ内にある【app.min.css】をhead内に読み込みます。

<link rel="stylesheet" href="css/app.min.css" type="text/css"/>

HTMLの準備

次にHTMLの準備をしていきます。
nav要素クラス【pure-drawer】内がドロワーメニューとなり、コンテンツ等は、div要素のクラス【pure-pusher】内に記述して下さい。

<body>
	<div class="pure-container" data-effect="pure-effect-fade">
        
    	<!--▼トグルボタン▼-->
        <input type="checkbox" id="pure-toggle-left" class="pure-toggle" data-toggle="left"/>
        <label class="pure-toggle-label" for="pure-toggle-left" data-toggle-label="left"><span class="pure-toggle-icon"></span></label>
        <!--▲トグルボタン▲-->
            
	<!--▼ドロワーメニュー▼-->
        <nav class="pure-drawer" data-position="left">
        	<div class="row collapse">
            	<div class="large-12 columns">
                	<ul class="nav-primary">
                    	<li><a href="">Home</a></li>
                        <li><a href="">Menu</a></li>
                        <li><a href="">Menu</a></li>
                        <li><a href="">Menu</a></li>
                    </ul> 
                </div>
            </div>
        </nav>
        <!--▲ドロワーメニュー▲-->
            
        <!--▼コンテンツ▼-->
        <div class="pure-pusher-container">
            <div class="pure-pusher">
            
				.......
                
            </div>
        </div>
        <!--▲コンテンツ▲-->
            
        <!--▼コンテンツオーバーレイ▼-->
        <label class="pure-overlay" for="pure-toggle-left" data-overlay="left"></label>
        <!--▲コンテンツオーバーレイ▲--> 
	</div>
</body>

上記までを記述すれば、ドロワーメニューの実装の完了となります。
CSSを読み込んで、HTMLの記述で終わりなので、意外と簡単に実装出来ると思います。

また、デフォルトのトグルボタンのスタイルも実装するサイトのレイアウトに合わない場合は、CSSの方で変更も出来ますので用途に合わせて変更するのもいいかもしれません。

デモサイト

ドロワー位置の変更

ドロワー位置の変更は、【左】【トップ】【右】に変更が可能です。
変更する場合は、【data-position】に【left/top/right】で変更可能です。

<nav class="pure-drawer" data-position=top">

エフェクトの変更

ドロワーメニューのエフェクトも【data-effect】で変更が可能です。
エフェクトの種類は、こちらからご確認頂けます。

<div class="pure-container" data-effect="pure-effect-fade">

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREVIOUS editauthorslug

WordPressのログインIDを隠してセキュリティを少し強化

NEXT smoothslider

WordPressコンテンツスライダーSmooth Slider使い方