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ポイント差し上げます。

回答の条件
  • 1人3回まで
  • 13歳以上
  • 登録:2010/09/13 17:30:21
  • 終了:2010/09/15 21:52:40

ベストアンサー

id:LimgHT No.1

LimgHT回答回数30ベストアンサー獲得回数102010/09/13 17:59:05

ポイント350pt

マウスの動きに応じた動作なので、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

id:akaired

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

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

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

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

よろしくお願いします。

2010/09/13 19:07:44

その他の回答(2件)

id:LimgHT No.1

LimgHT回答回数30ベストアンサー獲得回数102010/09/13 17:59:05ここでベストアンサー

ポイント350pt

マウスの動きに応じた動作なので、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

id:akaired

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

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

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

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

よろしくお願いします。

2010/09/13 19:07:44
id:manekinekoo No.3

manekinekoo回答回数65ベストアンサー獲得回数32010/09/15 10:59:48

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

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

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

  • id:LimgHT
    やりたいことを今試してみたら、
    <link href="../../widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <link href="../../widgets/menubar/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
    の中から適切なクラスを定義するだけで済みますね。

    > ■Item1~Item4までの各幅を変更したい。例えばItem1の幅は50pix,Item2の幅は100pixなど。
    > ■全体の幅は、1000、高さ50と決まっているので、全体の高さ、幅は固定にしたい。

    これらは次の定義を修正すればいいかと。
    Item1を個別に指定するには、タグにstyle属性で直に打ち込むか、
    id属性を設定して 各id専用のCSSを用意することになります。
    あと、横幅は1000ではなく、width: 8em; だったようで、高さは特に無指定でした。
    むしろ、次のul.MenuBarHorizontal aのpadding: 0.5em 0.75em;と文字高さで決まってるかと思います。

    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
    {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 8em;
    float: left;
    }


    > ■Item1~Item4の文字を小さくしたい。
    > ■バックグラウンドがグレイだが、赤にしたい。

    この4つは、デフォルト動作なので、
    以下にfont-size、width、height、background-colorなりを指定するだけでできます。
    グレイから赤は #CCC ⇒ #C00、#EEE ⇒ #FCC で、
    バックグランドを黄色は #33C ⇒ #FC0 とかかな?

    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
    {
    border: 1px solid #CCC;
    }
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    {
    display: block;
    cursor: pointer;
    background-color: #EEE;
    padding: 0.5em 0.75em;
    color: #333;
    text-decoration: none;
    }
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    {
    background-color: #33C;
    color: #FFF;
    }
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    {
    background-color: #33C;
    color: #FFF;
    }


    ■上記サンプルページの上から3番目のメニュバーのようにバックグランドが画像の場合、どこの CSSに設定すればいいのか。
    は下の部分ですかね。

    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
    {
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    }
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    {
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    }
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    {
    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    }
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    {
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    }

    具体的なパラメータは好みの問題なので、色々試してみるしかないかと。
  • id:akaired
    ご回答ありがとうございます!試してみます!!
  • id:LimgHT
    私が使っていたものを書いておきます。
    動作原理は this.classNameにルートメニュの状態を設定し、文脈セレクタを使ってサブメニューのスタイルシートを切り替える。
    そして、スタイルシートに visibility:visible; と visibility:hidden; をそれぞれ埋め込み、表示を切り替える。
    あとは、適当なAのスタイルに background-image: url("xxxx.png"); を挿入して、飾るだけ。

    ※字下げには全角空白2つを使ってますので、使う前に半角に置換してください。
    <HTML>
    <HEAD>
    <Style>
      body {
        margin: 0px;
        padding-top: 0em;
      }
      Table.menu,           /* menu box */
      Table.menu Div Div {      /* Sub menu box */
        position: absolute;
      }
      Table.menu A,         /* menu common */
      Table.menu A:link,
      Table.menu A:visited {
        display: block;
        width: 10em;
        line-height: 2em;
        text-decoration: none;
        color: #0000CC;
        background-color:#CCCCDD;
        text-align: center;
        border  : solid 1px #9999CC;
        border-top: solid 0px #9999CC;
       /*background-image: url("xxxx.png");*/
      }
      Table.menu A:hover {
        background-color: #CCDDFF;
       /*background-image: url("xxxx.png");*/
      }
      Table.menu Div A {       /* Root menu */
        border: solid 1px #9999CC;
       /*background-image: url("xxxx.png");*/
      }
      Table.menu Div Div A {       /* Sub menu */
       /*background-image: url("xxxx.png");*/
      }
      Table.menu Div.show Div A {   /* Sub menu under .show */
        visibility: visible;
      }
      Table.menu Div.hide Div A {   /* Sub menu under .hide */
        visibility: hidden;
      }
    </Style>
    </HEAD>
    <BODY>
    <Table class="menu" border="0" cellpadding="0" cellspacing="0">
    <Tr>
      <td><div class="hide" onMouseOver='this.className="show";' onMouseOut='this.className="hide";'
          ><a href=".">Root-menu 1</a
          ><div
          ><a href=".">Sub-menu 1-1</a
          ><a href=".">Sub-menu 1-2</a
          ><a href=".">Sub-menu 1-3</a
          ><a href=".">Sub-menu 1-4</a
        ></div>
      </td>
      <td><div class="hide" onMouseOver='this.className="show";' onMouseOut='this.className="hide";'
          ><a href="">Root-menu 2</a
          ><div
          ><a href=".">Sub-menu 2-1</a
          ><a href=".">Sub-menu 2-2</a
          ><a href=".">Sub-menu 2-3</a
          ><a href=".">Sub-menu 2-4</a
        ></div>
      </td>
      <td><div class="hide" onMouseOver='this.className="show";' onMouseOut='this.className="hide";'
          ><a href=".">Root-menu 3</a
          ><div
          ><a href=".">Sub-menu 3-1</a
          ><a href=".">Sub-menu 3-2</a
          ><a href=".">Sub-menu 3-3</a
          ><a href=".">Sub-menu 3-4</a
        ></div>
      </td>
    </Tr>
    </Table>
    </BODY>
    </HTML>

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません