Saetl.net

Simple And Easy TempLate

SmartMenusの使い方

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

    サンプルのsm-core-css.cssコード(サンプルのcssは改変しています)
    ※sm-blue.cssはそのまま使用

    /*ページ設定部分(style.cssなどで設定していれば削除する)*/
    body, ul, li {
    	margin: 0;
    	padding: 0;
    	border: 0;
    }
    #container {
    	width: 700px;
    	margin: 50px auto;
    }
    /*ここまでページ設定部分*/
    
    
    /*ここからSmartMenusの設定*/
    
    /* SmartMenus Core CSS (it's not recommended editing this)
    ===============================================================*/
    
    .sm, .sm ul, .sm li {
    	display: block;
    	list-style: none;
    	padding: 0;
    	margin: 0;
    	line-height: normal;
    	direction: ltr;
    }
    ul.sm li {
    	position: relative;
    }
    ul.sm a {
    	position: relative;
    	display: block;
    }
    ul.sm a.disabled {
    	cursor: default;
    }
    ul.sm ul {
    	position: absolute;
    	top: -999999px;
    	left: -800px;
    	width: 100px;
    }
    ul.sm li {
    	float: left;
    }
    ul.sm-rtl {
    	direction: rtl;
    }
    ul.sm-rtl li {
    	float: right;
    }
    ul.sm ul li, ul.sm-vertical li {
    	float: none;
    }
    ul.sm a {
    	white-space: nowrap;
    }
    ul.sm ul a, ul.sm-vertical a {
    	white-space: normal;
    }
    * html ul.sm-vertical li {
    	float: left;
    	width: 100%;
    }
    * html ul.sm-vertical ul li {
    	float: none;
    	width: auto;
    }
    *:first-child+html ul.sm-vertical>li {
    	float: left;
    	width: 100%;
    }
    ul.sm ul.sm-nowrap>li>a {
    	white-space: nowrap;
    }
    ul.sm:after {
    	content: "\00a0";
    	display: block;
    	height: 0;
    	font: 0/0 serif;
    	clear: both;
    	visibility: hidden;
    	overflow: hidden;
    }
    * html ul.sm {
    	height: 1px;
    }
    *:first-child+html ul.sm {
    	min-height: 1px;
    }
    ul.sm li *, ul.sm li *:before, ul.sm li *:after {
    	-moz-box-sizing: content-box;
    	-webkit-box-sizing: content-box;
    	box-sizing: content-box;
    }
    ul.sm {
    	-webkit-tap-highlight-color: rgba(0,0,0,0);
    }
    
    ・</body>の直前にjsファイルを読み込ませるためのコードを記述。
    <!--googleのCDN(ネットワーク経由でコンテンツを提供するサービス)よりjqueryをロード-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
    <!--ダウンロードしたファイル-->
    <script type="text/javascript" src="js/jquery.smartmenus.js"></script>
    <!--javascript追記-->
    <script type="text/javascript">
    	$(function() {
    		$('#main-menu').smartmenus({
    			subMenusSubOffsetX: 1,
    			subMenusSubOffsetY: -8
    		});
    	});
    </script>
    </body> 
    
    ・<body></body>内にコードを記述
      <!-- Sample menu definition -->
      <ul id="main-menu" class="sm sm-blue">
        <li><a href="http://www.smartmenus.org/">Home</a></li>
        <li><a href="http://www.smartmenus.org/about/">About</a>
          <ul>
            <li><a href="http://www.smartmenus.org/about/introduction-to-smartmenus-jquery/">Introduction to SmartMenus jQuery</a></li>
            <li><a href="http://www.smartmenus.org/about/themes/">Themes</a></li>
            <li><a href="http://vadikom.com/about/#vasil-dinkov">The author</a></li>
            <li><a href="http://www.smartmenus.org/about/vadikom/">The company</a>
              <ul>
                <li><a href="http://vadikom.com/about/">About Vadikom</a></li>
                <li><a href="http://vadikom.com/projects/">Projects</a></li>
                <li><a href="http://vadikom.com/services/">Services</a></li>
                <li><a href="http://www.smartmenus.org/about/vadikom/privacy-policy/">Privacy policy</a></li>
              </ul>
            </li>
            <li><a href="http://www.smartmenus.org/about/old-smartmenus-versions/">Old SmartMenus versions</a></li>
          </ul>
        </li>
        <li><a href="http://www.smartmenus.org/download/">Download</a></li>
        <li><a href="http://www.smartmenus.org/support/">Support</a>
          <ul>
            <li><a href="http://www.smartmenus.org/support/premium-support/">Premium support</a></li>
            <li><a href="http://www.smartmenus.org/support/forums/">Forums</a></li>
          </ul>
        </li>
        <li><a href="http://www.smartmenus.org/docs/">Docs</a></li>
        <li><a href="#">Sub test</a>
          <ul>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#" class="disabled">Disabled menu item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">more...</a>
              <ul>
                <li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">more...</a>
                  <ul>
                    <li><a href="#">Dummy item</a></li>
                    <li><a href="#" class="current">A 'current' class item</a></li>
                    <li><a href="#">Dummy item</a></li>
                    <li><a href="#">more...</a>
                      <ul>
                        <li><a href="#">subMenusMinWidth</a></li>
                        <li><a href="#">10em</a></li>
                        <li><a href="#">forced.</a></li>
                      </ul>
                    </li>
                    <li><a href="#">Dummy item</a></li>
                    <li><a href="#">Dummy item</a></li>
                  </ul>
                </li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#">Mega menu</a>
          <ul class="mega-menu">
            <li> 
              <!-- The mega drop down contents -->
              <div style="width:400px;max-width:100%;">
                <div style="padding:5px 24px;">
                  <p>This is a mega drop down test. Just set the "mega-menu" class to the parent UL element to inform the SmartMenus script. It can contain <strong>any HTML</strong>.</p>
                  <p>Just style the contents as you like (you may need to reset some SmartMenus inherited styles - e.g. for lists, links, etc.)</p>
                </div>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    

    サンプルのhtmlコード

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8" />
    <title>Vertical Accordion Nav Menu</title>
    <link rel="stylesheet" type="text/css" href="css/sm-core-css.css">
    <link rel="stylesheet" type="text/css" href="css/sm-blue.css">
    </head>
    
    <body>
    <div id="container"> 
      
      <!-- Sample menu definition -->
      <ul id="main-menu" class="sm sm-blue">
        <li><a href="http://www.smartmenus.org/">Home</a></li>
        <li><a href="http://www.smartmenus.org/about/">About</a>
          <ul>
            <li><a href="http://www.smartmenus.org/about/introduction-to-smartmenus-jquery/">Introduction to SmartMenus jQuery</a></li>
            <li><a href="http://www.smartmenus.org/about/themes/">Themes</a></li>
            <li><a href="http://vadikom.com/about/#vasil-dinkov">The author</a></li>
            <li><a href="http://www.smartmenus.org/about/vadikom/">The company</a>
              <ul>
                <li><a href="http://vadikom.com/about/">About Vadikom</a></li>
                <li><a href="http://vadikom.com/projects/">Projects</a></li>
                <li><a href="http://vadikom.com/services/">Services</a></li>
                <li><a href="http://www.smartmenus.org/about/vadikom/privacy-policy/">Privacy policy</a></li>
              </ul>
            </li>
            <li><a href="http://www.smartmenus.org/about/old-smartmenus-versions/">Old SmartMenus versions</a></li>
          </ul>
        </li>
        <li><a href="http://www.smartmenus.org/download/">Download</a></li>
        <li><a href="http://www.smartmenus.org/support/">Support</a>
          <ul>
            <li><a href="http://www.smartmenus.org/support/premium-support/">Premium support</a></li>
            <li><a href="http://www.smartmenus.org/support/forums/">Forums</a></li>
          </ul>
        </li>
        <li><a href="http://www.smartmenus.org/docs/">Docs</a></li>
        <li><a href="#">Sub test</a>
          <ul>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#" class="disabled">Disabled menu item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">more...</a>
              <ul>
                <li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">more...</a>
                  <ul>
                    <li><a href="#">Dummy item</a></li>
                    <li><a href="#" class="current">A 'current' class item</a></li>
                    <li><a href="#">Dummy item</a></li>
                    <li><a href="#">more...</a>
                      <ul>
                        <li><a href="#">subMenusMinWidth</a></li>
                        <li><a href="#">10em</a></li>
                        <li><a href="#">forced.</a></li>
                      </ul>
                    </li>
                    <li><a href="#">Dummy item</a></li>
                    <li><a href="#">Dummy item</a></li>
                  </ul>
                </li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
    
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#">Mega menu</a>
          <ul class="mega-menu">
            <li> 
              <!-- The mega drop down contents -->
              <div style="width:400px;max-width:100%;">
                <div style="padding:5px 24px;">
                  <p>This is a mega drop down test. Just set the "mega-menu" class to the parent UL element to inform the SmartMenus script. It can contain <strong>any HTML</strong>.</p>
                  <p>Just style the contents as you like (you may need to reset some SmartMenus inherited styles - e.g. for lists, links, etc.)</p>
                </div>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
    <script type="text/javascript" src="js/jquery.smartmenus.js"></script> 
    <script type="text/javascript">
    	$(function() {
    		$('#main-menu').smartmenus({
    			subMenusSubOffsetX: 1,
    			subMenusSubOffsetY: -8
    		});
    	});
    </script>
    </body>
    </html>
  4. ファイル1式をサーバーにアップロードして設置完了。
    サンプル