まだデータがありません。
Amazon風のサイドメニューバーを実装「Amazon Side Bar Menu」
当ページのリンクには広告が含まれています。
スポンサーリンク
Amazon風のサイドメニューバーを実装するプラグイン「Amazon Side Bar Menu」を紹介します。
jQueryプラグイン「Amazon Side Bar Menu」
このプラグインを使えば、Amazon風のサイドバーメニューを実装することができます。
Amazonの左サイドにある「本」「ミュージック」といったカテゴリから下層にたどることのできるアレです。
スポンサーリンク
それではデモページのメニューをご覧ください。
ソース( HTML + jQuery )
<!DOCTYPE html> |
< html > |
< head > |
< meta charset = "utf-8" > |
< meta name = "description" content = "Amazon Side Bar Menuのデモでーす。" > |
< link rel = "stylesheet" type = "text/css" href = "amazonmenu.css" > |
< script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></ script > |
< script src = "amazonmenu.js" ></ script > |
< script > |
jQuery(function(){ |
amazonmenu.init({ |
menuid: 'demo' |
}) |
}) |
</ script > |
</ head > |
< body > |
< h1 >Amazon Side Bar Menu のデモでーす。</ h1 > |
< nav id = "demo" class = "amazonmenu" > |
< ul > |
< li >< a href = "#" >カテゴリ</ a > |
< div > |
< p >カテゴリの説明やらなんやら。</ p > |
< ul > |
< li >< a href = "#" >アイテム</ a ></ li > |
< li >< a href = "#" >アイテム</ a ></ li > |
< li >< a href = "#" >サブカテゴリ</ a > |
< div > |
< p >サブカテゴリの説明。</ p > |
< ul > |
< li >< a href = "#" >サブアイテム</ a >< li > |
< li >< a href = "#" >サブアイテム</ a >< li > |
</ ul > |
</ div > |
</ li > |
< li >< a href = "#" >アイテム</ a ></ li > |
</ ul > |
</ div > |
</ li > |
< li >< a href = "#" >カテゴリ</ a > |
< ul > |
< li >< a href = "#" >アイテム</ a ></ li > |
< li >< a href = "#" >アイテム</ a ></ li > |
< li >< a href = "#" >アイテム</ a > |
< ul > |
< li >サブアイテム</ li > |
< li >サブアイテム</ li > |
< li >サブアイテム</ li > |
</ ul > |
</ li > |
< li >< a href = "#" >アイテム</ a ></ li > |
< li >< a href = "#" >アイテム</ a ></ li > |
</ ul > |
</ li > |
< li >< a href = "#" >アイテム</ a ></ li > |
< li >< a href = "#" >アイテム</ a ></ li > |
</ ul > |
</ nav > |
</ body > |
</ html > |
スポンサーリンク