タグ ul id
人気順 5 users 10 users 50 users 500 users 1000 usersjQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー|Webpark
最近、下にスクロールすれば消えて、上にスクロールすれば現れる固定メニューを設置しているサイトを2つくらい(サイト名は忘れてしまいました。。)見かけて、これは流行っているのではないかということで作ってみました。 メニュー自体はいたって普通のものですが、一応ソースを載せておきます。まずはHTMLです。 <nav id="menu-wrap"> <ul id="menu"> <li><a href="#... 続きを読む
jQueryとCSS3を使ったアコーディオンメニューを詳しく説明します|Webpark
jQueryとCSS3を使ったアコーディオンメニューを作ってみましたので、作り方を紹介します。かなり長くなりますが、お役に立てばうれしいです。 色々事情があってIEでご覧になっている方のためにスクリーンショットも載せておきます。カテゴリー3にマウスを乗せているところです。 それではコードを解説していきます。 HTML まずはHTMLです。無駄に長いですが一応載せます。 <ul id="accord... 続きを読む
[JS]余分なHTMLは加えずに、セマンティックに実装するスマートフォン用のナビゲーション | コリス
デスクトップ時はアイテムが水平に並び、スマートフォン時は省スペースのドロップダウン型に変わるナビゲーションを実装するチュートリアルを紹介します。 デモページ:幅480pxで表示 実装 HTML HTMLは非常にシンプルで、リスト要素を使いnav要素で内包するだけです。 <nav id="nav-wrap"> <ul id="nav"> <li><a href="#">Button</a></li>... 続きを読む
[CSS]シンプルなHTMLで、美しいパンくずを実装する4つのスタイルシート | コリス
デモ 実装 デモ デモはCSS3、疑似要素を使用しているため、IE8+, Firefox, Chrome, Safari, Operaでご覧ください。 4つデモは、全て画像を使用していません。 デモページ:ホバー時 実装 HTML HTMLは非常にシンプルで、リスト要素を使用します。 ul要素にid、現在位置にclassを記述します。 <ul id="breadcrumbs-one"> <li><... 続きを読む
[JS]アニメーションで動作する画像ギャラリーの超軽量すぎるスクリプト -Rhinofader | コリス
実用的なオプションを備えた、フェードのアニメーションで切り替わる画像ギャラリーを実装するjQueryのプラグインを紹介します。 操作方法は自動・手動の2つです。 左下のアイコンで再生・停止、左右の矢印アイコンで画像を前後に切り替えます。 Rhinofaderの実装 HTML 画像はリスト要素で実装します。 <ul id="slideshow"> <li><img src="images/001.j... 続きを読む
[JS]年表や社史など、アニメーションでスライドする時間軸コンテンツを簡単に実装できるスクリプト -Timelinr | コリス
Timelinrの実装 HTML 時間とパネルをそれぞれリスト要素で実装し、divで内包します。 「#timele, #dates, #issues」はデフォルトの設定です。 <div id="timeline"> <ul id="dates"> <li><a href="#">date1</a></li> <li><a href="#">date2</a></li> </ul> <ul id="... 続きを読む
[CSS]シンプルなHTMLに付箋紙のデザインを適用するスタイルシート | コリス
付箋紙はどんな背景にも適用できます。 デモ 画像無しで付箋紙 Sticky Notes with CSS3 by accidental hacker 付箋紙の実装 上記の当サイトに設置したデモのコードを紹介します。 リスト要素で実装します。p要素は付箋紙には必要ありません。 <ul id="notes"> <li> <p>画像無しで付箋紙</p> </li> <li> <p>Sticky Note... 続きを読む