広告

CSSだけでドロワーメニュー

WEBデザイン/UI

概要

jQueryを使ったドロワーメニューなら簡単に設置できるんだろうけど、使わないで済むならそのほうがいいね。
ということで・・・

■疑似クラス「:checked」
該当要素がチェックされた状態のときのプロパティを指定できるよ。
でも該当要素のスタイルしか設定できないのね。

#open:checked {}

■隣接セレクタ「+」
隣合う要素をセットで指定できるよ。

#open + #menu {}

これらの条件さえ整えば同時に使うことで#openがチェックされた状態のときの#menuのプロパティを設定できるね！

#open:checked + $menu {}

■サンプルのHTML

sample.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>SideMenu</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" id="font-awesome-css"  href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css?ver=all" type="text/css" media="all" />
  <link rel="stylesheet" href="css/drawer_common.css" type="text/css">
  <!-- 個別のCSSを読み込んでね！ -->
</head>
<body>

<header>
  <div id="label">
    <label id="toggle" for="open"><i class="fa fa-bars" aria-hidden="true"></i></label>
  </div>
  <div id="header">
    ヘッダ
  </div>
</header>

<nav>
  <input id="open" type="checkbox">
  <div id="menu">
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Access</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </div>
</nav>

<section>

  <div class="content">

    <h1>サンプルページ</h1>

    <p>000</p>
    <p>111</p>
    <p>222</p>
    <p>333</p>
    <p>444</p>
    <p>555</p>
    <p>666</p>
    <p>777</p>
    <p>888</p>
    <p>999</p>
    <p>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわん</p>

  </div>

</section>

</body>
</html>

※ハンバーガーボタンはfont-awesomeを使っています。

■共通CSS

css/drawer_common.css

/* 共通スタイルシート */

body {
  margin: 0;
  padding: 0;
}
h1 {
  margin: 0;
  background-color: #EEE;
}
ul {
  margin: 0;
  padding-left: 0;
}
li {
  list-style: none;
}
li a {
  text-decoration: none;
  color: #FFF;
}
#header {
  background-color: #000;
  color: #FFF;
  padding: 5px;
  height: 60px;
}
#label {
  position: relative;
  background-color: #EEE;
  z-index: 10;
}
#toggle {
  /* ハンバーガーボタン */
  font-size: 32px;
  cursor: pointer;
  padding-left: 10px;
}
#open {
  /* チェックボックス非表示 */
  display: none;
}

/* 768pxで切替 */
@media screen and (min-width: 768px) {
  #toggle {
    display: none;
  }
  li a {
    color: #000;
  }
}

左から出てくるドロワーメニューのCSS

css/drawer_left.css

/* 左スライド用追加スタイルシート */
#menu {
  position: fixed;
  top: 48px;
  left: -340px; /* メニューのwidth分以上マイナスにして隠す */
  width: 300px; /* メニューのwidth */
  height: 100%;
  padding: 20px;
  transition-duration: .5s;
  background-color: #CCC;
}
/* :checked 擬似クラス＆隣接セレクタで#menuのプロパティ設定 */
#open:checked + #menu {
  left: 0;
}
/* 768pxで切替 */
@media screen and (min-width: 768px) {
  #menu {
    left:0;
    top: 70px;
    background-color: #EEE;
  }
  .content {
    margin-left: 340px;
  }
}

このCSSをサンプルHTMLに追加

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

CSSのみで左から出てくるドロワーメニューサンプル

◆右から出てくるドロワーメニューのCSS

css/drawer_right.css

/* 右スライド用追加スタイルシート */
#menu {
  position: fixed;
  top: 48px;
  right: -340px; /* メニューのwidth分以上マイナスにして隠す */
  width: 300px; /* メニューのwidth */
  height: 100%;
  padding: 20px;
  transition-duration: .5s;
  background-color: #CCC;
}
/* :checked 擬似クラス＆隣接セレクタで#menuのプロパティ設定 */
#open:checked + #menu {
  right: 0;
}
/* 768pxで切替 */
@media screen and (min-width: 768px) {
  #menu {
    right:0;
    top: 70px;
  }
  .content {
    margin-right: 340px;
  }
}

このCSSをサンプルHTMLに追加

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

CSSのみで右から出てくるドロワーメニューサンプル

◆上から出てくるドロワーメニューのCSS

css/drawer_top.css

/* 上スライド用追加スタイルシート */
h1 {
  width: 100%;
}
ul {
  padding: 20px;
}
li {
  display: block;
}
#menu {
  position: absolute;
  top: -120px;
  left: 0px;
  width: 100%;
  transition-duration: .5s;
  background-color: #CCC;
  z-index: 1;
}
/* :checked 擬似クラス＆隣接セレクタで#menuのプロパティ設定 */
#open:checked + #menu {
  top: 48px;
}
.content {
  position: relative;
  top: 0px;
}
/* 768pxで切替 */
@media screen and (min-width: 768px) {
  #menu {
    left:0;
    top: 60px;
    background-color: #CCC;
  }
  li {
    display: inline-block;
  }
  .content {
    top: 54px;
  }
}

このCSSをサンプルHTMLに追加

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

CSSのみで上から出てくるドロワーメニューサンプル