2017/08/06

CSS備忘録 スライドして出てくるサイドバーを作る

初めに

今回はスライドして出てくるサイドバーを作ってみます。
シュッシュッと動いて意外とかっこいいものになりました。

目次

目標

マウスオンするとスライドして表示されるサイドバーを作る。

サンプルコード

sample.html

<!DOCTYPE html>
<html>
  <head>
    <meta content="IE=edge"
          http-equiv="X-UA-Compatible" />
    <link href="./samplecss.css"
          rel="stylesheet"
          type="text/css" />
    <title>sample</title>
  </head>
  <body>
    <div class="container">
      <div id="sidebar">
        <div for="sidebar"
             id="tab">
          <span>MENU</span>
        </div>
        <div id="menu">
          <ul id="list">
            <li class="item">
              <a href="./LinkA.html">リンクA</a>
            </li>
            <li class="item">
              <a href="./LinkB.html">リンクB</a>
            </li>
            <li class="item">
              <a href="./LinkC.html">リンクC</a>
            </li>
            <li class="item">
              <a href="./LinkD.html">リンクD</a>
            </li>
            <li class="item">
              <a href="./LinkE.html">リンクE</a>
            </li>
            <li class="item">
              <a href="./LinkF.html">リンクF</a>
            </li>
            <li class="item">
              <a href="./LinkG.html">リンクG</a>
            </li>
            <li class="item">
              <a href="./LinkH.html">リンクH</a>
            </li>
          </ul>
        </div>
      </div>
      <main>meinだよ</main>
    </div>
  </body>
</html>

samplecss.css

* {
  margin : 0;
  padding    : 0;
  box-sizing : border-box;
}
html{
  background-color: #FFAAAA;
}
a{
  text-decoration : none;
  color: #000000;
}
.container{
  max-width : 900px;
  margin    : 0 auto;
  position: relative;
}
#sidebar{
  display: block;
  position: fixed;
  top: 0;
  left: -200px;;
  width: 200px;
  height: 100%;
  z-index: 10;
  transitionall 0.1s ease-in-out;
  background-color: #AAAAFF;
}
#sidebar #tab{
  display: block;
  position: absolute;
  top: 0;
  left: 200px;
  height: 100px;
  width: 40px;
  padding-top: 20px;
  background-color: #AAFFAA;
  border-radius: 0 15px 15px 0;
}
#sidebar #tab span{
  display: block;
  transform: rotate(90deg);
  font-size: 25px;
}
#sidebar #menu{
  display: block;
  position: absolute;
  top: 0;
  left: 0px;
  height: 100%;
  width: 200px;
  background-color: #66AAAA;
}
#sidebar #list{
  list-style: none;
}
#sidebar #list .item{
  display: block;
  padding: 10px;
  width: 100%;
  height: 50px;
  font-size:30px;
}
#sidebar li:hover{
  background-color: #66EEEE
}
#sidebar:hover{
  transitionall 0.1s ease-in-out;
  transform: translate(200px,0) ;
}
main{
  display: block;
  padding: 0 0 0 50px;
}

実行例-表示例

Chromeでアクセスしてみます。
マウスオンすると隠れていたメニューが表示されます。

ポイント!

  • HTML側
    1. サイドバー要素の中にタブ要素(メニューを開くときの耳の部分)とメニュー要素を設定。
    2. タブへのマウスオンでサイドバー全体を動かすため,
      forで外側のサイドバー(#sidebar)を指定する。
          <div id="sidebar">
            <div for="sidebar"
                 id="tab">
              <span>MENU</span>
            </div>
            <div id="menu">
              <ul id="list">
                <li class="item">
          <a href="./LinkA.html">リンクA</a>
                </li>
                <li class="item">
                  <a href="./LinkB.html">リンクB</a>
                </li>
          ・
          ・
          ・
            </ul>
            </div>
          </div>
  • CSS側
    1. サイドバーは常に画面上に出しておきたいので、position:fixedを設定。
    2. マウスオンしていないときには画面外の設置なので、
      要素の幅分left要素をマイナスしておく。
    3. 開いてから戻るときの動きをtransitionで指定する。
    4. マウスオンしたときの動作を:hoverで記述する。
      横幅200pxの要素を200px左に設置しているので、
      右に200px動かせば全体が表示される。
  • #sidebar{
      display: block;
      position: fixed;
      top: 0;
      left: -200px;;
      width: 200px;
      height: 100%;
      z-index: 10;
      transitionall 0.1s ease-in-out;

      background-color: #AAAAFF;

    }
    #sidebar:hover{
      transitionall 0.1s ease-in-out;
      transform: translate(200px,0) ;
    }

終わりに

シュッシュッ動いてかっこいい感じのサイドバーができました。
実験的に複数のタブを置いて複数のサイドバーを置いてみたんですが、
これはUI的に適切なのかちょっと自信が持てなかったです。
UIって難しいですね。

以上
ご使用は自己責任です。

0 件のコメント:

コメントを投稿

AWSに手を出してフレームワークも使ってみたが・・・。

サイトを作り直しました。 AWS上に構築した Content created by AXY を作り直しました。 具体的にはbottle.pyを使ったpythonで構築したサイトからPHP7を使用したサイトに再構築しています。 特別何か問題点があったというわけで...