Saetl.net

Simple And Easy TempLate

CSS Menu from sideの使い方

  1. 下記ページを参考に各ファイル1式を作成。
  2. 作成したファイルを任意の場所にコピー。
    ファイル構成
  3. 動作させるファイル(サンプルではindex.html)にコードを記述。
    パスは上記ファイル構成の場合なので環境にあわせて変更>
    ・head部分にcssファイルを読み込ませるためのコードを記述。
    <head>
    <!--作成したファイル-->
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head> 
    

    サンプルのcssコード

    .menu-outer:hover ~ .menu-close {
    	margin-right: -100px;
    }
    .menu-outer:hover .bar {
    	background: rgba(100,200,240,.9);
    }
    .menu-inner ul {
    	top: 50%;
    	-webkit-transform: translateY(-50%);
    	-moz-transform: translateY(-50%);
    	-ms-transform: translateY(-50%);
    	-o-transform: translateY(-50%);
    	transform: translateY(-50%);
    }
    html, body {
    	background: rgba(20,20,20,1);
    }
    .menu-outer {
    	overflow: hidden;
    	position: fixed;
    	top: 0;
    	font-family: 'Montserrat', serif;
    	z-index: 998;
    	width: 100%;
    	left: 100%;
    	margin-left: -100px;
    	height: 200%;
    	background: rgba(100,200,240,.9);
    	-webkit-transition: all ease .5s;
    	-moz-transition: all ease .5s;
    	-ms-transition: all ease .5s;
    	-o-transition: all ease .5s;
    	transition: all ease .5s;
    	-webkit-transform-origin: top left;
    	-moz-transform-origin: top left;
    	-ms-transform-origin: top left;
    	-o-transform-origin: top left;
    	transform-origin: top left;
    	-webkit-transform: rotate(-45deg);
    	-moz-transform: rotate(-45deg);
    	-ms-transform: rotate(-45deg);
    	-o-transform: rotate(-45deg);
    	transform: rotate(-45deg);
    }
    .menu-outer:hover {
    	background: rgba(100,200,240,.98);
    	left: 0;
    	margin-left: 0;
    	-webkit-transform: rotate(0deg);
    	-moz-transform: rotate(0deg);
    	-ms-transform: rotate(0deg);
    	-o-transform: rotate(0deg);
    	transform: rotate(0deg);
    }
    .menu-icon {
    	z-index: 999;
    	position: absolute;
    	top: 58px;
    	left: 15px;
    	width: 30px;
    	pointer-events: none;
    	-webkit-transform: rotate(45deg);
    	-moz-transform: rotate(45deg);
    	-ms-transform: rotate(45deg);
    	-o-transform: rotate(45deg);
    	transform: rotate(45deg);
    	-webkit-transition: all ease .5s;
    	-moz-transition: all ease .5s;
    	-ms-transition: all ease .5s;
    	-o-transition: all ease .5s;
    	transition: all ease .5s;
    }
    .menu-icon .bar {
    	background: rgba(250,250,250,1);
    	width: 100%;
    	height: 5px;
    	margin: 0 0 5px;
    	-webkit-transition: all ease .5s;
    	-moz-transition: all ease .5s;
    	-ms-transition: all ease .5s;
    	-o-transition: all ease .5s;
    	transition: all ease .5s;
    }
    .menu-outer:hover > .menu-icon {
    	opacity: 0;
    }
    nav ul {
    	position: absolute;
    	width: 100%;
    	padding: 0;
    	left: 10%;
    	-webkit-transition: all ease .5s;
    	-moz-transition: all ease .5s;
    	-ms-transition: all ease .5s;
    	-o-transition: all ease .5s;
    	transition: all ease .5s;
    }
    .menu-outer:hover > nav ul {
    	left: 0;
    }
    nav li {
    	list-style: none;
    	text-align: center;
    	text-transform: uppercase;
    }
    nav li a {
    	font-size: 2em;
    	color: rgba(255,255,255,.8);
    	text-decoration: none;
    	margin: 0 auto;
    	padding: 20px;
    	display: block;
    	-webkit-transition: all ease .5s;
    	-moz-transition: all ease .5s;
    	-ms-transition: all ease .5s;
    	-o-transition: all ease .5s;
    	transition: all ease .5s;
    }
    nav li a:hover {
    	color: rgba(255,255,255,1);
    }
    
    @media screen and (max-width: 600px), screen and (max-height: 600px) {
    nav ul {
    	font-size: .75em;
    }
    nav ul a {
    	padding: 10px;
    }
    }
    .menu-close {
    	z-index: 9999;
    	position: fixed;
    	top: 0;
    	right: 100%;
    	width: 200px;
    	height: 200px;
    	background: rgba(250,130,70,1);
    	cursor: pointer;
    	-webkit-transition: all ease .5s;
    	-moz-transition: all ease .5s;
    	-ms-transition: all ease .5s;
    	-o-transition: all ease .5s;
    	transition: all ease .5s;
    	-webkit-transform-origin: top right;
    	-moz-transform-origin: top right;
    	-ms-transform-origin: top right;
    	-o-transform-origin: top right;
    	transform-origin: top right;
    	-webkit-transform: rotate(45deg);
    	-moz-transform: rotate(45deg);
    	-ms-transform: rotate(45deg);
    	-o-transform: rotate(45deg);
    	transform: rotate(45deg);
    }
    .menu-close .menu-icon {
    	right: 15px;
    	left: auto;
    	top: 68px;
    	-webkit-transform: rotate(-45deg);
    	-moz-transform: rotate(-45deg);
    	-ms-transform: rotate(-45deg);
    	-o-transform: rotate(-45deg);
    	transform: rotate(-45deg);
    }
    .menu-close .bar {
    	background: rgba(250,250,250,1);
    	width: 100%;
    	height: 5px;
    	position: absolute;
    	-webkit-transform-origin: center;
    	-moz-transform-origin: center;
    	-ms-transform-origin: center;
    	-o-transform-origin: center;
    	transform-origin: center;
    }
    .menu-close .bar:first-child {
    	-webkit-transform: rotate(45deg);
    	-moz-transform: rotate(45deg);
    	-ms-transform: rotate(45deg);
    	-o-transform: rotate(45deg);
    	transform: rotate(45deg);
    }
    .menu-close .bar:last-child {
    	-webkit-transform: rotate(-45deg);
    	-moz-transform: rotate(-45deg);
    	-ms-transform: rotate(-45deg);
    	-o-transform: rotate(-45deg);
    	transform: rotate(-45deg);
    }
    
    ・<body></body>内にコードを記述
    <div class="menu-outer">
      <div class="menu-icon">
        <div class="bar"> </div>
        <div class="bar"> </div>
        <div class="bar"> </div>
      </div>
      <nav>
        <ul>
          <li><a href="#">Articles</a></li>
          <li><a href="#">Projects</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>
    <a class="menu-close" onClick="return true">
    <div class="menu-icon">
      <div class="bar"> </div>
      <div class="bar"> </div>
    </div>
    </a>
    

    サンプルのhtmlコード

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta charset="utf-8" />
    <title>CSS Menu from side</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
    <![endif]-->
    </head>
    
    <body>
    <div class="menu-outer">
      <div class="menu-icon">
        <div class="bar"> </div>
        <div class="bar"> </div>
        <div class="bar"> </div>
      </div>
      <nav>
        <ul>
          <li><a href="#">Articles</a></li>
          <li><a href="#">Projects</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>
    <a class="menu-close" onClick="return true">
    <div class="menu-icon">
      <div class="bar"> </div>
      <div class="bar"> </div>
    </div>
    </a>
    
    </body>
    </html>
  4. ファイル1式をサーバーにアップロードして設置完了。
    サンプル