Saetl.net

Simple And Easy TempLate

Lavalamp-like Fancy Menu Effectの使い方

  1. 下記ページの「DOWNLOAD」よりファイル1式をダウンロード。
  2. ダウンロードしたファイルを任意の場所にコピー。
    ファイル構成
  3. 動作させるファイル(サンプルではindex.html)にコードを記述。
    パスは上記ファイル構成の場合なので環境にあわせて変更>
    ・head部分にcssファイルを読み込ませるためのコードを記述。
    <head>
    <!--GoogleFontを使用するためのコード-->
    <link href='http://fonts.googleapis.com/css?family=Unica+One' rel='stylesheet' type='text/css'>
    <!--css部分を抜粋して作成したcssファイル-->
    <link rel="stylesheet" type="text/css" href="css/Lavalamp-like Fancy Menu Effect.css" />
    </head> 
    

    サンプルのcssコード(サンプルのcssは改変しています)

    /*ページ設定部分(style.cssなどで設定していれば削除する)*/
    body, ul, li, h1, h2, span {
    	margin: 0;
    	padding: 0;
    }
    body {
    	font: 75% Verdana, Arial;
    	color: #333;
    	background: #fff
    }
    #container {
    	width: 400px;
    	margin: 50px auto;
    }
    .menu {
    	font-family: "Unica One";
    	font-size: 2em;
    }
    /*ここまでページ設定部分*/
    
    
    /*ここからLavalamp-like Fancy Menu Effectの設定*/
    .nav {
    	text-align: center;
    	overflow: hidden;
    	margin: 2em auto;
    	width: 480px;
    	position: relative;
    }
    .nav a {
    	display: block;
    	position: relative;
    	float: left;
    	padding: 1em 0 2em;
    	width: 25%;
    	text-decoration: none;
    	color: #393939;
    	-webkit-transition: .7s;
    	-moz-transition: .7s;
    	-o-transition: .7s;
    	-ms-transition: .7s;
    	transition: .7s;
    }
    .nav a:hover {
    	color: #c6342e;
    }
    .effect {
    	position: absolute;
    	left: -12.5%;
    	-webkit-transition: 0.7s ease-in-out;
    	-moz-transition: 0.7s ease-in-out;
    	-o-transition: 0.7s ease-in-out;
    	-ms-transition: 0.7s ease-in-out;
    	transition: 0.7s ease-in-out;
    }
    .nav a:nth-child(1):hover ~ .effect {
    	left: 12.5%;
    }
    .nav a:nth-child(2):hover ~ .effect {
    	left: 37.5%;
    }
    .nav a:nth-child(3):hover ~ .effect {
    	left: 62.5%;
    }
    .nav a:nth-child(4):hover ~ .effect {
    	left: 87.5%;
    }
    /* ----- line example -----*/
    
    .ph-line-nav .effect {
    	width: 90px;
    	height: 2px;
    	bottom: 36px;
    	background: #c6342e;
    	box-shadow: 0 1px 0 white;
    	margin-left: -45px;
    }
    /* ----- dot example -----*/
    
    .ph-dot-nav:after {
    	content: "";
    	display: block;
    	position: absolute;
    	width: 100%;
    	height: 1px;
    	background: #c6342e;
    	bottom: 40px;
    }
    .ph-dot-nav a:after {
    	content: "";
    	position: absolute;
    	width: 4px;
    	height: 4px;
    	bottom: 38px;
    	left: 50%;
    	margin-left: -2px;
    	background: #c6342e;
    	border-radius: 100%;
    }
    .ph-dot-nav .effect {
    	width: 10px;
    	height: 10px;
    	bottom: 36px;
    	margin-left: -5px;
    	background: #c6342e;
    	border-radius: 100%;
    }
    /* ----- heart example -----*/
    
    .ph-heart-nav .effect, .ph-heart-nav a:after, .ph-heart-nav a:before {
    	background: url('../images/heart.png') no-repeat;
    }
    .ph-heart-nav .effect {
    	position: absolute;
    	bottom: 26px;
    	background-position: 0 0;
    	height: 8px;
    	width: 62px;
    	margin-left: -31px;
    }
    .ph-heart-nav a:before {
    	content: "";
    	display: block;
    	position: absolute;
    	left: 50%;
    	bottom: 20px;
    	background-position: -62px 0;
    	height: 20px;
    	width: 11px;
    	margin-left: -11px;
    }
    .ph-heart-nav a:after {
    	content: "";
    	display: block;
    	position: absolute;
    	left: 50%;
    	bottom: 20px;
    	z-index: 1;
    	background-position: -73px 0;
    	height: 20px;
    	width: 11px;
    }
    
    ・<body></body>内にコードを記述
    <div class="menu">
        <div class="ph-line-nav nav"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Gallery</a> <a href="#">Contact</a>
          <div class="effect"></div>
        </div>
        <div class="ph-dot-nav nav"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Gallery</a> <a href="#">Contact</a>
          <div class="effect"></div>
        </div>
        <div class="ph-heart-nav nav"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Gallery</a> <a href="#">Contact</a>
          <div class="effect"></div>
        </div>
      </div>
    

    サンプルのhtmlコード

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8" />
    <title>Lavalamp-like Fancy Menu Effect</title>
    <link href='http://fonts.googleapis.com/css?family=Unica+One' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="css/Lavalamp-like Fancy Menu Effect.css" />
    </head>
    
    <body>
    <div id="container">
      <div class="menu">
        <div class="ph-line-nav nav"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Gallery</a> <a href="#">Contact</a>
          <div class="effect"></div>
        </div>
        <div class="ph-dot-nav nav"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Gallery</a> <a href="#">Contact</a>
          <div class="effect"></div>
        </div>
        <div class="ph-heart-nav nav"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Gallery</a> <a href="#">Contact</a>
          <div class="effect"></div>
        </div>
      </div>
    </div>
    
    </body>
    </html>
    
  4. ファイル1式をサーバーにアップロードして設置完了。
    サンプル