-
ID:HE/N7f さんの質問

以下のようなナビゲーションがあります。
<nav>
 <ul>
  <li><a href="#">会社概要</a></li>
  <li><a href="#">製品紹介</a></li>
  <li><a href="#">お問い合わせ</a></li>
 </ul>
</nav>
これを使って、次の要件を満たしたものを作りたいです。

1、画面がスクロールしていないときはそのままメニュー表示
2、スクロールされたら、画面上部に固定のメニューボタン(画像)を表示
3、メニューボタンをクリックするとツールチップのようにリンクが出る
4、リンククリックでリンク箇所へ遷移し、該当箇所へ遷移したらツールチップは非表示
5、その他、ツールチップが出ている状態でそれ以外の場所をクリックすると、ツールチップは消える

クラスの切り替えで、1と2まではjQueryでなんとかやってみたのですが、それ以降で悩んで止まってます。
参考になりそうなサイトでもいいので、アドバイスがほしいです。

みんなの回答 4 件

ID:N0AOYn さんの回答

  • 完成後のデザイン画像を添付する
  • 自分がどこまでjsとcssの知識があるのか
  • 現在完成している箇所とどこがどうできないのか

を教えて頂いても宜しいですか?

ID:oibhlr さんの回答

> 参考になりそうなサイト
Twitter

ID:F5fUNb さんの回答

考えている通りに条件付きでイベントをそれぞれ設置していけばできるでしょ。

ID:onFP9f さんの回答

プログラムの全容を書くのはあれだからコツだけ教えよう。

  • まず、メニュー展開時の状態をHTMLとCSSでコーディングをする
  • メニューの開閉はクラスによって管理する
  • addClassやremoveClassを使い上記クラスのオンオフを切り替える

これだけ理解すればそんなに複雑なプログラムを書かなくても実現できるよ。

最終更新日:2014-12-22 (2,153 views)

関連するトピックス

ページ上部に戻る