FrontPage

ヘッダ内に検索窓を設置する

通常、メニューやコンテンツ領域に表示する「検索窓」をヘッダに表示する方法を考えて見ました。
この方式は、以前考案した「No.H01 ヘッダ内に画像やテキストを表示したい」の応用です。
考え方は同じですが、いろんなデザインに対応できるようになりました。

【手順】

  1. 以下のコードをナビの中にコピペする。(ナビ2ではダメ。必ずナビの中に入れる)
  2. topの値を調整する。(使用しているデザインによりヘッダの高さは異なります)

【解説】(ここは理解できなくても大丈夫)

  • 基準となる親BOXを #navigator とする。(position: relative;を指定)
  • 検索窓が入るBOX(#headinf)をCSSで指定する。
    ナビからの位置(top, right)を指定する。(position: absolute;を指定)
    topの値がマイナス値になるところがポイント
  • 当初のデザインでは、#wrapperを基準BOXにしていたが、これではうまくいかないデザインが出てきたため、基準BOXを #navigatorに変更した。
  • #html2を使用して、作成した#headinfのBOX内に、#searchのおまじないを書くと、ナビの上にあるヘッダ内に検索窓が表示される。

【コード】

#beforescript{{
<style type="text/css">
<!--
#navigator{
position: relative;
} 
#headinf{
width: 380px;
height: 10px;
position: absolute;
top: -160px; 
right: 10px;
color: black;
}
--> 
</style>
}}

#html2(<div id="headinf">)
#search()
#html2(</div>)

【参考】
こちらのサイトも同じ方法で、ヘッダ内に検索窓を設置しています。
http://qhmtips.com/qhm_h03/

アコーディオンメニュー

 アコ-ディオンメニューの中に、スクロール付きボックスとカレンダーを入れたいという要望が、QHMユーザーフォーラムでありましたので作成してみました。
 スクロール付きボックスは、いつもお世話になっている以下のサイトから情報をいただきました。
D++ QHM cool design Labo
http://dpura.com/dc/index.php?infomation%2F2009-02-14

  • 確認環境
    QHM4.5.3
    デザインg_wide07
    OSWin XP SP3
    ブラウザIE 8、Firefox 3.6.8、Lunascape+Trident
  • メニューに設置したアコーディオンメニューのコード
    #accordion{{
    * 更新履歴
    #html2(<div style="margin:0px;padding:0px;" align="center"><div style="margin:0px;padding:0px;line-height:1.3;background-color:#FFFFFF;"><div style="margin:0px;padding:10px;line-height:1.3;overflow:auto;border: 1px ridge #000000;color:#000000;text-align:left;height:5em;">)
    カレンダーを更新しました
    &color(red){赤字!};
    &color(blue){青字!};
    [[yahooへリンク>http://www.yahoo.co.jp/]]
    #html2(</div></div></div>)
    
    * 営業カレンダー[#c3bf6c6b]
    #calendar2(営業日,201009,off)
    #clear
    }}

ご意見箱

皆様のご意見をお待ちします。


認証コード(0978)

当ページは役に立ちましたか?

選択肢 投票
たいへん役に立った 6  
ちょっとだけ役に立った 0  
普通 0  
あんまり 0  

powered by QHM 6.0.9 haik
based on PukiWiki 1.4.7 License is GPL. QHM

最新の更新 RSS  Valid XHTML 1.0 Transitional