Saetl.net

Simple And Easy TempLate

Pure CSS Fish Eye Menuの使い方

  1. 下記ページの 「Download Now!」 よりファイル1式をダウンロード。
  2. ダウンロードしたファイルを任意の場所にコピー。
    ファイル構成
  3. 動作させるファイル(サンプルではindex.html)にコードを記述。
    パスは上記ファイル構成の場合なので環境にあわせて変更>
    ・head部分にcssファイルを読み込ませるためのコードを記述。
    <head>
    <!--css部分を外部化したファイル-->
    <link rel="stylesheet" type="text/css" href="css/Pure CSS Fish Eye Menu.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: 500px;
    	margin: 50px auto;
    }
    /*ここまでページ設定部分*/
    
    
    /*ここからPure CSS Fish Eye Menuの設定*/
    .expand-down {
    	font-family: Arial, Helvetica, sans-serif;
    	line-height: normal;
    	margin-top: 20px;
    	height: 150px;
    	width: 500px;
    	background: url(images/macosx-style-background.png) no-repeat;
    	margin-bottom: 30px;
    }
    .expand-down * {
    	margin: 0;
    	padding: 0;
    }
    .expand-down ul {
    	padding-top: 10px;
    	margin-left: 10px;
    }
    .expand-down ul li {
    	float: left;
    	list-style-type: none;
    }
    .expand-down ul li a {
    	text-decoration: none;
    }
    .expand-down ul li a img {
    	width: 50px;
    	height: 50px;
    	border: none;
    }
    .expand-down ul li a span {
    	display: none;
    }
    .expand-down ul li:hover a span {
    	display: block;
    	font-size: 14px;
    	text-align: center;
    	color: #333;
    }
    .expand-down ul li:hover a img {
    	width: 100px;
    	height: 100px;
    }
    .expand-down ul li:hover + li a img {
    	width: 60px;
    	height: 60px;
    }
    .expand-down ul li:hover + li + li a img {
    	width: 55px;
    	height: 55px;
    }
    .expand-up {
    	font-family: Arial, Helvetica, sans-serif;
    	line-height: normal;
    	height: 150px;
    	width: 500px;
    	background: url(images/macosx-style-background.png) no-repeat;
    	overflow: visible;
    	margin-bottom: 30px;
    }
    .expand-up * {
    	margin: 0;
    	padding: 0;
    }
    .expand-up ul {
    	margin-left: 10px;
    }
    .expand-up ul li {
    	float: left;
    	list-style-type: none;
    	padding-top: 65px;
    	margin-top: 25px;
    }
    .expand-up ul li a {
    	text-decoration: none;
    }
    .expand-up ul li a img {
    	width: 50px;
    	height: 50px;
    	border: none;
    }
    .expand-up ul li a span {
    	display: none;
    	font-size: 14px;
    	text-align: center;
    	color: #333;
    }
    .expand-up ul li:hover a span {
    	display: block;
    	margin-top: -65px;
    }
    .expand-up ul li:hover a img {
    	width: 100px;
    	height: 100px;
    }
    .expand-up ul li:hover + li a img {
    	width: 60px;
    	height: 60px;
    	margin-top: -10px;
    }
    .expand-up ul li:hover + li + li a img {
    	width: 55px;
    	height: 55px;
    	margin-top: -5px;
    
    ・<body></body>内にコードを記述
    <div class="expand-down">
        <ul>
          <li> <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Valid CSS" rel="nofollow" target="_blank"> <img src="images/w3c-valid-css-trans.png" alt="Valid CSS" title="Valid CSS" /> <span>Valid CSS</span> </a> </li>
          <li> <a href="http://validator.w3.org/check/referer" title="Valid XHtml" rel="nofollow" target="_blank"> <img src="images/w3c-valid-xhtml-trans.png" alt="Valid XHtml" title="Valid XHtml" /> <span>Valid XHTML</span> </a> </li>
          <li> <a href="http://www.opera.com/download/" title="Opera" rel="nofollow" target="_blank"> <img src="images/opera-trans.png" alt="Opera" title="Opera" /> <span>Opera</span> </a> </li>
          <li> <a href="http://www.apple.com/safari/download/" title="Safari" rel="nofollow" target="_blank"> <img src="images/safari-trans.png" alt="Safari" title="Safari" /> <span>Safari</span> </a> </li>
          <li> <a href="http://www.mozilla.com/en-US/firefox/" title="Firefox" rel="nofollow" target="_blank"> <img src="images/firefox-trans.png" alt="Firefox" title="Firefox" /> <span>Firefox</span> </a> </li>
          <li> <a href="http://www.google.com/chrome" title="Google Chrome" rel="nofollow" target="_blank"> <img src="images/google-chrome-trans.png" alt="Google Chrome" title="Google Chrome" /> <span>Google Chrome</span> </a> </li>
          <li> <a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx" title="Internet Explorer" rel="nofollow" target="_blank"> <img src="images/ie-trans.png" alt="Internet Explorer" title="Internet Explorer" /> <span>Internet Explorer</span> </a> </li>
          <li> <a href="http://www.konqueror.org/download/" title="Konqueror" rel="nofollow" target="_blank"> <img src="images/konqueror-trans.png" alt="Konqueror" title="Konqueror" /> <span>Konqueror</span> </a> </li>
        </ul>
      </div>
      <div class="expand-up">
        <ul>
          <li> <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Valid CSS" rel="nofollow" target="_blank"> <span>Valid CSS</span> <img src="images/w3c-valid-css-trans.png" alt="Valid CSS" title="Valid CSS" /> </a> </li>
          <li> <a href="http://validator.w3.org/check/referer" title="Valid XHtml" rel="nofollow" target="_blank"> <span>Valid XHTML</span> <img src="images/w3c-valid-xhtml-trans.png" alt="Valid XHtml" title="Valid XHtml" /> </a> </li>
          <li> <a href="http://www.opera.com/download/" title="Opera" rel="nofollow" target="_blank"> <span>Opera</span> <img src="images/opera-trans.png" alt="Opera" title="Opera" /> </a> </li>
          <li> <a href="http://www.apple.com/safari/download/" title="Safari" rel="nofollow" target="_blank"> <span>Safari</span> <img src="images/safari-trans.png" alt="Safari" title="Safari" /> </a> </li>
          <li> <a href="http://www.mozilla.com/en-US/firefox/" title="Firefox" rel="nofollow" target="_blank"> <span>Firefox</span> <img src="images/firefox-trans.png" alt="Firefox" title="Firefox" /> </a> </li>
          <li> <a href="http://www.google.com/chrome" title="Google Chrome" rel="nofollow" target="_blank"> <span>Google Chrome</span> <img src="images/google-chrome-trans.png" alt="Google Chrome" title="Google Chrome" /> </a> </li>
          <li> <a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx" title="Internet Explorer" rel="nofollow" target="_blank"> <span>Internet Explorer</span> <img src="images/ie-trans.png" alt="Internet Explorer" title="Internet Explorer" /> </a> </li>
          <li> <a href="http://www.konqueror.org/download/" title="Konqueror" rel="nofollow" target="_blank"> <span>Konqueror</span> <img src="images/konqueror-trans.png" alt="Konqueror" title="Konqueror" /> </a> </li>
        </ul>
      </div>
    

    サンプルのhtmlコード

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8" />
    <title>Pure CSS Fish Eye Menu</title>
    <link rel="stylesheet" type="text/css" href="css/Pure CSS Fish Eye Menu.css" />
    </head>
    
    <body>
    <div id="container">
      <div class="expand-down">
        <ul>
          <li> <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Valid CSS" rel="nofollow" target="_blank"> <img src="images/w3c-valid-css-trans.png" alt="Valid CSS" title="Valid CSS" /> <span>Valid CSS</span> </a> </li>
          <li> <a href="http://validator.w3.org/check/referer" title="Valid XHtml" rel="nofollow" target="_blank"> <img src="images/w3c-valid-xhtml-trans.png" alt="Valid XHtml" title="Valid XHtml" /> <span>Valid XHTML</span> </a> </li>
          <li> <a href="http://www.opera.com/download/" title="Opera" rel="nofollow" target="_blank"> <img src="images/opera-trans.png" alt="Opera" title="Opera" /> <span>Opera</span> </a> </li>
          <li> <a href="http://www.apple.com/safari/download/" title="Safari" rel="nofollow" target="_blank"> <img src="images/safari-trans.png" alt="Safari" title="Safari" /> <span>Safari</span> </a> </li>
          <li> <a href="http://www.mozilla.com/en-US/firefox/" title="Firefox" rel="nofollow" target="_blank"> <img src="images/firefox-trans.png" alt="Firefox" title="Firefox" /> <span>Firefox</span> </a> </li>
          <li> <a href="http://www.google.com/chrome" title="Google Chrome" rel="nofollow" target="_blank"> <img src="images/google-chrome-trans.png" alt="Google Chrome" title="Google Chrome" /> <span>Google Chrome</span> </a> </li>
          <li> <a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx" title="Internet Explorer" rel="nofollow" target="_blank"> <img src="images/ie-trans.png" alt="Internet Explorer" title="Internet Explorer" /> <span>Internet Explorer</span> </a> </li>
          <li> <a href="http://www.konqueror.org/download/" title="Konqueror" rel="nofollow" target="_blank"> <img src="images/konqueror-trans.png" alt="Konqueror" title="Konqueror" /> <span>Konqueror</span> </a> </li>
        </ul>
      </div>
      <div class="expand-up">
        <ul>
          <li> <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Valid CSS" rel="nofollow" target="_blank"> <span>Valid CSS</span> <img src="images/w3c-valid-css-trans.png" alt="Valid CSS" title="Valid CSS" /> </a> </li>
          <li> <a href="http://validator.w3.org/check/referer" title="Valid XHtml" rel="nofollow" target="_blank"> <span>Valid XHTML</span> <img src="images/w3c-valid-xhtml-trans.png" alt="Valid XHtml" title="Valid XHtml" /> </a> </li>
          <li> <a href="http://www.opera.com/download/" title="Opera" rel="nofollow" target="_blank"> <span>Opera</span> <img src="images/opera-trans.png" alt="Opera" title="Opera" /> </a> </li>
          <li> <a href="http://www.apple.com/safari/download/" title="Safari" rel="nofollow" target="_blank"> <span>Safari</span> <img src="images/safari-trans.png" alt="Safari" title="Safari" /> </a> </li>
          <li> <a href="http://www.mozilla.com/en-US/firefox/" title="Firefox" rel="nofollow" target="_blank"> <span>Firefox</span> <img src="images/firefox-trans.png" alt="Firefox" title="Firefox" /> </a> </li>
          <li> <a href="http://www.google.com/chrome" title="Google Chrome" rel="nofollow" target="_blank"> <span>Google Chrome</span> <img src="images/google-chrome-trans.png" alt="Google Chrome" title="Google Chrome" /> </a> </li>
          <li> <a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx" title="Internet Explorer" rel="nofollow" target="_blank"> <span>Internet Explorer</span> <img src="images/ie-trans.png" alt="Internet Explorer" title="Internet Explorer" /> </a> </li>
          <li> <a href="http://www.konqueror.org/download/" title="Konqueror" rel="nofollow" target="_blank"> <span>Konqueror</span> <img src="images/konqueror-trans.png" alt="Konqueror" title="Konqueror" /> </a> </li>
        </ul>
      </div>
    </div>
    
    </body>
    </html>
  4. ファイル1式をサーバーにアップロードして設置完了。
    サンプル