筆者運営している別のサイトをレスポンシブ対応の際に、スマホ版のナビゲーションを作りました。しかも純CSSで実現されています。
本章ではCSSのみでスマホ版ナビゲーション実現する方法を公開します。
もちろん、いつものようにオリジナルのソースコードを貼り付けます。コピペで利用しても構いませんので、ぜひご確認してみてください。
DEMOページ
以下、CSSのみでスマホ版ナビゲーションを実現するソースコード：
たくさんの読者からメールお問合せを頂いて、ソースコードの説明やコメントが少なくて読めない、分かりやすく書いた方がいいとアドバイスいたしました。本当に申し訳ございませんが、本ブログは技術メモを目的として作られたサイト、IT技術者以外の方々を対象外とさせていたいております。
ソースを読めない読者は、事前にある程度の基本知識を身に付けてから、本ブログの記事を読んでいただきます。
本章ではCSSのみでスマホ版ナビゲーション実現する方法を公開します。
もちろん、いつものようにオリジナルのソースコードを貼り付けます。コピペで利用しても構いませんので、ぜひご確認してみてください。
DEMOページ
以下、CSSのみでスマホ版ナビゲーションを実現するソースコード：
/*---- 注意：TODOコメントを各自対応してください----*/
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>CSSのみスマホ版ナビゲーションを実現する方法</title>
<link rel="stylesheet" href="../css/reset.css" media="all">
<style>
/* ------------------------------------------------ CSS共通変数定義（注意：一部のブラウザが未サポート） */
:root {
--view-width: 980px;/* サイトの幅 */
--base-color: #FFF;/* 背景色や余白など*/
--main-color: #0d70f3; /* メインカラー：印象色 */ /* 2577e3,1d53a4*/
--accent-color: blue;/* アクセントカラー:強調色 */
--color-from: #2FCDED;/* 色変化（開始色） */
--color-to: #1d53a4;/* 色変化（終了色） 0062B8*/
--border-color: #CCC;/* 枠の色（デフォルト） */
--border-color-on: #1d53a4;/* 枠の色(active、オン) 0062B8*/
--border-color-focus: #00f;
--txt-color: #222;/* 文字の色（デフォルト） */
--txt-color-on: #FFF;/* 文字の色（背景色付きの場合） */
--device-sp-width: 768px;/* スマホ幅 */
--device-tablet-width: 1024px;/* タブレート幅 */
--width-side-menu: 18%;
--width-main-content: 64%;
}
/* ------------------------------------------------ common */
html,body {
margin: 0;
padding: 0;
color: #333;
}
.Contents {
display: table;
width: 100%;
height: 100vh;
padding: 0;
margin: 0;
box-shadow: 0 0 50px 0 rgba(0,0,0,.8);
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-delay: .3s;
transition-delay: .3s;
-webkit-transition-duration: .5s;
transition-duration: .5s;
}
.Contents__inner {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.Contents__inner h1 {
margin: 0;
padding: 0;
font-size: 40px;
font-family: Futura, "Century Gothic", "helvetica neue", arial, sans-serif !important;
font-style: italic;
}
.Contents__inner p {
margin-top: 20px;
font-size: 20px;
}
.Contents__inner p span {
border-bottom: 1px solid #fff;
}
/* ------------------------------------------------ checkbox:trigger of drawer */
.DrawerNav__trigger {
display: none;
}
/* ------------------------------------------------ drawer menu */
.DrawerNav__menuList {
box-sizing: border-box;
position: fixed;
top: 0;
right: 0;
width: 300px;
height: 100%;
padding: 120px 0;
background: #222;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: .5s;
transition-duration: .5s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
-webkit-transform-origin: right center;
-ms-transform-origin: right center;
transform-origin: right center;
-webkit-transform: perspective(500px) rotateY(-90deg);
transform: perspective(500px) rotateY(-90deg);
opacity: 0;
}
.DrawerNav__menu {
text-align: center;
}
.DrawerNav__menu a {
display: block;
height: 50px;
line-height: 50px;
font-size: 14px;
-webkit-transition: all .8s;
transition: all .8s;
color: #FFF;
}
.DrawerNav__menu a:hover {
color: #1a1e24;
background: #fff;
}
/* ------------------------------------------------ menu button */
.DrawerNav {
position: fixed;
top: 40px;
right: 40px;
display: block;/*--------TODO 運用の際にここをdisplay: none;に変更ください----------*/
width: 40px;
height: 40px;
font-size: 10px;
text-align: center;
cursor: pointer;
z-index: 3;
color: var(--main-color);
}
@media screen and (max-width: 680px) {
.DrawerNav {
display: block;
}
}
.DrawerNav__bar {
position: absolute;
top: 0;
left: 0;
display: block;
width: 40px;
height: 3px;
-webkit-transition: all .5s;
transition: all .5s;
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;
background: blue;
background: var(--main-color);
}
.DrawerNav__bar.DrawerNav__bar--middle {
top: 15px;
opacity: 1;
}
.DrawerNav__bar.DrawerNav__bar--bottom {
top: 30px;
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
}
.DrawerNav__txt {
position: absolute;
bottom: -15px;
left: 0;
right: 0;
margin: auto;
-webkit-transition: all .5s;
transition: all .5s;
display: block;
visibility: visible;
opacity: 1;
font-weight: bolder;
font-size: 0.8rem;
}
.DrawerNav:hover .DrawerNav__bar {
background: blue;
background: var(--accent-color);
}
.DrawerNav:hover .DrawerNav__txt {
color: blue;
color: var(--accent-color);
}
.DrawerNav__colse {
position: fixed;
top: 0;
right: 300px;
width: 100%;
height: 100vh;
background: rgba(0,0,0,0);
cursor: url(../images/cross.svg),auto;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
visibility: hidden;
opacity: 0;
}
/* ------------------------------------------------ checked */
.DrawerNav__trigger:checked ~ .DrawerNav__menuList {
-webkit-transition-delay: .3s;
transition-delay: .3s;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
z-index: 2;
}
.DrawerNav__trigger:checked ~ .Contents {
-webkit-transition-delay: 0s;
transition-delay: 0s;
-webkit-transform: translateX(-300px);
-ms-transform: translateX(-300px);
transform: translateX(-300px);
}
.DrawerNav__trigger:checked ~ .DrawerNav .DrawerNav__txt {
visibility: hidden;
opacity: 0;
}
.DrawerNav__trigger:checked ~ .DrawerNav .DrawerNav__bar--top {
width: 56px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.DrawerNav__trigger:checked ~ .DrawerNav .DrawerNav__bar--middle {
opacity: 0;
}
.DrawerNav__trigger:checked ~ .DrawerNav .DrawerNav__bar--bottom {
width: 56px;
top: 40px;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.DrawerNav__trigger:checked ~ .DrawerNav__colse {
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-delay: .3s;
transition-delay: .3s;
background: rgba(0,0,0,.5);
visibility: visible;
opacity: 1;
z-index: 3;
}
</style>
</head>
<body>
<script>
</script>
<!-- ★引き出しメニュー Start -->
<input type="checkbox" class="DrawerNav__trigger" id="spnavi_checker">
<label class="DrawerNav" for="spnavi_checker">
<span class="DrawerNav__bar DrawerNav__bar--top"></span>
<span class="DrawerNav__bar DrawerNav__bar--middle"></span>
<span class="DrawerNav__bar DrawerNav__bar--bottom"></span>
<span class="DrawerNav__txt">MENU</span>
</label>
<label class="DrawerNav__colse" for="spnavi_checker"></label>
<nav class="DrawerNav__menuList">
<ul>
<li class="DrawerNav__menu"><a href="#">Side Menu Name</a></li>
<li class="DrawerNav__menu"><a href="#">Side Menu Name</a></li>
<li class="DrawerNav__menu"><a href="#">Side Menu Name</a></li>
<li class="DrawerNav__menu"><a href="#">Side Menu Name</a></li>
<li class="DrawerNav__menu"><a href="#">Side Menu Name</a></li>
</ul>
</nav>
<!-- //★引き出しメニュー END -->
<div class="Contents">
<div class="Contents__inner">
<h2>
技術三昧はエンジニア方々に役に立てる、一番便利な技術サイトを目指しています。
</2>
<p>スマホ版ナビゲーション： <span>CSS</span> only.</p>
<p>スマホ版ナビゲーション： <span>CSS</span> only.</p>
<p>スマホ版ナビゲーション： <span>CSS</span> only.</p>
<p>スマホ版ナビゲーション： <span>CSS</span> only.</p>
<p>スマホ版ナビゲーション： <span>CSS</span> only.</p>
<p>スマホ版ナビゲーション： <span>CSS</span> only.</p>
<p>スマホ版ナビゲーション： <span>CSS</span> only.</p>
</div>
</div>
</body>
</html>
たくさんの読者からメールお問合せを頂いて、ソースコードの説明やコメントが少なくて読めない、分かりやすく書いた方がいいとアドバイスいたしました。本当に申し訳ございませんが、本ブログは技術メモを目的として作られたサイト、IT技術者以外の方々を対象外とさせていたいております。
ソースを読めない読者は、事前にある程度の基本知識を身に付けてから、本ブログの記事を読んでいただきます。
最新のコメント @zanmai.net
aaad @2016年03月31日
» 助かりました。ありがとう。
tinghai @2015年02月24日
» インストールしたJDKのbinディレクトリに移動してから、コマンドを実…
zanmai @2015年01月30日
» 返信が大変遅れまして、すみません。…
zanmai @2015年01月30日
» 返信が大変遅れまして、すみません。…
iPhone6plus @2015年01月28日
» その同期するめーるの期間というところがでてきません。アカウント削除しか…
admin @2015年01月26日
» mysql起動失敗の場合、mysqld --standalone…
iphone6 plus @2014年11月03日
» 図で分かりやすい。助かりました。
ありがとう
iphone6 @2014年10月04日
» iphone6の設定も同じだね
asika @2014年09月25日
» 勉強になりました。ありがとう。
zanmai @2016年03月31日
» ①②③④の順で設定できるはず。…