スターバックスのページの作り方とは?

このQ&Aのポイント
  • スターバックスのページでは、カーソルをメニューに当てると下に大きなメニューが表示されます。
  • しかし、パソコンとタブレットでの挙動が異なり、タブレットではリンク先に飛ばず、メニューが表示される仕組みとなっています。
  • 具体的な作り方やサンプルは見つかっていません。
回答を見る
  • ベストアンサー

WEBの作り

(1). スターバックスのページなのですが、 上のCoffeeなどにカーソルをあわせると、下に大きなメニューが表示されるのですが、 どういう作りになっているのでしょうか、どこかにサンプルのようなものありますか? 単純に下にメニュー項目をならべるようなものは見つかったのですが・・・・・ http://www.starbucks.com/ (2). このスターバックスのページをパソコンでCoffeeをクリックするリンク先にとぶのですが、 ipadなどタブレットでみるとCoffeeをクリックしてもリンク先に飛ばず、 カーソルをあわせた時のメニューが表示されるような仕組みになっているのですが、この仕組みわかる方いましたら教えてください。

noname#204675
noname#204675
  • CSS
  • 回答数1
  • ありがとう数10

質問者が選んだベストアンサー

  • ベストアンサー
  • weakweak
  • ベストアンサー率34% (350/1003)
回答No.1

javascript(またはjquery。jqueryはjavascriptを使いやすくするライブラリ)を使用して、ホバーしたタイミングでopenMegaというクラスを付与してスクロールダウンアニメーションで表示させているんですね。 つまり、javascriptでCSSを操作しています。

