日産自動車さんのホームページ(http://www.nissan.co.jp)の様に、クリックしたところにメニューを表示させる方法を教えて下さい。

このQ&Aに関連する最新のQ&A

A 回答 (1件)

管理者より:


同等の質問があるのでそちらをご参照下さい

参考URL:http://www.okweb.ne.jp/kotaeru.php3?q=166068
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QJQueryでクリック時のタグの親子の関係について

以下のコードのspanをクリックするとspanとdivをクリックしたことになってしまいます。
spanをクリックしてもdivをクリックしたことにしないようにするには
どうすればよいのでしょうか?
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
div {
padding: 20px;
background: #EEE;
}
</style>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(function(){
$("div").click(function(){
console.log("click div");
});
$("span").click(function(){
console.log("click span");
});
});
</script>
</head>
<body>
<div>
<span>Click!</span>
</div>
</body>
</html>

以下のコードのspanをクリックするとspanとdivをクリックしたことになってしまいます。
spanをクリックしてもdivをクリックしたことにしないようにするには
どうすればよいのでしょうか?
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
div {
padding: 20px;
background: #EEE;
}
</style>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(function(){
$("div").click(function(){
console.log("click div");
});
$("span").click(function(){
consol...続きを読む

Aベストアンサー

ライブラリを使用しない場合は、
divとspanの両方にイベントハンドラを登録した場合、"click span"のあとに"click div"の2つのアラートが順番に出るはずです。

jQueryを使用した場合に"click div"しか出ないのであれば、
jQueryの内部処理にて、click spanが抑制されていると思います。

すみませんがjQueryについてはわかりかねますので、内部処理の抑制を解く方法を知らないのですが、
.click()を呼び出す(イベントハンドラを登録する)順番を逆にするとどうでしょうか。

$(function(){
$("span").click(function(e){
e.stopPropagation();
console.log("click span");
});
$("div").click(function(e){
e.stopPropagation();
console.log("click div");
});
});

その上で、No.2に書かれているような処理の伝播を止める方法を使えばいいと思います。

--------
別の方法として。

<div>にだけイベントハンドラを登録して、その内部でどの要素がクリックされたかを判断してみてはどうでしょうか。

$(function(){
$("div").click(function(){
if( $(this).get(0).nodeName==='SPAN' ){
console.log("click span");
}else{
console.log("click div");
}
});
});

ライブラリを使用しない場合は、
divとspanの両方にイベントハンドラを登録した場合、"click span"のあとに"click div"の2つのアラートが順番に出るはずです。

jQueryを使用した場合に"click div"しか出ないのであれば、
jQueryの内部処理にて、click spanが抑制されていると思います。

すみませんがjQueryについてはわかりかねますので、内部処理の抑制を解く方法を知らないのですが、
.click()を呼び出す(イベントハンドラを登録する)順番を逆にするとどうでしょうか。

$(function(){
$("span").click(fun...続きを読む

Qhttp://www.jqa.jp/index.html

http://www.jqa.jp/index.html
のようにブラウザの横幅を変更しても
内容が左右真中に表示され
ていますがこのようにするには、
どのようにすればよいのでしょうか?
よろしくお願いいたします。

Aベストアンサー

このような感じですか
最大800px,最小500px内で、ウィンドウ幅の60%で中央に表示される。

とりあえずサンプル・・
Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )
W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input )
で(HTML4.01Strict)検証済み

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>サンプル</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<link rev="made" href="mailto:hoge@hoge.com" title="send a mail" >
<link rel="START" href="../index.html">
<style type="text/css">
<!--
html,body{
margin:0px;padding:0px;background-color:rgb(200,200,200);
}
body>div{
width:60%;min-width:500px;max-width:800px;margin-left:auto;
margin-right:auto;background-color:white;padding:10px;
border:none;}
p{text-indent:1em;}
div{ margin:0.5em 1em; border:solid 2px blue;}
-->
</style>

</head>
<body>
<div>
<h1>サンプル</h1>
<p>http://www.jqa.jp/index.htmlのようにブラウザの横幅を変更しても、内容が左右真中に表示されていますがこのようにするには、どのようにすればよいのでしょうか?</p>
<p>よろしくお願いいたします。</p>
<div>
<p>こんな感じですかね。</p>
</div>
</div>
</body>
</html>

このような感じですか
最大800px,最小500px内で、ウィンドウ幅の60%で中央に表示される。

とりあえずサンプル・・
Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )
W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input )
で(HTML4.01Strict)検証済み

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; ...続きを読む

QワードプレスでjQuery 右から飛び出ているボタンをクリックするとボックスがスライドして出てくるよ

ワードプレスでjQuery

右から飛び出ているボタンをクリックするとボックスがスライドして出てくるようにしたのですが、ワードプレスでjQueryを使う方法が調べてもよくわかりませんでした。
(調べるとたくさん出てくるのですが、その通りにやってもうまく動きません)

この件で何日も悩んでいて本当に困っています。
知識のある方、教えていただけませんか?

どうか宜しくお願いします(TT)

Aベストアンサー

>これをダウンロードして、どこへダウンロードしたデータをアップロードしたらよいのでしょうか?
答えはすべて前回のところにありますよ。
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/css/jquery.bxslider.css">
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.bxslider.min.js"></script>
これです。
なので、私の場合は、テーマの中に「css」と「js」フォルダを作ってその中に入れているので、js/jquery.bxslider.min.jsこのようにしてます。
すべてここで聞くのではなくて、ネットで調べたらたくさんでてきます。
今後自分で作っていくのであれば検索して解決していかないと何もできませんよ。

Qhttp://www.bohr.ne.jp/

http://www.bohr.ne.jp/

こちらのサイトのメインビジュアル(フラッシュの最後の写真)のような、
人以外の背景を自然に白くした感じにするにはどうやっているのでしょうか?
フォトショップで可能でしょうか??

ご存知の方、ご教授お願いします!

Aベストアンサー

パスで切り抜きしたあと、そのパスを選択範囲に変えて
レイヤーマスクで不必要な場所をかくしてしまえばいいと思います。

できれば解像度の高い大きい状態の写真で切抜して
レイヤーマスクをかけたあと、必要な大きさに縮小してしまえば
より綺麗になるかと。

Q1枚の画像をクリックして複数の画像と詳細を入れられるJQueryのLightBoxプラグイン

JQueryのLightBoxプラグインでは、1枚の画像をクリックしたら、他の並べてある画像も見れてしまうと思います。

今回、1枚の画像をクリックして複数の画像と詳細を入れられるLightBoxのプラグインを探しています。

何がしたいかと言いますと、例としましては、一覧の商品画像が並んでいて、その画像をクリックすると、その商品の他の画像も見れて、そこには、簡単な商品情報を写真の下にHTMLで記載できるようなタイプを探しています。

最初は、ポップアップのみ実装して、そこにスライドショーをはめ込み、下に詳細をHTML・CSSで作成していたのですが、どうしてもポップアップしてからのスライドショーがうまく動かず、ブラウザのウィンドウの横幅をずらずと、スライドショーが正常に動くのですが、色々CSSなどをいじってみたのですが、解決しなかったため、LightBoxのプラグインならやりたいことができるかと思い、探しているんですが、詳細情報をHTML・CSSで実装できないものばかりです。

そこで良いJQueryのプラグインを知っている方がいれば教えていただきたいです。

宜しくお願いします。

JQueryのLightBoxプラグインでは、1枚の画像をクリックしたら、他の並べてある画像も見れてしまうと思います。

今回、1枚の画像をクリックして複数の画像と詳細を入れられるLightBoxのプラグインを探しています。

何がしたいかと言いますと、例としましては、一覧の商品画像が並んでいて、その画像をクリックすると、その商品の他の画像も見れて、そこには、簡単な商品情報を写真の下にHTMLで記載できるようなタイプを探しています。

最初は、ポップアップのみ実装して、そこにスライドショーをはめ込み...続きを読む

Aベストアンサー

こんにちは
少し調べてみただけなので、ヒントにでもなれば程度ですが・・・


>一覧の商品画像が並んでいて、その画像をクリックすると、
>その商品の他の画像も見れて、そこには、簡単な商品情報を
>写真の下にHTMLで記載できるようなタイプを探しています。
LightBox系のプラグインは数多くあるので種々様々ですが、画像のグループ化ができて、キャプションを付けられるものが多くあります。
画像グループの一つだけを表示して(残りは非表示)おいて、利用すれば似たようなことが実現可能と思います。
ただし、大抵の場合、キャプション部分はtitle属性やrel属性を利用していると思いますので、テキストになってしまいます。

>ポップアップのみ実装して、そこにスライドショーをはめ込み、
>下に詳細をHTML・CSSで作成していたのですが、どうしても
>ポップアップしてからのスライドショーがうまく動かず~
この方法もありのように思います。
ポップアップの実装はライブラリを利用したのでしょうか?
LightBox系のライブラリの多くは、背景レイヤや表示レイヤなどの構成があるので、先にこれらの要素を作成しておいて、その中に表示する要素の『コピー』を作成して表示しているものが多いと思います。
それなので、最初のHTML要素にスライドショーを設定しても、コピーには反映されないということが起こっていたりしませんか?
表示の際のイベントを取得できるAPIを用意しているプラグインを利用すれば、セット後に表示用の要素に対してスライドショーの初期設定を行うようにすれば実装可能ではないかと想像します。
ただし、この場合は画像ではなくコンテンツを表示できるタイプのプラグインである必要がありますね。

>詳細情報をHTML・CSSで実装できないものばかりです。
上にも述べましたが、画像専用ではなく、コンテンツを表示できるタイプのものを選べばHTML、CSSともに利用可能と思います。
ただし、要素のコピーが表示される可能性があるので、CSSの要素指定には少しだけ注意が必要かもしれません。

>ポップアップした写真をクリックすると、外部リンクへいき、
>矢印をクリックすると次の画像が見れる仕様にできるものを探しています
通常のLightBox系のものでは、対象の指定が
 <a href="one.jpg" title="Image Caption">
  <img src="one_thumb.jpg" alt="">
 </a>
のような構造になっているものが多いと思いますので、これに対してさらにリンクを設定しようとすると、別途工夫が必要になりそうです。
それよりも、インラインコンテンツなどを表示可能なプラグインを利用なさる方が、HTMLでのリンク設定が可能になるので、扱いは楽になりそうですね。

数は少ないかも知れませんが、コンテンツ表示でグループ化できそうなものもあるようです。
配布サイトの雰囲気を見ただけで、実際にはテストしていませんので明言できませんが、例えば・・・
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#prettyPhoto
下の方にある「Inline content」の例を見ると、複数のコンテンツをページングしていますので、このような利用方法で実現の可能性があるのではないかと推測します。

あるいは、
http://fancybox.net/home
fancyboxもコンテンツ表示が可能なプラグインですが、一番下の「manual call 」で、manual2の指定では直接に複数の画像を指定しています。
exampleは画像なのですが、対象の指定にインラインコンテンツ(またはjQuery オブジェクトやHTML要素など)を指定できるなら、同様に実現できそうに思えます。
ただし、このタイプの書式の説明がサイト内をざっと見ても見当たらなかったので、残念ながら可能なのかどうかがわかりません。

※ 簡単に調べてみただけなので、とてもお役には立たないと思いますが、少しはご参考にでもなれば・・・

こんにちは
少し調べてみただけなので、ヒントにでもなれば程度ですが・・・


>一覧の商品画像が並んでいて、その画像をクリックすると、
>その商品の他の画像も見れて、そこには、簡単な商品情報を
>写真の下にHTMLで記載できるようなタイプを探しています。
LightBox系のプラグインは数多くあるので種々様々ですが、画像のグループ化ができて、キャプションを付けられるものが多くあります。
画像グループの一つだけを表示して(残りは非表示)おいて、利用すれば似たようなことが実現可能と思います。
ただ...続きを読む

Qアドレスに http://www.○○○.com/%20 って?

ページを公開して、ネット上から自分のサイトを見てみたんですが、
トップページからリンクされたページを段々に開いていって見ていて、
何となくプロパティーを開いて見ていたら、アドレスの表示が

http://○○○.jp/3%20○○○○○○.html
って表示されているんです。

保存してファイル名とは違っているけど問題ないのでしょうか?

この %20っていうのは一体何の意味ですか?

どなたか教えてください。

Aベストアンサー

> 問題ないのでしょうか?
場合によっては「ファイル名が違う」ので表示エラーになります。
サーバによってはアップロードできません。
ファイル名、フォルダ名は基本、半角英数のみで名前をつけましょう。
(記号はハイフン「-」アンダーバー「_」程度にとどめるのが吉)

QjQueryでネスト構造の
  • がクリックされた時にそのidを取得する方法について
  • jQueryでネスト構造になっているリストがクリックされた時に、そのidを取得するプログラムを作っています。
    第一階層は取得できるのですが、第二階層の<li>をクリックすると二重に処理が動いたり、親要素の値が取得されてしまったりしてうまく動きません。

    jQueryでの取得方法を教えていただければと思います。

    [HTML部分]
    <ul id="sample">
    <li class="parent" id="1-1">項目1−1
    <ul class="children">
    <li class="chaild" id="2-1"></i>項目2-1</li>
    <li class="chaild" id="2-2">項目2-2</li>
    <li class="chaild" id="2-3">項目2-3</li>
    </ul>
    </li>
    <li class="parent" id="1-2">項目1−2</li>
    </ul>

    [jQuery部分]
    <script type="text/javascript">
    $(document).on('click', '.parent , . child', function (e) {
    var id = $(this).attr("id");
    alert(id);
    });
    </script>


    onクリックのセレクタの指定をいろいろと試してみましたが、下記のような結果となりうまく動作しません。
    ('.parent , . child')
    親は正しくidが取得できたが、子はすべて1-1となってしまい、正しく取得できない。

    ('li')
    親は正しくidが取得できたが,子は2-1と取得できてから、もう一度1-1と取得され、2回処理が動いてしまっている。

    ('.parent')
    親は正しくidが取得できたが、子は全て1-1と取得される。

    ('#sample>.parent li')
    子要素は正しく取得できるが、親要素が取得できない。

    jQueryでネスト構造になっているリストがクリックされた時に、そのidを取得するプログラムを作っています。
    第一階層は取得できるのですが、第二階層の<li>をクリックすると二重に処理が動いたり、親要素の値が取得されてしまったりしてうまく動きません。

    jQueryでの取得方法を教えていただければと思います。

    [HTML部分]
    <ul id="sample">
    <li class="parent" id="1-1">項目1−1
    <ul class="children">
    <li class="chaild" id="2-1"></i>項目2-1</li>
    <li ...続きを読む

    Aベストアンサー

    クリックしたliだけつかみたいなら、e.stopPropagation()してバブリングを抑止してください
    <script>
    $(document).on('click', 'li', function (e) {
    var id = $(this).prop("id");
    console.log(id);
    e.stopPropagation();
    });
    </script>

    <ul id="sample">
    <li class="parent" id="1-1">項目1-1
    <ul class="children">
    <li class="chaild" id="2-1">項目2-1</li>
    <li class="chaild" id="2-2">項目2-2</li>
    <li class="chaild" id="2-3">項目2-3</li>
    </ul>
    </li>
    <li class="parent" id="1-2">項目1-2</li>
    </ul>

    [jQuery部分]

    Qhttp://jp.technics.com/は手作りか、何かの専用ソフトで作成か

    http://jp.technics.com/ のHPが気に入りました。
    以上HPの作成にあたり、エディタに直接入力して作成したHPか
     何か専用ソフトで作成されたのか知りたいです。
    皆様どう判断されますでしょうか^^
    確かにキーの
      Gogleクロム~
      Ctrl+Sから、→ファイルの種類→ウェブ、完全ページで保存ずると
     見事に動いて、直ぐ転記できるのはうれしいです。
      明日からWebデザイナーさんで、やっていけそうですが・・
     冗談はさておき よろしくお願いいたします。

    Aベストアンサー

    Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
    とか
    The W3C Markup Validation Service( http://validator.w3.org/ )
    ・・・この程度で気に言ってもしごとにゃならない。
    firefoxの Html Validator( https://addons.mozilla.jp/firefox/details/249 )でもエラーで真っ赤っか。

     癖のあるclass名などから、Dreamweaverだとは思うけど、そうとうテキストで書き直しているので詳細は不明。
     googleChromeじゃ製作には無理でしょ。その程度の機能はどのブラウザも持っている。単にflashを使わずjqueryを使っているということ。
     開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )の豊富なfirefoxは欠かせない。firebugで仕組みは調べてみましょう。

    そもそもHTML5で
    <body id="pagetop">
    <div id="page">
    <div id="page-header">
    <div class="container">
    <div id="identify-logo"></div>
    <div id="page-header-nav"></div>
    </div>
    </div>
    <div id="wrapper">
    <div id="wrapContent">
    <div class="breadcrumb">
    こりゃないだろう。
    <body>
    <article>
    <header>
    <h1></h1>
      <nav></nav>
    だろう・・・
     こんなの真似する奴がいるから、いつまでも旧態依然の物であふれる

    Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
    とか
    The W3C Markup Validation Service( http://validator.w3.org/ )
    ・・・この程度で気に言ってもしごとにゃならない。
    firefoxの Html Validator( https://addons.mozilla.jp/firefox/details/249 )でもエラーで真っ赤っか。

     癖のあるclass名などから、Dreamweaverだとは思うけど、そうとうテキストで書き直しているので詳細は不明。
     googleChromeじゃ製作には無理でしょ。その程度の機能はどのブラウザも持っ...続きを読む

    QjQueryで右クリック禁止後に再度有効にする方法

    以下のコードでブラウザ上の右クリックを禁止にしましたが、
    再度再開をしたい場合どのように記述すればよろしいのでしょうか?

    $(document).bind('contextmenu', function(e) { return false; });

    jQueryのverが古いのは気にしないで下さい。
    是非宜しくお願い致します。

    Aベストアンサー

    $(document).unbind('contextmenu');

    もしくは

    var お控えください = true;
    $(document).bind('contextmenu', function(e) { return !お控えください; });
    // 再開時
    お控えください = false;

    Qhttp://www.mgame.com/ このページのナイトの広告はどうやってつくられてるのでしょうか?

    http://www.mgame.com/ このページのナイトの広告はどうやってつくられてるのでしょうか?2回目以降はみれなくなります。

    Aベストアンサー

    作り方はマクロメディア社(現在はAdobeに買収)のFlashというソフトを使用して作ります。
    他社からもFlash作成ソフトは出ていますが本格的に始めるのならやはり本家でしょう。

    作り方は簡単ではありません。
    基本的にはタイムラインに画像や音声、スクリプトを配置して動きをつけていきます。

    サイト内で勉強されるのは困難だと思います。
    まずは初心者向けの書籍を読んで勉強した方がいいのではないでしょうか。

    参考URL:http://www2.netwave.or.jp/~light/


    人気Q&Aランキング

    おすすめ情報