- 締切済み
CSSだけでアニメーション・ドロップダウンメニュー
CSSでアニメーション・ドロップダウンメニューを作りたいのですが http://ri-mode.com/rainbow/2014/06/11/simple_css_dropdown_menu/ ここを参考にしているのですが、 ホーム・会社案内・リクルート・お問い合わせ各ページがあるのですが 例えば、お問い合わせページを見ている時は そのページのボタンの背景が違うようにしたいのですが どうすればいいのでしょうか？ ご教授頂けたらありがたいです。
- kiyoshi47
- お礼率14% (2/14)
- デザイナー・クリエイティブ職
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- AsarKingChang
- ベストアンサー率46% (3467/7472)
>例えば、お問い合わせページを見ている時は >そのページのボタンの背景が違うようにしたいのですが >どうすればいいのでしょうか？ 背景って、全体ですか？であれば、これとは無関係に body { background-image:URL(アドレス); } を該当ページごとに変えて送り出すだけでは、駄目なのでしょうか？ 意味が違ったらすいません。
関連するQ&A
- CSSのドロップダウンメニューが見出しで切れる
CSSでドロップダウンメニューを作りました。 ページの上部に横並びの状態です。 メニューを押すと下に4項目程度のリストが下がってきます。 今まで本文の見出しには<h1>タグを使用せず画像でのみで作っており、リストには影響がありませんでした。 <h1>を使用しCSSで装飾したところ、ドロップダウンメニューの<h1>にかぶる部分が切れてしまいます。 解決策はありますでしょうか。 宜しくお願い致します。
- ベストアンサー
- CSS
- タブレットのドロップダウンメニューについて
会社のWebの管理をしていますが、５年前に作ったサイトはJavaScriptを使ってドロップダウンにしました。 しかしタブレットではドロップダウンメニューが開かずページの遷移ができません。 メニューを修正してタブレットやスマホでもリンク先のページに遷移させるのにはどうしたら良いか教えて下さい。 商品のところはドロップダウンで20個程表示されます。 Webについてはほぼ素人でHTMLとCSSは独学で勉強し、JavaScriptは本やサイトのサンプルデータを使わせていただいていて、内容についてはあまり理解していません。 タブレットやスマホではそもそもドロップダウンメニューが使えないようなのですが。 サイトで検索しましたが、今一参考にできそうなサイトにたどりつけませんでした。 アドバイスよろしくお願いします。
- 締切済み
- JavaScript
- CSSのドロップダウンメニューについて
お世話になります。CSSについての質問です。 添付の写真のようなメインナビゲーションのドロップダウンメニューについてですが、 赤丸の下線の部分の白線の位置（ドロップダウンメニューのスタート位置）を下げるにはどう記述したらいいでしょうか？ よろしくお願いします。 .main-navigation ul ul li a { background-color:#333!; border-top: 1px solid #fff; border-color: #fff; line-height: 1.5; padding-bottom: 14px; padding-top: 14px; }
- ベストアンサー
- CSS
- ドロップダウンメニューについて
javascriptのドロップダウンメニューの作成について質問させてください。 現在、あるサイトでグローバルナビゲーションにドロップダウンメニューを実装しようとしているのですが、壁にあたってしまいました。 ↓参考サイト http://jsajax.com/EditRunDemo.aspx こういったドロップダウンメニューなのですが、これを例にあげさせてもらうと、例えばこのメニューのDownloadというページをクリックしてDownloadページに自分がいる時はDownloadのドロップダウンメニューを"出さない"ということがやりたいのです。 自分なりに色々とやってはみたものの、javascriptの経験が浅いので正直なところよくわからないのが現状です。 どなたかこのような事例のサンプルを紹介しているサイトをお知りの方、もしくは解決法をご教授いただければ幸いです。 そこまで至らなくてもどのような手法を取ればできそうかということだけでも良いのでご意見をください。 よろしくお願いします。
- ベストアンサー
- JavaScript
- ドロップダウンメニューについて
JavascriptやJquoryを使わずにcssのみで、動きのあるドロップダウンメニューを作ることができました。 しかし、スマートフォンなどのタッチデバイスで動作確認をすると、メニューからサイドメニューが出っぱなしの状態になってしまい、引っ込んでくれません。 メニューの部分をクリックして開閉できるようにすればいいのでしょうか。やり方を教えて下さい。また、Javascriptを無効にしてる方でも問題なく使えるようにしたいです。
- 締切済み
- CSS
- CSS ドロップダウンメニュー ページごとに固定
こんんちは。 cssでホームページ作成中なのですが、独習では解決できない点があり ご教授いただけたら幸いです！ 下記サイトのテンプレートをもとに、カーソルを合わせるとドロップダウンで 階層メニューが表示されるサイドメニューをつくりました。 http://www.webdlab.com/template/dropdownmenu2/ カーソルオンで反転＋階層メニューの表示はクリアできたのですが。。 各ページを開いたときに、現在表示されているページにあたる箇所は、 カーソルが離れても文字を反転させたまま、またその階層メニューも常に表示の状態にしたいのです。 テンプレートCSSにうまく加筆できればと思ったのですが、うまくいきません。 何か方法はないでしょうか。 どうぞよろしくお願いします！
- 締切済み
- CSS
- ドロップダウンメニュー。
個人でＨＰを運営しているのですが、 この度、フレーム機能とドロップダウンメニューを使用してページを製作しました。 ところが、メニューから項目を選んでクリックしてちゃんと表示されるのですが、クリックしても何も表示されない部分（メニューの中の最初の表示部分や、ｈｔｍなど設定されていない部分）も何故か、何にもない真っ白なページが表示されてしまいます。 ドロップダウンメニューのソースはサンプルから頂いてきて、自分なりに何とか形になったのですが、上記のトラブルを解消するほどの知識がありません。 何卒、ご教授お願いいたします。 http://www003.upp.so-net.ne.jp/tochio-cinema/cinema_review.htm の右上にあるドロップダウンメニューです。 メニューの中の ＬＡＳＴ ＵＰＤＡＴＥと、その下の6/26をクリックすると、下のフレームが真っ白になってしまいます。
- ベストアンサー
- HTML
- css ドロップダウンメニュー
http://ri-mode.com/rainbow/2014/06/11/simple_css_dropdown_menu/ 上記のHPを参考にして、CSSでドロップダウンメニューをつくろうと試みましたが、上手く作動しません。どこが間違っているのでしょうか。 〇Html文------------- <!DOCTYPE html> <html lang="ja"> <head> <title>〇〇</title> <meta charset="UTF-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link href="style_test.css" rel="stylesheet" > </head> <body> <div class="container"> <div class="menu"> <ul> <li><a href="#">利用案内</a></li> <li><a href="#">あいうえお</a> <ul> <li><a href="#">かきくけこ</a> </li> <li><a href="#">さしすせそ</a> </li> <li><a href="#">たちつてと</a> </li> </ul> </li> </ul> </div><!--menu--> </div><!--container--> </body> </html> 〇style_test.css--------- @charset "UTF-8"; /*================================================ * CSSリセット ================================================*/ html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight:normal;}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle} /*================================================ * 一般・共通設定 ================================================*/ body{ color:#000; font-size: 14px; line-height: 1.4em; font-family: Avenir, "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro" , "メイリオ" , Meiryo , Meiryo UI , "ＭＳ Ｐゴシック" , "MS PGothic" , "Microsoft Yahei", "PingHei", "Malgun Gothic", "Yoon Gothic", sans-serif; background:#fff; } #container { overflow:hidden; width:1000px; margin: 0px auto; background:#fff; } /*================================================ * メニュー ================================================*/ .menu { clear: both; overflow: hidden; margin: 16px auto; } .menu ul { margin:0; padding:0; } .menu ul li { list-style: none; margin:0; padding:0; font-size:13px; float: left; position: relative; width: 110px;/*親メニューの幅*/ height: 35px;/*親メニューの高さ*/ line-height: 35px; background:#08046c;/*親メニューの背景色*/ color: #fff;/*親メニューの文字色*/ text-align:center; font-weight:500; } .menu ul li a { color: #fff; display: block; text-decoration: none; } .menu ul li:hover, .menu ul li a:hover { background:#085af5;/*ホバー時の親メニューの背景色*/ color:#fff;/*ホバー時の親メニューの文字色*/ } .menu ul li ul { position: absolute; top: 35px;/*親メニューの高さと同じにする*/ width: 110px; z-index: 100; } .menu ul li ul li { visibility: hidden; overflow: hidden; width: 110px;/*サブメニューの幅*/ height: 0; background:#041fb5;/*サブメニューの背景色*/ } .menu ul li ul li:hover, .menu ul li ul li a:hover { background:#08046c;/*ホバー時のサブメニューの背景色*/ } .menu ul li:hover ul li, .menu ul li a:hover ul li{ visibility: visible; overflow: visible; height:35px;/*サブメニューの高さ*/ z-index: 10; } .menu * { -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; }
- ベストアンサー
- CSS
- ドロップダウンメニューに関する質問。超初心者です。
ドロップダウンメニュー（親メニューだけgif画像で子メニューはcssで表示）を作りたいと思っています。 javascript又はCSS+htmlを使ってドロップダウンメニューを作りたいと良いサンプルを探しております。 親メニューは画像で、子メニューはcssで表示させたいと思います。 サイドメニューとして、縦並びに配置して、オンマウスで右側に子メニューのリストが展開するように。 ネット上でサンプルを探しているのですが、全部cssで展開だったり、全部画像で展開だったりして、 親メニューだけ画像で、子メニューはcssで表示というのがなかなかみつかりません。。 超超初心者の私にどなたかご教授願えないでしょうか。 よろしくお願い致します。m(_ _)m
- ベストアンサー
- JavaScript
- WordPress＞ドロップダウンメニューの位置を
WordPressの固定ページ上部にドロップダウンメニューを作りたいのですが。 画像の通り、カーソルをタブ1に合わせた時に タブ1から凄く離れた場所（ページ右端）に ドロップダウンメニューが表示されてしまっています。 これをタブ1の直下に持ってくる方法が知りたいです。 このタブ1とドロップダウンメニューを設定した管理画面の状態は 画像の通りです。 どこをどう直せばタブ1の真下にドロップダウンメニューを持ってくることができるのか、教えていただきたいです。 どうぞよろしくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
お礼
AsarKingChangさん 試してみます！ ありがとう御座います。