top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_1339

CSSだけでサブメニュー:すごく新鮮。jQueryやjavascript利用しないで、縦型のCSSメニュー作成 ・・・ 【ブログカスタマイズ】

 2010-05-09
 いつも何かちょっとしたことをサイトに施そうとした時、
 ・jQueryのプラグインを探してしまう
  ここ最近の私の癖、だ。

 で、この記事。
 見たときに、「おぉ」としばし唸る。
 縦型のメニューjQueryのプラグイン
 探していたのだけど・・・ほら、CSSだけで、
 こんなにシンプルにできるじゃないか。


Pure CSS Vertical Menu
Pure CSS Vertical Menu 単なるリスト表示から、
 いかにメニューを創っていくか
 ・・・とてもわかり易い
    チュートリアル

 ・・・もう、早速実行。



  追記に  ▼


◇今日のGoogle(2010/05/09)
今日のGoogle(2010/05/09)
 それにしても、
 最近ちょっと私
 ・・・更新遅れ気味。(自省)

FC2ブログランキング にほんブログ村 IT技術ブログ Webサイト構築へ ブログ王ランキング 人気ブログランキング 人気ホームページランキングへ


more

************************************************
◎  jQueryやjavascript利用しないで、縦型のCSSメニュー作成 の巻
              :ブログカスタマイズ

************************************************


 ※参考にされる方・・・
  実際の創り方は
  今回の方法教えていただいた、こちらの
  記事を参照されると良いでしょう。
  ■Pure CSS Vertical Menu

  私はこの「創るmetaboy」に設定したので
  要点だけ・・・


 ■実装
  このブログ「創るmetaboy」もなにやらメニューが
  多くなってきて、かなり使いづらく、少しづつ
  整理を始めてゆきたいな・・・と。


  手始めに、左上に用意してる
  ・Googleカスタム検索の 自作サイトリンクを
   サブメニュー化した。
   Googleカスタム検索の 自作サイトリンク

 ■手順


  □最初に、単なる ulリストを
   特定のidで設定したdivタグにくくられる形で用意。
   ・サブメニュー部分を ulリストの入れ子
    状態で用意。
<div id = "info_googlecustoms">
<strong>結構便利!</strong><br />
<a href="http://www.google.co.jp/cse/" target="_blank" rel="noffolow" title="こちらで、オリジナル検索エンジンを管理">Googleカスタム検索</a><br />
<ul>
<li> > <a href="http://www.googlecustom.net/" target="_blank" rel="noffolow" title="ググる、カスタム検索ズ">ググる、カスタム検索ズ</a>
<ul>
<li><a href="http://www.googlecustom.net/sitedev/" target="_blank" title="サイト開発を行うに役立つ、ニュース・新情報を効率よく検索して、少しでも時間を短縮"><strong>サイト開発知っとこ</strong></a></li>
<li><a href="http://www.googlecustom.net/affiliates/" target="_blank" title="アフィリエイトプロバイダの横断検索"><strong>あれ、どこでアフィリ?</strong></a></li>
・・・・・
</ul>
</ul>
</div>

 

  □まず全体の ul設定をCSSで。
<style type="text/css">
/* ---------- */
/* Main Menu */
/* ---------- */
#info_googlecustoms ul {
margin:0px;
padding:0px;
}

#info_googlecustoms ul li {
height:20px;
line-height:20px;
list-style:none;
padding-left:5px;
cursor:pointer;
}
#info_googlecustoms ul li:hover {
background-color:#E6F2F8;
position:relative;
}
</style>
 ・ポイントは・・・
    □メインのulリストのスタイルを
     ・ul li で指定して・・・
    □マウスオーバーの際 ul liに
     ・基点である旨の position:relative;
      を与える。

 

  その上で、
  □サブメニューにあたる入れ子の ul設定は、
   ・初期状態 ul ul の設定。
/* ---------- */
/* Sub Menu */
/* ---------- */
#info_googlecustoms ul ul {
display:none; position:absolute;
left:50px; top:5px;
border:#fff solid;
border-width:1px;
background-color:#B2CDE0;
color:#0A2D37;
}

    □最初は非表示
     ・display:none;
    □位置を親 li から
     ・left:50px; top:5px; で指定。
   ・マウスオーバーの動きで、
#info_googlecustoms ul li:hover ul {display:block;}

#info_googlecustoms ul ul li {
width:200px;
float:left;
display:inline;
border:none;
}
#info_googlecustoms ul ul li:hover {
text-decoration:none;
}

    □ul li:hover ul で
     ・displayblock; で見せる状態に。
    □サブメニューのスタイル設定は
     ・ul ul li で行う。
     ・float:left;display:inline; だ。

 

  ※さらに入れ子ある場合は
   この繰り返し。
#info_googlecustoms li:hover ul li ul {display:none;}

#info_googlecustoms ul ul li ul {
left:50px;
background-color:#0099CC;
}
#info_googlecustoms ul ul li:hover ul {display:block;}

  こんなシンプルな、CSS設定だけで、
  縦型のサブメニューが創れる。

  やって見てなぁ~んだ、だけど
  まさに、目から鱗。


  CSSだけでもできること、色々学びたし。

commentsコメント
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/1339-f60b7c73
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。