Saetl.net

Simple And Easy TempLate

TinyDropdownの使い方

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

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

    /*ページ設定部分(style.cssなどで設定していれば削除する)*/
    * {
    	margin: 0;
    	padding: 0;
    }
    body {
    	background: #fff;
    }
    #container {
    	width: 600px;
    	margin: 20px auto;
    }
    a {
    	color: #333;
    	text-decoration: none;
    }
    a:hover {
    	color: #ff0000;
    	text-decoration: underline;
    }
    /*ここまでページ設定部分*/
    
    
    /*ここからTinyDropdownの設定*/
    .nav {
    	height: 36px; /*メニュー全体高さ*/
    	background: #96514d; /*メニュー全体背景色*/
    	color: #fff; /*メニュー全体文字色*/
    	text-shadow: 1px 1px #888;
    	z-index: 1000
    }
    .menu a {
    	float: left;
    	color: #eee; /*リンクの文字色*/
    	text-decoration: none;
    	width: 120px;
    	height: 28px;
    	padding-top: 8px
    }
    .menu span {
    	float: left;
    	color: #eee; /*spanの文字色*/
    	text-decoration: none;
    	width: 120px;
    	height: 28px;
    	padding-top: 8px
    }
    .menu a:hover {
    	color: #bedb00 /*マウスをのせた時の文字色*/
    }
    .menu {
    	list-style: none;
    	font: 16px Arial, Verdana; /*文字設定*/
    	text-align: center;
    	width: 600px; /*メニューの全体幅*/
    	margin: 0 auto
    }
    .menu li {
    	position: relative;
    	float: left;
    	width: 120px;
    	z-index: 1000
    }
    .menu ul {
    	display: none;
    	position: absolute;
    	font: normal 13px Arial, Verdana; /*下に出てくるメニューのフォント*/
    	top: 36px;
    	left: 0;
    	background: #96514d; /*下に出てくるメニューの背景色*/
    	display: none;
    	list-style: none
    }
    .menu ul li {
    	float: none;
    	border-top: 1px solid #ccc;
    	width: 120px
    }
    .menu ul li a, li.menuhover li a, li.menuhover li.menuhover li a {
    	float: none;
    	display: block;
    	background: none;
    	height: 22px;
    	padding-top: 5px
    }
    .menu ul li a:hover, li.menuhover li a:hover, li.menuhover li.menuhover li a:hover {
    	background: #936d6b; /*下に出てくるメニューのマウスをのせた時の背景色*/
    	color: #bedb00 /*下に出てくるメニューのマウスをのせた時の文字色*/
    }
    .menu ul li span, li.menuhover li span, li.menuhover li.menuhover li span {
    	float: none;
    	display: block;
    	background: none;
    	height: 22px;
    	padding-top: 5px
    }
    .menu ul ul {
    	left: 120px;
    	top: 0
    }
    .menu li.submenu {
    	font-weight: bold
    }
    .menu li.noborder {
    	border-top: none
    }
    #info {
    	width: 180px; /*テキストのボックス幅*/
    	background: #fdeff2 /*テキストの背景色*/
    }
    #info li {
    	width: 160px; /*テキストの幅*/
    	border-top: none;
    	padding: 8px 10px;
    	color: #666; /*テキストの文字色*/
    	text-shadow: 1px 1px #fff;
    	text-align: left
    }
    
    ・</body>の直前にjsファイルを読み込ませるためのコードを記述。
    <!--ダウンロードしたファイル-->
    <script type="text/javascript" src="js/tinydropdown.js"></script> 
    <!--javascript追記-->
    <script type="text/javascript">
    var dropdown=new TINY.dropdown.init("dropdown", {id:'menu', active:'menuhover'});
    </script> 
    </body> 
    
    ・<body></body>内にコードを記述
      <div class="nav">
        <ul id="menu" class="menu">
          <li class="nodiv"><a href="#">Home</a></li>
          <li><a href="#">categories1</a>
            <ul>
              <li><a href="#">categories1_1</a></li>
              <li><a href="#">categories1_2</a></li>
              <li class="submenu"> <a href="#">categories1_3</a>
                <ul>
                  <li class="noborder"><a href="#">categories1_3a</a></li>
                  <li><a href="#">categories1_3b</a></li>
                  <li><a href="#">categories1_3c</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><span>categories2</span>
            <ul>
              <li><a href="#">categories2_1</a></li>
              <li><a href="#">categories2_2</a></li>
              <li><a href="#">categories2_3</a></li>
              <li class="submenu"> <span>categories2_4</span>
                <ul>
                  <li class="noborder"><a href="#">categories2_4a</a></li>
                  <li><a href="#">categories2_4b</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="#">categories3</a>
            <ul>
              <li><a href="#">categories3_1</a></li>
              <li><a href="#">categories3_2</a></li>
              <li><a href="#">categories3_3</a></li>
            </ul>
          </li>
          <li><a href="#">categories4</a>
            <ul id="info">
              <li>
                <p>text text text text text text text text text text text texttext text text text text</p>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    

    サンプルのhtmlコード

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8" />
    <title>TinyDropdown</title>
    <link rel="stylesheet" type="text/css" href="css/tinydropdown.css" />
    </head>
    
    <body>
    <div id="container">
      <div class="nav">
        <ul id="menu" class="menu">
          <li class="nodiv"><a href="#">Home</a></li>
          <li><a href="#">categories1</a>
            <ul>
              <li><a href="#">categories1_1</a></li>
              <li><a href="#">categories1_2</a></li>
              <li class="submenu"> <a href="#">categories1_3</a>
                <ul>
                  <li class="noborder"><a href="#">categories1_3a</a></li>
                  <li><a href="#">categories1_3b</a></li>
                  <li><a href="#">categories1_3c</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><span>categories2</span>
            <ul>
              <li><a href="#">categories2_1</a></li>
              <li><a href="#">categories2_2</a></li>
              <li><a href="#">categories2_3</a></li>
              <li class="submenu"> <span>categories2_4</span>
                <ul>
                  <li class="noborder"><a href="#">categories2_4a</a></li>
                  <li><a href="#">categories2_4b</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="#">categories3</a>
            <ul>
              <li><a href="#">categories3_1</a></li>
              <li><a href="#">categories3_2</a></li>
              <li><a href="#">categories3_3</a></li>
            </ul>
          </li>
          <li><a href="#">categories4</a>
            <ul id="info">
              <li>
                <p>text text text text text text text text text text text texttext text text text text</p>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    
    <script type="text/javascript" src="js/tinydropdown.js"></script> 
    <script type="text/javascript">
    var dropdown=new TINY.dropdown.init("dropdown", {id:'menu', active:'menuhover'});
    </script>
    </body>
    </html>
  4. ファイル1式をサーバーにアップロードして設置完了。
    サンプル