人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

CSSについて教えてください。AdobeのSpryです。http://q.hatena.ne.jp/1283869688の質問の続きになります。

下記のサイトにメニューバーがあります。一番上のメニューバーを参照ください。
http://labs.adobe.com/technologies/spry/samples/menubar/MenuBarSample.html

やりたい事
■Item1?Item4の文字を小さくしたい。
■Item1?Item4までの各幅を変更したい。例えばItem1の幅は50pix,Item2の幅は100pixなど。
■全体の幅は、1000、高さ50と決まっているので、全体の高さ、幅は固定にしたい。
■バックグラウンドがグレイだが、赤にしたい。
■マウスカーソルを当てたときに、バックグランドを黄色にしたい。
■上記サンプルページの上から3番目のメニュバーのようにバックグランドが画像の場合、どこのCSSに設定すればいいのか。

上記で設定するCSSは下記のサイトにあります。
http://labs.adobe.com/technologies/spry/articles/menu_bar/index.html
http://livedocs.adobe.com/ja_JP/Spry/1.4/help.html?content=WS0BB04E11-1BE3-4a67-BC94-BE7DA93A0159.html
以上のことを実現できるCSSの編集場所をお教えください。1名様に300ポイント差し上げます。

●質問者: akaired
●カテゴリ:インターネット ウェブ制作
✍キーワード:Adobe CSS グランド グレイ サイト
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● LimgHT
●350ポイント ベストアンサー

マウスの動きに応じた動作なので、CSSのみでは無理があります。

HTMLソースを読んだどころ、

CSSは、

<link href="../../widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

<link href="../../widgets/menubar/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />

javaScriptは、

<script src="../../widgets/menubar/SpryMenuBar.js" type="text/javascript"></script>

によってリンクされています。

カラクリとしては、マウスをリンク上に合わせると、

<a class="MenuBarItemSubmenu" ...>だったものが

<a class="MenuBarItemSubmenu MenuBarItemSubmenuHover" ...>に変えられ、次のCSSが追加指定される感じです。

ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible

{

background-color: #33C;

color: #FFF;

}

でScriptの方をみてみると、this.subHoverClass = 'MenuBarItemSubmenuHover'; と定義していて、

例えば、Spry.Widget.MenuBar.prototype.mouseOver = function (listitem, e)の中では、

// show menu highlighting

this.addClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);

のように、クラス名を追加しています。

Spry.Widgetの操作法はJavaScriptの範囲から出るので、具体的は次を読む必要があります。(←まだ読んでない^^;)

とりあえず名前から推測すると、mouseOver というのは、マウスが真上に居るときの動作と思います。

http://livedocs.adobe.com/ja_JP/Spry/1.4/help.html?content=WSCD9...

この他、JavaScript の範囲では、onmouseover onmouseout などを使った制御法もあります。

http://oshiete.goo.ne.jp/qa/3982696.html

◎質問者からの返答

丁寧に解説頂きありがとうございます。例えばこんな事はできるでしょうか?

■1行×10列のテーブルを作ります。さらにItem1?10までのアイコンを作っておき、テーブルに画像をはめこみます。

■この画像にカーソルがあたった時に、上記URLのようにプルダウンが表示される。といったことは可能でしょうか?

■別にSpryにこだわってはいません。上記の条件が実現できれば、どんなものでもよいです。

よろしくお願いします。


2 ● poiukiu
●0ポイント

http://willserver.com/freewill/news/w/index.html


3 ● manekinekoo
●0ポイント

手打ちで入力したいのだと思いますが、そもそもCSSは自分で理解できるレベルでないと手打ちは難しいです。

ドリームウィーバーを使ってプレビュー画面を見ながら編集すると楽にできるのでおすすめします。

ソフト代金はかかりますが、それが一番の近道だと思います。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