WebnistのCSS

スタイルシートで実装するプルダウンメニュー最近使ってるもの

Webnist — Thu, 07 May 2009 23:38:47 +0000

前回のスタイルシートで実装するプルダウンメニューより改良?したバージョンを書いてみようと思います。

前回は、横幅を指定していましたが今回はしないでいかせて頂きます。
いつもどおり、すでにあったらすみません。

[xhtml lang_name="true"]

[/xhtml]
[css lang_name="true"]
/*/ Page Navigation Setting /*/
ul#page_nav
{
width:100%;
min-height:37px;
font-size:107%;
background:#F0F0F0;
display:table;
}
ul#page_nav li
{
width:auto;
float:left;
display:table-cell;
}
ul#page_nav li:hover
{
background:#D1D1D1;
position:relative;
}
ul#page_nav li a
{
width:auto;
line-height:2.7;
text-decoration:none;
color:#474747;
border-right:1px solid #FFFFFF;
padding:0px 30px 0px 30px;
float:left;
}
/*/ Pulldown Setting /*/
ul#page_nav li ul
{
display:none;
}
ul#page_nav li:hover > ul
{
width:270px;
border-top:1px solid #CACACA;
display:block;
position:absolute;
top:100%;
left:0px;
z-index:3;
}
ul#page_nav li ul li
{
width:270px;
background:none;
}
ul#page_nav li ul li a
{
width:248px;
color:#474747 !important;
border:1px solid #CACACA;
border-top:none;
padding:0px 10px 0px 10px;
background:#F0F0F0;
}
ul#page_nav li ul li a:hover
{
color:#FFFFFF !important;
background:#6097D7;
}
ul#page_nav li ul li:hover ul
{
top:0px;
left:100%;
z-index:3;
}
[/css]

プルダウン部分の幅も固定しないように%で指定したのですが、３階層目でIE6でビローンってなってしまったのであきらめましたorz =3

それでは See You Feeling

スタイルシートで実装するクリックで開くメニュー

Webnist — Wed, 22 Apr 2009 18:30:04 +0000

久しぶりに投稿します。
既に出ていたらすみません。

HTML

[xhtml]

nav_01
nav_02

[/xhtml]

CSS

[css]
#nav li
{
width:200px;
height:20px;
text-align:center;
background:#DDDDDD;
}
#nav li:hover
{
background:#00FF00;
position:relative;
}
#nav li ul
{
display:none;
}
#nav li:active ul ,
#nav li ul:hover
{
display:block;
position:absolute;
top:0px;
left:0px;
padding:0px 0px 0px 200px;
z-index:5;
}
#nav li ul li a
{
width:200px;
height:20px;
display:block;
}
#nav li ul li a:hover
{
background:#00FF00;
}
[/css]

サンプルページ

クリックでは閉じませんorz

スタイルシートで実装するプルダウンメニュー

Webnist — Tue, 15 Apr 2008 19:11:55 +0000

前回のCSSスタイルシートで実装するアコーディオンエフェクト:IE6対応ところ紹介したGoogle コードを利用して、
DesignWalkerさんで紹介されていました
Scriptを使わないCSSエフェクト、Tipsいろいろの中のCSS-only Drop-down MenusをIE6対応で作ってみました。
すでにあったらすみません。

デモ1
デモ：アコーディオン応用

デモ1のソース
HTML
[xhtml]

nav_01
nav_02
- nav_02_01
- nav_02_02
- nav_02_03
- nav_02_04
- nav_02_05
- nav_02_06
- nav_02_07
- nav_02_08
nav_03
- nav_03_01
- nav_03_02
nav_04
- nav_04_01

[/xhtml]

CSS
[css]
#nav li
{
width:200px;
background:#DDDDDD;
float:left;
}
#nav li > ul
{
display:none;
}
#nav li:hover > ul
{
display:block;
}
#nav li ul li
{
width:185px;
padding:0px 0px 0px 15px;
display:block;
}
#nav li ul li:hover
{
background:#AAAAAA;
display:block;
}
[/css]

デモ：アコーディオン応用
HTML
[xhtml]

nav_01
nav_02
- nav_02_01
- nav_02_02
- nav_02_03
- nav_02_04
- nav_02_05
- nav_02_06
- nav_02_07
- nav_02_08
nav_03
- nav_03_01
- nav_03_02
nav_04
- nav_04_01

[/xhtml]
CSS
[css]
nav li.nav_01 ,
#nav li.nav_02 ,
#nav li.nav_03 ,
#nav li.nav_04
{
width:200px;
height:15px;
overflow:hidden;
background:#DDDDDD;
float:left;
}
#nav li.nav_01:hover
{
height:80px;
}
#nav li.nav_02:hover
{
height:145px;
}
#nav li.nav_03:hover
{
height:50px;
}
#nav li.nav_04:hover
{
height:35px;
}
#nav li.nav_01 li ,
#nav li.nav_02 li ,
#nav li.nav_03 li ,
#nav li.nav_04 li
{
padding:0px 0px 0px 15px;
}
#nav li.nav_01 li:hover ,
#nav li.nav_02 li:hover ,
#nav li.nav_03 li:hover ,
#nav li.nav_04 li:hover
{
background:#AAAAAA;
}
[/css]

デモの2番目の方は使い道は少ないと思います。
また、文字サイズの拡大に対応してません・・・。

[CSS]スタイルシートで実装するアコーディオンエフェクト:IE6対応

Webnist — Fri, 11 Apr 2008 11:54:40 +0000

colissさんで紹介されていました
［CSS］スタイルシートで実装するアコーディオンエフェクトについて、
IE６で動作しなかったので、header部分にGoogle コードを追加し、
動作するようにしてみた。

また日本語のみですが横タイプはタイトルを縦書きにしてみました。

デモ：アコーディオン横タイプ
 デモ：アコーディオン縦タイプ

D〇C〇M〇にメールしてみた

Webnist — Wed, 30 Jan 2008 00:01:29 +0000

表題のまるの字が見れてるかわからないですが…。
送ってみました。
何故CSSが効かないのかと。

今書いていて気付いた外部っていうのを忘れてました…。
質問内容は先ほど書いた内容でauとソフトバンクは普通に見れるのに、何故ですかと。

昨日送って今日に普通に返ってきましたi-cssと作ろうi-modeコンテンツのURLの事が…。
それを聞きたかったわけではなかったんだけど、さっき気付いた事が抜けてたから普通ですね。
前にも色々な企業(業種色々)に変な内容のメールを送ったことがあったけど、どの企業もちゃんと返答が返ってきたので嬉しかったです。

その内容は別のところで書きたいと思います。