関連するQ&A

  • バニラ クリーム フラペチーノ

    スターバックスに、行ったことがありません。 メニュー「バニラ クリーム フラペチーノ」の材料は何でしょうか? http://www.starbucks.co.jp/beverage/frappuccino/4524785165939/?category=beverage コーヒーも入っているのでしょうか? よろしくお願いします。 注文方法は、メニュー名+サイズ(トールなど)で良いのでしょうか?

  • リンクについて

    いまHPを作成していて、作りが上下にフレーム分けされています。 上にメニュー、下に内容が表示されているといった作りです。 そこで、リンクを貼ったのですが、貼ったリンク先は別のサイトの物ですでにそのページには「戻る」というリンクがあります。 私のHPからそのリンク先に飛んで、そのページにある「戻る」を押すとそのリンク先のサイトのトップページが表示されてしまいます。 おそらく、そのままそのサイトのURLをリンク先にしているからそのような現象が起きてしまうのでしょうが、リンク先の「戻る」を押しても自分のHPに戻るようにするにはどうしたらいいのでしょうか? 説明が下手ですみません^^;

  • WEB リンク先 右クリックで新しいウィンドウで開く 表示せず 何故?

    こんにちは、 あるサイトで、ハイパーリンクを設定している文字をそのままクリックするとリンク先ページが表示されるが、 右クリックして、「新しいウィンドウで開く」で開こうとすると「ページを表示できません。」となります。 これってどういうことなんでしょうか? 仕組みが知りたいと思い質問しました。 何かお分かりの方がいましたら教えてください。よろしくお願いします。

  • 同じページ内のボックスへリンクするためには

    hpをつくり始めた初心者です。 フレームでページを分けているのではなくて、 ボックスを作って、そのボックス内にリンク先のページを表示したいのです。 わかりにくいと思うので、下に例を書くと・・   _________________ |  | |  menu      | ←このmenuをクリック |_________________|    すると、  ______________  |              |  |              |  ←同じページに |   ボックス       |   あるボックス |              |   に表示 |              |  |______________| わかりにくいかもしれませんが、 知っておられましたら、やり方教えて下さい。

    • ベストアンサー
    • CGI
  • PowerPoint 2010について

    Win7のMicrosoft PowerPoint 2010です。 テキストボックスで文字を入力し、文字を選択した状態で 右クリックからハイパーリンクの設定を行いました。 リンク先は、同じドキュメント内の次のページです。 PDFで出力するとリンクが張っているようで文字色が変わっているのですが クリックできません。 カーソルを合わせると「I」のような他のテキストと同じカーソルになり リンクとして認識してくれないようです。 どのようにすればリンクとして扱えるようになりますでしょうか? また、このようなことは可能でしょうか? 1ページ目が目次だけで2ページ以降が本文という形式を想定しています。 ■目次 メニューその1 ←2ページ目へリンク メニューその2-A ←3ページ目の「ポイントA」へリンク メニューその2-B ←3ページ目の「ポイントB」へリンク メニューその3 ←4ページ目へリンク HTMLでいうところのアンカータグのようなイメージなのですが こんなことも実行できますでしょうか?

  • 携帯ホームページですごかったタグ(゜Д゜)ハァ?

    あるとき携帯のホームページ(画像サイト)で 「メインメニューに入る前に上のリンクに一度入ってください」 という説明があり、・・・なるほど、ランキングサイトかなにかのようです。  しかし私は、どうせわからんだろうとたかをくくり、そのリンクを無視してメインメニューに入ろうとしたのです。すると…、なんと 「前のページに戻ってリンクをクリックしてください」 と表示されるではありませんか! 「(゜Д゜)ハァ?どうせリンククリックしてもまた同じなんだろ…まったくやられたぜ(´ヘ`;)」 と思いつつもリンクをクリックしてから入室を試みたところ…見事入れたんですねぇw(☆o◎)wもうそんなテクニックを見せ付けられた日にゃ( ゜д゜)ポカーン←こんなんでしたww私も簡単なモノながらホームページを作ったこともありましたので…  そこで疑問なのですが、そのような仕組み(?)はHTMLタグでなんとかなるものなんでしょうか?これからのホームページ作りにも役立ててみたいのと思いますので、ぜひ皆様のご回答よろしくお願いします。(o_ _)o))

  • FFでのグーグル検索でカーソルを合わせリンク先表示

    FireFoxでのグーグル検索で、カーソルを合わせるだけでそのリンク先のページが見えるような機能ってなかったでしょうか? 一時期、クリックせずにカーソルを合わせるだけでリンク先のページらしきものが画面右手に表示されていたのですが、いつの間にかできなくなってました。 どなたか、ご存知の方、よろしくお願い致します。

  • webページの画像だけを保存

     Androidタブレットであるwebページの画像だけを保存しようとした時、通常は長押しすればメニューが表示されるのですがそれは何も表示されません。 パソコン(Windows10のEdge)で表示させ右クリックしてもメニューが表示されません。 AndroidもWindowもと言いたいですが、とりあえずはAndroidでできるようにしたいです。 よろしくお願いします。

  • お気に入りで、二つ目から先が表示されません。

    お気に入りで、二つ目から先が表示されません。 インターネットエクスプローラーで、メニューバーの「お気に入り」を押すと、一段目のリンク先やフォルダが一覧の表示で出ます。しかし、そのな中のフォルダにカーソルを合わせても、それから先は一覧は表示されません。ただし、本来の四角い枠は薄く形があって、枠のなかの適当な位置にカーソルを合わせてクリックするとリンク先に飛んでいきます。つまり、画面に表示はされていないだけで、リンク先やフォルダは生きているようなのです。どうしたらいいでしょう。

  • メニュー作りで困っています。

    よく見かける、マウスをクリックしなくてもカーソルをある部分に置くと、違うテキストや画像がでてくるようにするにはどうしたらいいでしょうか?あの動作の名称がせめて解ればWEBで検索できますが、それすらもわかりません。ロールオーバーではないと思うんですが。。。 どなたか助けてください。 ちなみに、Studio MX 2004 proを使ってます。 参考までに私が言いたい物が置いてある、マクロメディア社のサイトのアドレスです。 http://www.macromedia.com/jp/ 一番上の「ホーム」「製品」...etcのどれかにカーソルを合わせると下に該当するメニューが表示されます。これは簡単にできるような物ではないんでしょうか?

    • ベストアンサー
    • Flash

専門家に質問してみよう