スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

YUIライブラリを使ってクリックでメニューが現れるボタンを設置

 しばらくYUIことYahoo! UI Libraryを使って色々してみたいと思います。まずはクリックでメニューが現れるボタンを設置してみます。実際どのようになるかは下のボタンでお試しください。
 まずは外部ファイルを読み込みます。
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/menu/assets/skins/sam/menu.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/container/container_core-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/menu/menu-min.js"></script>
 メニューの内容は次のJavaScriptで記述します。
<script type="text/javascript">

    YAHOO.util.Event.onAvailable("rendertarget", function () {

        var oMenu = new YAHOO.widget.Menu("menuwithgroups", { fixedcenter: true });

        oMenu.addItems([

            [
                { text: "メニュー1", url: "リンク先のURL" },
                { text: "メニュー2", url: "リンク先のURL" },
                { text: "メニュー3", url: "リンク先のURL" },
                { text: "メニュー4", url: "リンク先のURL" }
            ],

            [
                { text: "メニュー5", url: "リンク先のURL" },
                { text: "メニュー6", url: "リンク先のURL" },
                { text: "メニュー7", url: "リンク先のURL" },
                { text: "メニュー8", url: "リンク先のURL" } 
            ],

            [
                { text: "メニュー9", url: "リンク先のURL" },
                { text: "メニュー10", url: "リンク先のURL" },
                { text: "メニュー11", url: "リンク先のURL" },
                { text: "メニュー12", url: "リンク先のURL" }
            ]
        
        ]);

        oMenu.setItemGroupTitle("タイトル1", 0);
        oMenu.setItemGroupTitle("タイトル2", 1);
        oMenu.setItemGroupTitle("タイトル3", 2);

        oMenu.render("rendertarget");

        oMenu.subscribe("show", oMenu.focus);

        YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
    
    });
    
</script>
 最後にボタンを設置します。
<button id="menutoggle" type="button">ボタンの中の文字</button>
<div id="rendertarget" class=" yui-skin-sam"></div>
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。