初めに
今回はスライドして出てくるサイドバーを作ってみます。
シュッシュッと動いて意外とかっこいいものになりました。
シュッシュッと動いて意外とかっこいいものになりました。
目次
目標
マウスオンするとスライドして表示されるサイドバーを作る。
サンプルコード
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;
transition: all 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{
transition: all 0.1s ease-in-out;
transform: translate(200px,0) ;
}
main{
display: block;
padding: 0 0 0 50px;
}
|
実行例-表示例
Chromeでアクセスしてみます。
マウスオンすると隠れていたメニューが表示されます。
マウスオンすると隠れていたメニューが表示されます。
ポイント！
- HTML側
- サイドバー要素の中にタブ要素(メニューを開くときの耳の部分)とメニュー要素を設定。
-
タブへのマウスオンでサイドバー全体を動かすため,
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側
- サイドバーは常に画面上に出しておきたいので、position:fixedを設定。
-
マウスオンしていないときには画面外の設置なので、
要素の幅分left要素をマイナスしておく。 - 開いてから戻るときの動きをtransitionで指定する。
-
マウスオンしたときの動作を:hoverで記述する。
横幅200pxの要素を200px左に設置しているので、
右に200px動かせば全体が表示される。
#sidebar{
display: block;
position: fixed;
top: 0;
left: -200px;;
width: 200px;
height: 100%;
z-index: 10;
transition: all 0.1s ease-in-out;
background-color: #AAAAFF;
}
#sidebar:hover{
transition: all 0.1s ease-in-out;
transform: translate(200px,0) ;
}
|
終わりに
シュッシュッ動いてかっこいい感じのサイドバーができました。
実験的に複数のタブを置いて複数のサイドバーを置いてみたんですが、
これはUI的に適切なのかちょっと自信が持てなかったです。
UIって難しいですね。
以上
ご使用は自己責任です。
実験的に複数のタブを置いて複数のサイドバーを置いてみたんですが、
これはUI的に適切なのかちょっと自信が持てなかったです。
UIって難しいですね。
以上
ご使用は自己責任です。
0 件のコメント:
コメントを投稿