タグ

リストに関するnami_kameのブックマーク (3)

  • [JS]実装は簡単で高性能、ロード無しでページを次々に表示するスクリプト -Navi.js

    複数のページをブラウザのロード無しで、アニメーションで次々に表示するjQueryのプラグインを紹介します。 これ系のスクリプトはいくつか紹介してきましたが、ページタイトルの設定やネスト、戻る・次へボタンの対応など、使い勝手もなかなかです。 Navi.js Navi.js -GitHub Navi.jsの特徴 Navi.jsのデモ Navi.jsの使い方 Navi.jsの特徴 Navi.jsの仕組みは一つのファイルに複数のページのコンテンツを配置し、それをページごとに遷移するように表示します。 タブ、ナビゲーション、カルーセル、ページネーション、パンくずをサポート コンテンツにあったページタイトルを表示 戻る・次へボタンのサポート コンテンツのネストをサポート スライドアップ、スライドレフト、スライドアップ・レフト、フェードのエフェクトを用意 AJAXサポート Google Analytic

  • [CSS]ホバーで子がハイライト、家系図のようなツリーを実装するスタイルシート -CSS3 Family Tree

    子孫のみハイライト [ad#ad-2] CSS3 Family Treeの実装 HTML ツリーはリスト要素で、各アイテムの親子関係はリストの入れ子で実装します。 <div class="tree"> <ul> <li><a href="#">親</a> <ul> <li><a href="#">子</a> <ul> <li><a href="#">孫</a></li> </ul> </li> <li><a href="#">子</a> <ul> <li><a href="#">孫</a></li> <li><a href="#">孫</a> <ul> <li><a href="#">ひ孫</a></li> <li><a href="#">ひ孫</a></li> <li><a href="#">ひ孫</a></li> </ul> </li> <li><a href="#">孫</a></l

  • CSS3でシャレオツなリストを作るチュートリアル:phpspot開発日誌

    CSS3 ordered list styles - RedTeamDesign CSS3でシャレオツなリストを作るチュートリアル。 list-styleを無効にしてブラウザ標準の数字部分をやめて、content: counter(li), counter-increment といったプロパティを使って数値部分を独自にデザインしています。 リスト部分の数字のデザインはなかなか難しかったと個人的に記憶していますが、こうした方法でやれば思い通りのリストデザインが作れるんですね、ということでメモ。 CSSを使ったテクニックはどこまで進化するんでしょうね。 関連エントリ CSS3アニメーションをjQueryで使いやすくするプラグイン「jQuery Transit」 アニメーションするバナーをCSS3で作るチュートリアル フルスクリーン背景がスライドショーになるCSS3サンプル CSS3で出来たクー

  • 1