• 締切済み

fixedでメニューを表示した後のアンカーリンク

Java Scriptで開閉式のメニューを position:fixed で画面全体で前面で表示した後、 アンカーリンクでページ内を移動すると、 実際には画面内でスクロールされて頭出しはされているのですが、 position:fixedのメニューは前面に表示されたままになってしまいます。 もちろんメニューを消すボタンなどをクリックすれば消すことは可能なのですが、 操作的にはわずらわしいので、 アンカーリンクで頭出しをすると同時に、 リフレッシュなどをしてposition:fixedのメニューを非表示に戻す方法はないでしょうか? 分かりづらい説明ですみませんが、よろしくお願いいたします。

  • tetish
  • お礼率91% (234/256)
  • HTML
  • 回答数1
  • ありがとう数0

みんなの回答

回答No.1

実際のソースを貼ってもらえると助かりますが。 開閉式なんだったら、 アンカーを押したときに、 $(そのPOS:FIXEDのタグ).hide();または、アニメーションhide だけかと。 要するにリンク押しと当時に、「閉めれば」いいだけなのでは? とは思いますよ。

関連するQ&A

  • リンク先の違うページの指定場所へスクロールさせ表示させたいです。

    リンク先の違うページの指定場所へスクロールさせ表示させたいです。 リンクをクリックすると、アンカー先に飛ばし 画面を、常に下に-100ずらして表示させています。 同ページ内の場合は、 location.href = "#●●"; window.scrollBy( 0, -100 ); で対処できましたが、 違うhtmlのアンカーに飛ばし、下にずらして表示させる場合は どのようにするのか方法がわかりません。 Javaスクリプトに不慣れなので、 どなたかご存知の方、よろしくお願いいたします。

  • アコーディオンメニューをアンカーリンクで開く

    アコーディオンメニューで困っています。 色々と調べているのですが、どうもうまく動きません。 ■やりたい事 アコーディオンメニューを使っていますが、同じページからのアンカーリンク、そして別ページからのアンカーリンクで飛んできた際に、隠れているアコーディオンを開いて表示した。 ■現状 ・アンカーリンク(A.html)-------------------- <a href="B.html#アンカー名">リンク</a> ・アコーディオン設置先(B.html)------------------ <div class="aaa" id="アンカー名"> <p class="title"> アコーディオンタイトル </p> <p class="bbb"> アコーディオンの内容表示 </p> </div> ・js--------------------------------------- $(document).ready(function(){ $(".bbb").hide(); $(".title").click(function(){ $(this).toggleClass("active").next().slideToggle("slow"); $(location.hash).next(".bbb").slideToggle("slow"); }); }); 現状はこのような状態なのですが、アンカーでの動作をしてくれません。 分かる方いらっしゃいましたら、是非教えてください

  • 別ページからのアンカーリンクについて

    現在、下記jqueryを使用して横スクロールサイトを制作中です。 http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/ 上記サイトを参考に 設置し問題なく動作しているのですが、 アンカーリンクを使用して 別ページから、各コンテンツにジャンプさせたいと思っています。 設置しているナビゲーションメニューからだと スムーズにスクロールし、正常に動作(コンテンツが一番左の位置でストップ)するのですが、 別ページから ○○.html#アンカーリンク名 というふうに リンクを張ると、表示位置が一番左の位置ではなく スクロールの途中でずれて止まってしまいます。 CSSも含め色々といじってはみたのですが まったく原因がつかめず苦戦しております。。 以下のスクリプトでは、ナビゲーションのリンクをクリックすると 動作するようにしていますが、 アンカーリンク名が○○の場合は、○○に表示させる といった命令のようなことはできるのでしょうか? 知識不足で申し訳御座いませんが お分かりの方がおられましたら宜しくお願いいたします。 $(function() { $('ul.nav a').bind('click',function(event){ var $anchor = $(this); /* if you want to use one of the easing effects: $('html, body').stop().animate({ scrollLeft: $($anchor.attr('href')).offset().left }, 1500,'easeInOutExpo'); */ $('html, body').stop().animate({ scrollLeft: $($anchor.attr('href')).offset().left }, 1000); }); });

  • 【CSSハック】アンカーポイントの位置をずらしたいのです

    WIN IEのみで失敗してしまうCSS問題についてご質問させてください! 『ページ内アンカーリンクのポイントをブラウザ画面トップから100pxほど下にずらしたポイントに表示したい』 というのも、ブラウザ画面トップにposition:fixed;のオブジェクトを配置しているため、 アンカーリンクでページ内ジャンプした際に先頭部分が上記オブジェクトの後ろに隠れてしまうのです。 <a name="XXXXX" id="anchor"><img src="XXXXXXX"/></a> このタグに対してのCSSは #anchor{ position:relative; top:-100px; left:0; } このコマンドで Mac環境(safari / Firefox) Win環境(Firefox) では成功したのですが、IE6 / IE7では認識せず、スクロールバーがなぜか2本重なるバグ?が表示されるのです。 このような現象の原因と対策がございましたらお教えいただきたいです。 どうぞよろしくお願いします! (横2つ割のインラインフレームは可能なら使いたくないのですが、他に方法がなかったら仕方ないのでしょうか。。)

    • 締切済み
    • CSS
  • position:fixed;でメニューを右側に固定したい

    position:fixed;でメニューを右側に固定したい こちらを参考にサイドバーが固定された2カラムのサイトを作っています。 http://www.css-lecture.com/log/css/049.html 上記のサイトを見てくだされば分かると思うのですが、サイトバーはすべてを囲うwrapperボックスの左端に固定されています。 これをwrapperボックスの右端に持って行きたいのですが、うまくいきません。 position:fixed;にrightやleftを指定すると、wrapperボックスではなくブラウザの端に寄ってしまいます。 absolutoではスクロールされてしまいますし……。 自分なりに調べていろいろと試してみたのですが、解決することはできませんでした。 javascriptや疑似フレームは出来るだけ使いたくありません。 右端に持って行くことは可能なのでしょうか?現状では無理なのでしょうか? HTML <div id="wrapper"> <div id="menu"></div> <div id="main"></div> </div> CSS #wrapper{ width:700px; margin:0 auto; background-color:#FFF; position:relative; } div#menu { width: 100px; background: #CCC; padding:10px; height:100%; position:fixed; top: 0px; z-index: 20; } * html div#subContents { position: absolute; top: expression(eval(document.documentElement.scrollTop+0)); } #main{ margin-left:120px; padding:10px; width:560px; position:relative; background-color:#FFF; } よろしくお願いします。

    • ベストアンサー
    • HTML
  • リンク アンカーポイント先を常に先頭に出すには..

    標準サイズで表示されるブラウザ画面程度の長さのページに (スクロールするまで長くない) アンカーポイントでリンクさせる事案がでてきました。 常にブラウザの頂点に各アンカーポイント先を表示させる ことなんてできるのでしょうか? ex アンカーポイントの順A   クリック→ Cが先頭みたいに     (たてにAbC) b           C

    • ベストアンサー
    • CSS
  • リンクに触れると表示される説明にリンクをつけたい

    こんばんは。Java Scriptで、「リンクに触れると説明を表示する」というのがありますが、その説明に、リンクを使いたいのですが、どのようにすればいいのでしょうか?

  • java scriptだと思うのですが、リンク画像をクリックするとペー

    java scriptだと思うのですが、リンク画像をクリックするとページは変わらずに画面全体が右へゆっくりスクロールし、そこに次のリンクが出てくる…といったHPを作りたいのですが、まだまだ初心者の為、記述方法が分かりません。質問内容に不足があるとは思いますが、ご回答お願いいたします。

  • x軸にはスクロールしない、ページ内リンクをスムーズにスクロールするスク

    x軸にはスクロールしない、ページ内リンクをスムーズにスクロールするスクリプトを探しています。 こだわりのページ内リンクスムーズスクロール scrollsmoothly.js http://d.hatena.ne.jp/KAZUMiX/20080418/scrollsmoothly などを色々試しまして、同ページ内のリンクはきれいに動くのを確認しました。 サイトはグローバルメニューが左にあり、横幅が広めのデザインです。 問題は、小さい画面閲覧する際、別ページからページ下部のアンカーへ飛んだ場合です。 一旦ページの最上部左に移動してからアンカーへスクロールするため、 斜め下方向へスクロールし、そこからページの先頭へ戻る場合斜め上にスクロールする 動きになります。 クライアントから動きが気持ち悪いというクレームがあったので、 x軸にはスクロールしない方法を探したのですがなかなかうまくいきません。 jQueryのサンプルなど有りましたら教えてください。

  • JAVA HTML スライドするアンカーポイント

    http://www.hosoo.co.jp/ ココにあります、メニューをクリックすると、アンカーポイントのような効果で、スライドして移動する方法を教えてください。 これもJAVAスクリプトを使ってるんですよね? 宜しくお願いします。

    • 締切済み
    • CSS