2007/1/11 木曜日

ポップアップサブメニュー

Filed under: ネットショップ「綺麗印影」 — 番頭 @ 15:14:48

ポップアップサブメニュー綺麗印影webページをより使いやすくするため、年末年始の間、一つの仕様変更を計画しておりました。

左カラムの商品メニューから、マウスをあわせるとポップアップメニューガ現れるようにし、どの画面からも全商品への説明ページへアクセスできるようにいたします。

webページを再構築する(見た目はほとんど変わりませんが)ため、実装には1週間ほどかかると思いますが、この度ようやく実装の目処がついたので、ご報告申し上げます。

なお、このシステムの導入に、Calmさんの「Hopup Javascript」を利用させていただきました。すばらしいスクリプトをおつくりいただき、感謝しております。

「Hopup Javascript」はjavascriptの知識がなくとも、説明書を見てHTMLを細工するだけで実装できると言う、とてもすばらしいスクリプトです。

しかし、残念ながら私の環境ではとある事情でそのままでは使えませんでしたので、少し細工をさせていただきました。

 1.<div>タグを消去する仕様を変更
「Hopup Javascript」は、ポップアップする(=初期状態で表示を隠す)サブメニューを<div>タグで囲む仕様となっております。
そして<div>タグ内の部分を自動的に表示しなくする(display:none;のstyleを挿入する)仕組みになっております。
しかし、綺麗印影webページでは、CSSでレイアウトを設定するために、全ての箇所が<div>タグで囲まれているため、「Hopup Javascript」を導入すると、ページが一切表示されなくなります
特定のidを持つ<div>タグのみ消す仕様にはなっておらない模様です(calmさん間違っていたら申し訳ございません)。
また、<div>タグと同様の働きを持つ別のタグを使うことが出来れば問題は解決しますが、そのようなタグは存在しません。

そのため、「Hopup Javascript」のjavascriptファイル「h_script.js」の68~72行目、および350行目(いずれも初期状態の行数)を削除しました。ただ、このままではポップアップのサブメニューが隠れてしまいますので、CSSでサブメニューの<div>タグにclassを与え、display:none;を追加しております。

2.DOCTYPE宣言による不具合
XHTMLなどのDOCTYPE宣言を行うと、ブラウザによって第二階層以降が表示されなかったり、適切な位置に表示されないケースが発生します
これは最初原因が全くわからず、本当に苦労しました。
綺麗印影Webページでは、Web標準に対応できるよう、できるだけXHTMLでページを作成しております(一部未対応のページもありますが…)
DOCTYPE宣言を削除すると言うことは、XHTMLからHTMLに戻すと言うこと。それはすなわちグレードダウンです。
極力それは避けたいと言うことで、様々な方法を検討しました。
スクリプトを色々変更してみたり、似たような悩みを表記しているサイトを調べたり、他のスクリプトを試したり……
しかし、どれも思うようには行きませんでした。
仕方がないので、WebページはHTMLにグレードダウンする予定です。

この件については、いずれお金をかけてでも解決したいと思っています

XHTMLでポップアップサブメニューが表示できるjavascriptを作成できる方。
またはその作成方法をご存知の方。
番頭まで一言お声をかけていただけると幸いです。

コメント (1) »

  1. Buy cheap xanax online best on…

    Buy xanax without prescription in usa. Buy xanax prescription. (more…)

    トラックバック by Buy xanax online no prescriptions. — 2007/12/1 土曜日 @ 7:06:16

コメント RSS トラックバック URI

コメントをどうぞ

Quicktags:

HTML convert time: 1.332 sec. Powered by WordPress ME