SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Yahoo! UI Library Ver.3 を使ってみよう

Yahoo! UI Library 3(YUI3)プラグイン

Yahoo! UI Library Ver.3 を使ってみよう(8)


  • X ポスト
  • このエントリーをはてなブックマークに追加

メニューナビ

 メニュー表示を行います。以下例題の実行画面です。

図3:例題実行画面
図3:例題実行画面

 メニュー表示のためのHTMLの書き方は以下のリスト2のようになります。

[リスト2]メニューの書き方(PL_menunav_Top.html)
<div id="menu-1" class="yui3-menu">
  <div class="yui3-menu-content">
    <ul>
      <li class="yui3-menuitem">        //(1)
        <a class="yui3-menuitem-content" href="http://www.yahoo.com">ヤフー</a>
      </li>
      <li class="yui3-menuitem">        //(2)
        <a class="yui3-menuitem-content" href="http://www.yahoo.com">コンテンツ</a>
      </li>
    </ul>
  </div>
</div>

 まず<body class="yui3-skin-sam">を指定します。(1)(2)はメニュー項目の並びです。各メニュー項目にサブメニューをつける場合は、リスト3を見てください。

[リスト3]モジュールnode-menunav
<li class="yui3-menuitem">        //(2)
  <a class="yui3-menuitem-content" href="http://www.yahoo.com">コンテンツ</a>
    <div>
       <div>
          <ul>
            <li>
                 //ここにサブメニューを書く
            </li>
          </ul>
       <div>
    </div>
</li>

 <li></li>の間に<div><div><ul><li>を入れます。サブメニュー内に区切りを入れたい場合は<div><div><ul><li></li></ul><ul><li>と<ul>でまとめます。

 モジュールはnode-menunavを指定します。リスト4をみてください。

[リスト4]モジュールnode-menunav
YUI().use("node-menunav", function(Y) {
	  var menu = Y.one("#menu_top");
    menu.plug(Y.Plugin.NodeMenuNav,{
        autoSubmenuDisplay: true
    });
});

 .plug()にはY.Plugin.NodeMenuNavを指定します。以下に、2番目の引数の内容を表に示します。

Y.Plugin.NodeFocusManagerの設定項目
オプション 概要 デフォルト
autoSubmenuDisplay mouseoverで自動的に小項目を表示するか true
submenuShowDelay mouseoverで、サブメニューを表示する時間(ミリ秒) 250
submenuHideDelay mouseoutでサブメニューを消す時間(ミリ秒) 250

 メニューを縦に表示したいときは、リスト2の<div id="menu-1" class="yui3-menu">に <div id="menu_top" class="yui3-menu yui3-menu-horizontal">とclassの"yui3-menu-horizontal"を追加します。以下はメニューを縦に表示した例題の実行画面です。

図4:例題実行画面(PL_menunav_Left.html)
図4:例題実行画面(PL_menunav_Left.html)

次のページ
コンソールフィルター

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Yahoo! UI Library Ver.3 を使ってみよう連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト 横塚 利津子(ヨコツカ リツコ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5377 2010/08/30 16:38

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング