入れ子のプルダウンメニューを作る | CSS-EBLOGサイトを移転しました。新しいアドレスはhttp://css-eblog.com/になります。 ブックマークしてくれている方は、新しく登録しなおしてください。 この記事の新しいURL 入れ子のプルダウンメニューを作る パーマリンク コメント(6) トラックバック(0)
フラッシュサンプル - ナビゲーション系
ここでは、フラッシュを学習される方のためにサンプルソースを提供しています。 サンプルソースはすべてＦｌａｓｈＭＸ形式のファイルをlzh圧縮したものです。 ◆5/16：ナビゲーション系に「簡易パスワードチェック」を追加 ●ナビゲーション系 ドロップダウンやツリーメニューなど、サイトのメニューに使えるサンプル。 ●ゲーム系 モグラたたきやクイズゲームなど、ゲームの基本部分に使えるサンプル。 ●アニメーション系 トゥイーンやアルファを使って波紋や落ち葉を表現するなどのサンプル。 ●スクリプトTips プリロードのスクリプト、任意の整数の範囲の乱数の作り方など、ちょっとしたスクリプトの解説。 ドロップダウンやツリーメニューなど、サイトのメニューに使えるナビゲーション系サンプル。 完成形を見るには、FlashPlayer6が必須です。また、サンプルソースはすべてFlashMX形式
ドロップダウンメニューとは？HTML＋CSSだけで簡単に作る方法 [ホームページ作成] All About
ドロップダウンメニューとは ドロップダウンメニューとは、主にメインメニューが横方向に広がっており、メニュー項目の上にマウスを載せると、隠れていたサブメニューが下側に展開するようなメニューのことです。多数のウェブサイトで主要なナビゲーション機能として使われており、HTML＋CSSだけで簡単に作成できます。 たいていのウェブサイトには何らかのメニューUI(ユーザ・インターフェイス)があるでしょう。横いっぱいに広がった領域内でメニュー項目を横方向に並べたUIをメニューバーと呼びます。そのメニュー項目から下方向にサブメニューが展開するUIのことを特にドロップダウンメニューと呼び、プルダウンメニューと呼ばれていることもあります。 ウェブサイト上で提供するナビゲーション機能として、メニューはとても基本的なUIです。ぜひ何らかのメニューを用意しておきましょう。その方法の1つとして、本記事ではメニューバー
![ドロップダウンメニューとは？HTML＋CSSだけで簡単に作る方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/391cf8b3a0a84ef4a8ab329f8ab56ad3ad519102/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F2%2F3%2F9%2F1%2F1%2F201704181214%2Ftopimg_original.png)
ドロップダウンメニューの表示・非表示 [ホームページ作成] All About
ドロップダウンメニューの表示・非表示マウスを乗せるだけでサブメニューが展開されるドロップダウンメニューを作ってみましょう。まずは第1のステップとして、文字や画像の表示・非表示をマウスの動作に合わせて切り替える方法をご紹介致します。 ドロップダウンメニューを作ろう ドロップダウンメニュー（下図）を作ってみましょう。 ページの数が多いサイトなどでは、ドロップダウンメニューを使ってわかりやすくコーナーをまとめると便利です。 今回から数回に分けて、ドロップダウンメニューを実現するのに必要な方法を1ステップずつご紹介していきたいと思います。 第1回 表示・非表示を切り替える ドロップダウンメニューを実現するためには、メニュー項目の一部を表示させたり消したりする処理が必要です。 そこで、まずは「文字の表示・非表示を切り替える」方法をご紹介致します。 ドロップダウンメニューの構成は、実は次のようになって
![ドロップダウンメニューの表示・非表示 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
ドロップダウンメニューの設置
では、「ドロップダウンメニューの設置方法」について説明します。 ここでは、javascript の onmouseover属性とonmouseout属性を用いて作成し、メニュー項目にマウスを重ねたときにクラス名が切り替わる方法を使用しています。 [1] HTMLの編集 HTMLテンプレートを編集し、ドロップダウンメニューを挿入したい箇所に、下記のようなメニューのリストを作成します。 <div id="navi_continer"> <div id="navi"> <ul> <li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#">メニュー 1</a> <ul class="sub"> <li><a
ドロップダウンメニュー
●ドロップダウンメニュー Ver：1.0 形式：Html 言語：JavaScript 環境：IE6（Opera） 備考：作成ツール化したものはこちら ⇒ V1.0 Download ・概要 ＩＥ６ではドロップダウンメニュー、Ｏｐｅｒａでは通常のリン クとして動くＨｔｍｌです。 ＪａｖａＳｃｒｉｐｔはほんの少ししか使用していないので、そ れほど難しいソースではないと思います。 ・サンプル ・スクリプト例 <html> <head> <title>ドロップダウンメニュー</title> </head> <script type="text/javascript"> var idPrev = ""; var elmPrev = null; function fnOpen( id ){ fnClose( idPrev ); document.all.item(id).style.display =
blog*citron | カテゴリーのプルダウン化
sb/Serene Bachのテンプレート、blogカスタマイズTipsや素材と、アンテナに引っかかったものを勢いのままに書き綴るブログ（でした） Info Archive Link Profile web*citron Home > tips > Here! リクエストのあったカテゴリーのプルダウン化。 JavaScriptを使って、親カテゴリ名をクリックするとサブカテゴリを表示させます。JavaScriptを切った場合は、プルダウンはできませんが親カテゴリのカテゴリリストからそのまま飛べるようになっています。 ※注意 テンプレートに直接書き込む形になるので、カテゴリごとの記事数の表示は行われません。カテゴリの追加や削除をした場合はテンプレートの方も修整して下さい。 sb、SereneBachどちらでも使えます。 その他のブログツールでも、HTML編集ができてカテゴリーのURLが分かるも
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://pamgau.net/item/326
CSSプルダウンメニュー for カスタマイズ ～CSSテクニック～