Saetl.net

Simple And Easy TempLate

Vertical Mega Menuの使い方

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

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

    /*ページ設定部分(style.cssなどで設定していれば削除する)*/
    * {
    	margin: 0;
    	padding: 0;
    }
    body {
    	background: #fff;
    	font-family: Arial;
    }
    #container {
    	width: 850px;
    	margin: 20px auto;
    }
    a {
    	color: #333;
    	text-decoration: none;
    }
    a:hover {
    	color: #ff0000;
    	text-decoration: underline;
    }
    ul {
    	list-style: none;
    }
    /*ここまでページ設定部分*/
    
    
    /*ここからVertical Mega Menuの設定*/
    .demo-container {
    	padding: 20px 0;
    	width: 250px; /*メニュー幅*/
    	float: left;
    }
    .mega-menu .menu {
    	line-height: 16px; /*1行の高さ*/
    	background: #16160e; /*背景色*/
    	filter: Alpha(opacity=90); /*要素の透明度 (ie)*/
    	opacity: 0.9; /*要素の透明度*/
    	position: relative; /* Required */
    }
    .mega-menu .menu li a {
    	display: block;
    	color: #fff; /*文字色*/
    	padding: 12px;
    	text-decoration: none;
    }
    .mega-menu .menu li a:hover, .mega-menu .menu li.mega-hover a {
    	background: #2d2d1d; /*マウスをのせた時の色*/
    	filter: Alpha(opacity=90);
    	opacity: 0.9;
    }
    .mega-menu .menu li a.dc-mega {
    	position: relative;
    }
    /* Add arrow icon to parent links */
    .mega-menu .menu li a .dc-mega-icon {
    	display: block;
    	position: absolute;
    	top: 14px;
    	right: 15px;
    	width: 6px;
    	height: 8px;
    	background: url(../images/arrow_right.png) no-repeat -6px 0;
    }
    .mega-menu .menu li a:hover .dc-mega-icon, .mega-menu .menu li.mega-hover a .dc-mega-icon {
    	background-position: 0 0;
    }
    /* Mega menu container */
    .mega-menu .menu li .sub-container {
    	position: absolute; /* Required */
    	overflow: hidden;
    	background: url(../images/bg_menu.png) no-repeat 100% 100%; /* Add the drop shadow */
    	padding: 0 13px 17px 0; /* Padding for drop shadow */
    }
    .mega-menu .menu li .sub-container .sub {
    	border: none;
    	padding: 15px 15px 5px 15px;
    	background: #fff url(../images/bg_grad_top.png) repeat-x 0 0;
    	border-top: 1px solid #ccc;
    	border-right: 1px solid #bbb;
    	border-bottom: 1px solid #bbb;
    	border-left: 1px solid #ccc;
    }
    .mega-menu .menu li .sub .row {
    	width: 100%;
    	overflow: hidden; /* Clear floats */
    }
    .mega-menu .menu li .sub li {
    	float: none;
    	width: 160px; /*サブメニューの幅*/
    	font-size: 1em; /*サブメニューの文字サイズ*/
    	font-weight: normal;
    }
    .mega-menu .menu li .sub li.mega-hdr {
    	float: left; /* Required */
    	margin: 0 5px 10px 5px;
    }
    .mega-menu .menu li .sub a, .mega-menu .menu.left li .sub a {
    	background: none;
    	border: none;
    	text-shadow: none;
    	float: none;
    	color: #000; /*サブメニューの文字色*/
    	display: block;
    	text-decoration: none;
    	font-size: 0.9em; /*サブメニューの文字サイズ*/
    	margin-bottom: 0;
    }
    .mega-menu .menu li .sub li.mega-hdr a.mega-hdr-a {
    	background: url(../images/bg_nav.png) repeat-x 0 -40px;
    	padding: 5px;
    	margin-bottom: 5px;
    	text-transform: uppercase;
    	font-weight: bold;
    	color: #fff; /*サブメニューの文字色*/
    	text-align: center;
    }
    .mega-menu .menu li .sub li.mega-hdr a.mega-hdr-a:hover {
    	color: #000;
    	text-shadow: none;
    }
    .mega-menu .menu .sub li.mega-hdr li {
    	margin-bottom: 3px;
    }
    .mega-menu .menu .sub li a {
    	padding: 3px 3px 3px 15px;
    	background: url(../images/bullet.png) no-repeat 3px 8px;
    	font-weight: normal;
    	text-transform: capitalize;
    	font-size: 12px;
    }
    .mega-menu .menu .sub li a:hover {
    	color: #fff;
    	background: #000 url(../images/bullet_white.png) no-repeat 5px 8px;
    }
    .mega-menu .menu .sub ul li {
    	padding-right: 0;
    }
    /* Custom mega menu styling */
    .mega-menu .menu li#menu-item-1 .sub .row {
    	padding: 10px 10px 0 40px;
    	margin-bottom: 10px;
    	border: 1px solid #ccc;
    	background: url(../images/atype.png) no-repeat 0 center;
    }
    .mega-menu .menu li#menu-item-1 .sub .row.last {
    	background: url(../images/btype.png) no-repeat 0 0;
    }
    .mega-menu .menu li#menu-item-1 .sub li.mega-hdr {
    	padding: 75px 0 0;
    }
    li#menu-item-4.mega-hdr {
    	background: url(../images/1.jpg) no-repeat center 0;
    }
    li#menu-item-5.mega-hdr {
    	background: url(../images/2.jpg) no-repeat center 0;
    }
    li#menu-item-6.mega-hdr {
    	background: url(../images/3.jpg) no-repeat center 0;
    }
    li#menu-item-7.mega-hdr {
    	background: url(../images/4.jpg) no-repeat center 0;
    }
    li#menu-item-8.mega-hdr {
    	background: url(../images/5.jpg) no-repeat center 0;
    }
    li#menu-item-9.mega-hdr {
    	background: url(../images/6.jpg) no-repeat center 0;
    }
    li#menu-item-3 li.mega-hdr {
    	padding: 120px 0 0;
    }
    li#menu-item-15.mega-hdr {
    	background: url(../images/10.jpg) no-repeat center 0;
    }
    li#menu-item-16.mega-hdr {
    	background: url(../images/11.jpg) no-repeat center 0;
    }
    li#menu-item-17.mega-hdr {
    	background: url(../images/12.jpg) no-repeat center 0;
    }
    li#menu-item-18.mega-hdr {
    	background: url(../images/13.jpg) no-repeat center 0;
    }
    /* Styling for menu items with only 2 levels */
    .mega-menu .menu li .sub-container.non-mega .sub {
    	padding: 10px;
    	background: #fff;
    }
    .mega-menu .menu li .sub-container.non-mega li {
    	padding: 0;
    	margin: 0;
    	width: 150px;
    	float: none;
    }
    /* Custom styling for 2 levels */
    .mega-menu .menu li#menu-item-2 .sub-container.non-mega .sub {
    	width: 480px;
    	height: 180px;
    	padding: 20px 10px 10px;
    }
    .mega-menu .menu li#menu-item-2 .sub-container.non-mega li {
    	float: left;
    }
    li#menu-item-12, li#menu-item-13, li#menu-item-14 {
    	padding: 150px 0 0;
    	margin-right: 10px;
    }
    li#menu-item-12 {
    	background: url(../images/7.jpg) no-repeat center 0;
    }
    li#menu-item-13 {
    	background: url(../images/8.jpg) no-repeat center 0;
    }
    li#menu-item-14 {
    	background: url(../images/9.jpg) no-repeat center 0;
    }
    
    ・</body>の直前にjsファイルを読み込ませるためのコードを記述。
    <!--googleのCDN(ネットワーク経由でコンテンツを提供するサービス)よりjqueryをロード-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <!--ダウンロードしたファイル-->
    <script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script>
    <script type='text/javascript' src='js/jquery.dcverticalmegamenu.1.3.js'></script>
    <!--javascript追記-->
    <script type="text/javascript">
    $(document).ready(function($){
    
    	$('#mega-1').dcVerticalMegaMenu({
    		rowItems: '3',
    		speed: 'fast',
    		effect: 'show',
    		direction: 'right'
    	});
    	$('#mega-2').dcVerticalMegaMenu({
    		rowItems: '3',
    		speed: 'slow',
    		effect: 'fade',
    		direction: 'left'
    	});
    	$('#mega-3').dcVerticalMegaMenu({
    		rowItems: '4',
    		speed: 'slow',
    		effect: 'slide',
    		direction: 'right'
    	});
    	$('#mega-4').dcVerticalMegaMenu({
    		rowItems: '3',
    		speed: 'fast',
    		effect: 'slide',
    		direction: 'left'
    	});
    
    });
    </script>
    </body> 
    
    ・<body></body>内にコードを記述
    <div class="demo-container">
    <div class="mega-menu">
      <ul id="mega-1" class="menu">
        <li id="menu-item-1"><a href="#">Categories1</a>
          <ul>
            <li id="menu-item-4"><a href="#">Categories1_1</a>
              <ul>
                <li><a href="#">Categories1_1a</a></li>
                <li><a href="#">Categories1_1b</a></li>
                <li><a href="#">Categories1_1c</a></li>
              </ul>
            </li>
            <li id="menu-item-5"><a href="#">Categories1_2</a>
              <ul>
                <li><a href="#">Categories1_2a</a></li>
                <li><a href="#">Categories1_2b</a></li>
                <li><a href="#">Categories1_2c</a></li>
              </ul>
            </li>
            <li id="menu-item-6"><a href="#">Categories1_3</a>
              <ul>
                <li><a href="#">Categories1_3a</a></li>
                <li><a href="#">Categories1_3b</a></li>
                <li><a href="#">Categories1_3c</a></li>
              </ul>
            </li>
            <li id="menu-item-7"><a href="#">Categories1_4</a>
              <ul>
                <li><a href="#">Categories1_4a</a></li>
                <li><a href="#">Categories1_4b</a></li>
                <li><a href="#">Categories1_4c</a></li>
              </ul>
            </li>
            <li id="menu-item-8"><a href="#">Categories1_5</a>
              <ul>
                <li><a href="#">Categories1_5a</a></li>
                <li><a href="#">Categories1_5b</a></li>
                <li><a href="#">Categories1_5c</a></li>
              </ul>
            </li>
            <li id="menu-item-9"><a href="#">Categories1_6</a>
              <ul>
                <li><a href="#">Categories1_6a</a></li>
                <li><a href="#">Categories1_6b</a></li>
                <li><a href="#">Categories1_6c</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li id="menu-item-2"><a href="#">Categories2</a>
          <ul>
            <li id="menu-item-12"><a href="#">Categories2_1</a></li>
            <li id="menu-item-13"><a href="#">Categories2_2</a></li>
            <li id="menu-item-14"><a href="#">Categories2_3</a></li>
          </ul>
        </li>
        <li id="menu-item-3"><a href="#">Categories3</a>
          <ul>
            <li id="menu-item-15"><a href="#">Categories3_1</a>
              <ul>
                <li><a href="#">Categories3_1a</a></li>
                <li><a href="#">Categories3_1b</a></li>
                <li><a href="#">Categories3_1c</a></li>
              </ul>
            </li>
            <li id="menu-item-16"><a href="#">Categories3_2</a>
              <ul>
                <li><a href="#">Categories3_2a</a></li>
                <li><a href="#">Categories3_2b</a></li>
                <li><a href="#">Categories3_2c</a></li>
              </ul>
            </li>
            <li id="menu-item-17"><a href="#">Categories3_3</a>
              <ul>
                <li><a href="#">Categories3_3a</a></li>
                <li><a href="#">Categories3_3b</a></li>
                <li><a href="#">Categories3_3c</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#">Categories4</a>
          <ul>
            <li><a href="#">Categories4_1</a></li>
            <li><a href="#">Categories4_2</a></li>
            <li><a href="#">Categories4_3</a></li>
            <li><a href="#">Categories4_4</a></li>
          </ul>
        </li>
        <li><a href="#">Categories5</a>
          <ul>
            <li><a href="#">Categories5_1</a>
              <ul>
                <li><a href="#">Categories5_1a</a></li>
                <li><a href="#">Categories5_1b</a></li>
                <li><a href="#">Categories5_1c</a></li>
              </ul>
            </li>
            <li><a href="#">Categories5_2</a>
              <ul>
                <li><a href="#">Categories5_2a</a></li>
                <li><a href="#">Categories5_2b</a></li>
                <li><a href="#">Categories5_2c</a></li>
              </ul>
            </li>
            <li><a href="#">Categories5_3</a>
              <ul>
                <li><a href="#">Categories5_3a</a></li>
                <li><a href="#">Categories5_3b</a></li>
                <li><a href="#">Categories5_3c</a></li>
              </ul>
            </li>
            <li><a href="#">Categories5_4</a>
              <ul>
                <li><a href="#">Categories5_4a</a></li>
                <li><a href="#">Categories5_4b</a></li>
                <li><a href="#">Categories5_4c</a></li>
              </ul>
            </li>
            <li><a href="#">Categories5_5</a>
              <ul>
                <li><a href="#">Categories5_5a</a></li>
                <li><a href="#">Categories5_5b</a></li>
                <li><a href="#">Categories5_5c</a></li>
              </ul>
            </li>
            <li><a href="#">Categories5_6</a>
              <ul>
                <li><a href="#">Categories5_6a</a></li>
                <li><a href="#">Categories5_6b</a></li>
                <li><a href="#">Categories5_6c</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    </div>
    

    サンプルのhtmlコード

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8" />
    <title>Vertical Mega Menu</title>
    <link rel="stylesheet" type="text/css" href="css/dcverticalmegamenu.css" />
    </head>
    
    <body>
    <div id="container">
      <div class="demo-container">
        <div class="mega-menu">
          <ul id="mega-1" class="menu">
            <li id="menu-item-1"><a href="#">Categories1</a>
              <ul>
                <li id="menu-item-4"><a href="#">Categories1_1</a>
                  <ul>
                    <li><a href="#">Categories1_1a</a></li>
                    <li><a href="#">Categories1_1b</a></li>
                    <li><a href="#">Categories1_1c</a></li>
                  </ul>
                </li>
                <li id="menu-item-5"><a href="#">Categories1_2</a>
                  <ul>
                    <li><a href="#">Categories1_2a</a></li>
                    <li><a href="#">Categories1_2b</a></li>
                    <li><a href="#">Categories1_2c</a></li>
                  </ul>
                </li>
                <li id="menu-item-6"><a href="#">Categories1_3</a>
                  <ul>
                    <li><a href="#">Categories1_3a</a></li>
                    <li><a href="#">Categories1_3b</a></li>
                    <li><a href="#">Categories1_3c</a></li>
                  </ul>
                </li>
                <li id="menu-item-7"><a href="#">Categories1_4</a>
                  <ul>
                    <li><a href="#">Categories1_4a</a></li>
                    <li><a href="#">Categories1_4b</a></li>
                    <li><a href="#">Categories1_4c</a></li>
                  </ul>
                </li>
                <li id="menu-item-8"><a href="#">Categories1_5</a>
                  <ul>
                    <li><a href="#">Categories1_5a</a></li>
                    <li><a href="#">Categories1_5b</a></li>
                    <li><a href="#">Categories1_5c</a></li>
                  </ul>
                </li>
                <li id="menu-item-9"><a href="#">Categories1_6</a>
                  <ul>
                    <li><a href="#">Categories1_6a</a></li>
                    <li><a href="#">Categories1_6b</a></li>
                    <li><a href="#">Categories1_6c</a></li>
                  </ul>
                </li>
              </ul>
            </li>
            <li id="menu-item-2"><a href="#">Categories2</a>
              <ul>
                <li id="menu-item-12"><a href="#">Categories2_1</a></li>
                <li id="menu-item-13"><a href="#">Categories2_2</a></li>
                <li id="menu-item-14"><a href="#">Categories2_3</a></li>
              </ul>
            </li>
            <li id="menu-item-3"><a href="#">Categories3</a>
              <ul>
                <li id="menu-item-15"><a href="#">Categories3_1</a>
                  <ul>
                    <li><a href="#">Categories3_1a</a></li>
                    <li><a href="#">Categories3_1b</a></li>
                    <li><a href="#">Categories3_1c</a></li>
                  </ul>
                </li>
                <li id="menu-item-16"><a href="#">Categories3_2</a>
                  <ul>
                    <li><a href="#">Categories3_2a</a></li>
                    <li><a href="#">Categories3_2b</a></li>
                    <li><a href="#">Categories3_2c</a></li>
                  </ul>
                </li>
                <li id="menu-item-17"><a href="#">Categories3_3</a>
                  <ul>
                    <li><a href="#">Categories3_3a</a></li>
                    <li><a href="#">Categories3_3b</a></li>
                    <li><a href="#">Categories3_3c</a></li>
                  </ul>
                </li>
              </ul>
            </li>
            <li><a href="#">Categories4</a>
              <ul>
                <li><a href="#">Categories4_1</a></li>
                <li><a href="#">Categories4_2</a></li>
                <li><a href="#">Categories4_3</a></li>
                <li><a href="#">Categories4_4</a></li>
              </ul>
            </li>
            <li><a href="#">Categories5</a>
              <ul>
                <li><a href="#">Categories5_1</a>
                  <ul>
                    <li><a href="#">Categories5_1a</a></li>
                    <li><a href="#">Categories5_1b</a></li>
                    <li><a href="#">Categories5_1c</a></li>
                  </ul>
                </li>
                <li><a href="#">Categories5_2</a>
                  <ul>
                    <li><a href="#">Categories5_2a</a></li>
                    <li><a href="#">Categories5_2b</a></li>
                    <li><a href="#">Categories5_2c</a></li>
                  </ul>
                </li>
                <li><a href="#">Categories5_3</a>
                  <ul>
                    <li><a href="#">Categories5_3a</a></li>
                    <li><a href="#">Categories5_3b</a></li>
                    <li><a href="#">Categories5_3c</a></li>
                  </ul>
                </li>
                <li><a href="#">Categories5_4</a>
                  <ul>
                    <li><a href="#">Categories5_4a</a></li>
                    <li><a href="#">Categories5_4b</a></li>
                    <li><a href="#">Categories5_4c</a></li>
                  </ul>
                </li>
                <li><a href="#">Categories5_5</a>
                  <ul>
                    <li><a href="#">Categories5_5a</a></li>
                    <li><a href="#">Categories5_5b</a></li>
                    <li><a href="#">Categories5_5c</a></li>
                  </ul>
                </li>
                <li><a href="#">Categories5_6</a>
                  <ul>
                    <li><a href="#">Categories5_6a</a></li>
                    <li><a href="#">Categories5_6b</a></li>
                    <li><a href="#">Categories5_6c</a></li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <a href="http://saetl.net/javascriptsample.html"> <span style="position:fixed; right:10px; top:10px; font-size:1em; color:#000;">Javascriptサンプル集 - Saetl.net</span> </a> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script> 
    <script type='text/javascript' src='js/jquery.dcverticalmegamenu.1.3.js'></script> 
    <script type="text/javascript">
    $(document).ready(function($){
    
    	$('#mega-1').dcVerticalMegaMenu({
    		rowItems: '3',
    		speed: 'fast',
    		effect: 'show',
    		direction: 'right'
    	});
    	$('#mega-2').dcVerticalMegaMenu({
    		rowItems: '3',
    		speed: 'slow',
    		effect: 'fade',
    		direction: 'left'
    	});
    	$('#mega-3').dcVerticalMegaMenu({
    		rowItems: '4',
    		speed: 'slow',
    		effect: 'slide',
    		direction: 'right'
    	});
    	$('#mega-4').dcVerticalMegaMenu({
    		rowItems: '3',
    		speed: 'fast',
    		effect: 'slide',
    		direction: 'left'
    	});
    
    });
    </script>
    </body>
    </html>
  4. ファイル1式をサーバーにアップロードして設置完了。
    サンプル