2012-03-21 43 views
1

トグルメニューがあります。コードと機能についてはhttp://jsfiddle.net/Wp2em/41/をご覧ください。メニューの切り替えの切り替え

同じコードを使用している実際のサイトでは、h3(カテゴリ1、2つ目は& 3)をクリックするたびに、そのサブメニューが少し下に切り替わり、ページが変更されます新しいh3リンクページに移動し、サブメニューが新しいページで一緒に折りたたまれます。

親ページ/新しいh3リンクページが開いているときに、サブメニューが開いていると言うことができる方法はありますか?これはサイドバーの効果があるbank siteを参照してください。トグルメニューを希望します。

ありがとうございます!

+0

あなたがそのページにいるときに、メニュー要素のクリックイベントをトリガーするだけです。 – j08691

+0

こんにちは@ j08691、あなたの高速応答に感謝します。それは、すべてのh3ページでクリックイベントをトリガーする必要があることを意味しますか?あなたが私にいくつかの例/コードを教えてもらえますか?私はまだ学んでいます:)ありがとう! – grumpypanda

+0

URLをチェックして、ページが一致するとクリックをトリガーするだけです。 – j08691

答えて

2

はここにある私のfiddle

あなたが行う必要がありますすべてはあなたが現在オンになっているとメニューがページのロード後に開くべきである李上のクラス「currentPageに」を入れています。私はまたあなたのCSSのいくつかを動かしましたので、今や少しスムーズに動くはずです。

**フィドルコードが更新されました。現在のURLを見て、それに一致するリンクをcurrentPageに設定します。また、別のメニューが開いている場合は、別の親メニューをクリックすると閉じます。

* *フィドルコードが更新されました。さて、あなたが矢印をクリックすると、メニューは拡大し、リンクには行きません(銀行サイトのように)。また、すべての親H3にアンカータグを配置する必要がある場所を変更しました。

+0

こんにちはコールマンデ、ご返信ありがとうございます。あなたのコードをローカルに移動しましたが、残念ながらh3タグはもう機能しません。 h3をクリックするたびにメニューが切り替わりますが、リンク先のページは開いていません。また、私はvarのパス名= window.location.pathnameを識別する必要があります。各ページに?どうすればいいのですか?ご協力いただきありがとうございます! :) – grumpypanda

+0

[フィドル](http://jsfiddle.net/colemande/LcsLr/12/)が更新されました。各ページにパス名を設定する必要はありません。 – colemande

+0

フォローアップのおかげでありがとう、新しいフィドルからコードを手に入れましたが、カテゴリ1とカテゴリ3のサブメニューはサブメニューの切り替えだけで、新しいリンクページは表示されません。それを修正する方法はありますか?ありがとうございました! – grumpypanda

0

ページが読み込まれ、サブメニュー(ul.second_level)が生成された場合(つまりPHPから)、表示する必要があるサブメニューのactiveのcssクラスを解析します。

ul.active { 
    display: block 
} 

ul.second_level { 
    display: none 
} 

これは、あなたのクリック機能に加えてあります。アニメーションを開始するのでクリックイベントをトリガーしないでください(あなたが望んでいないと思われる)。

更新:

それはかなり基本的なものですが、私はあなたのメニューのHTMLコードを作成する方法を知りません。 PHPとデータベース(例えば)を使ってメニューを作成している場合は、あなたがいるページですべてのサブメニュー項目をチェックしてください。ページがサブメニューのページの1つである場合、そのサブメニューでクラス「アクティブ」を設定します。 CSSは残りの部分を行います(このサブメニューを表示し、他のサブメニューを非表示にします)。

静的なページをお持ちの場合は、javacriptを使用して、ページの種類を確認してください(例:window.location.href)。残りは同じです。

+0

こんにちはマイキー、ご返信ありがとうございます。申し訳ありませんが、私は提案で少し失われています。もう少し詳しく教えてもらえますか?私はあなたの方法で私の目標を達成する方法を理解することができるので、私は一見を持つことができる任意のコード/チュートリアルがありますか?どうもありがとう! – grumpypanda

+0

詳細を明確にするために私の答えを更新しました –

0

これはあまり簡単ではありません。私は非常に似た問題を抱えていましたが、ページを同じURLにポストしていましたので、H3のIDのリストを隠しフィールドに格納していました。

あなたは新しいページにまっすぐナビゲートしているので、これを行うにはクッキーを使用する必要があります。アイデアは、あなたがH3を開いてそれを閉じるたびに削除するたびに、クッキーを作成してその上に値を設定することです。これを行うにはthis pluginを使用できます。次に、別のページを開くと、スクリプトはH3を読み取り、Cookieから開いて開きます。

もう1つの方法は、開いた/閉じたH3情報をサーバーに戻してセッションデータに保存し、それを使用して新しいページのHTMLを構築し、正しいH3がオープンされているようにすることです。

+0

こんにちはジェームズ、あなたの返信をありがとう。私はそれを制御するためにいくつかのJavaScriptを使うことができたと思っていた。私はまだ学習過程にある、それはあなたが提案したプラグインでメニューを制御するためにいくつかのPHPを使用する必要があることを意味しますか?私の問題を解決するために調べることができるチュートリアル/コードはありますか?あなたの助けをありがとう:) – grumpypanda