アメブロにゆっくり動くドロップダウンメニュー

 

アメブロにドロップダウン設置のサポートを行ったので、忘れないように記述しておきます。 メニューは6個です。メニュー1と5にサブメニューを付けました。
JavaScriptでゆっくり動かします。

サンプルページ「ぴっぴのブログ
アメブロメニューカスタマイズ

 

CSS:

/* ——————————————————- */
/* ヘッダー下に隙間を作る            */
/* ——————————————————- */
.skinHeaderArea{
margin-bottom:50px;/* 隙間の大きさ */
}

/* ————————————– */
/* メニュー部分の設定       */
/* ————————————– */
#Topnavi01,#Topnavi02,#Topnavi03,#Topnavi04,#Topnavi05,
#Topnavi06{/* メニュー */
display: inline;
position:absolute;/* 絶対配置 */
top:300px;/* 上からの距離 */
font-size:12px;/* 文字の大きさ */
color:#634A32; /* 文字の色 */
z-index:100;/* 重なり時の優先順位 */
width:165px;/* 横幅 */
height:50px;/* 高さ 45px にすれば隙間を空けて表示 */
background-color:#fff;/* 背景色 */
border-bottom:solid 1px ##808080;
text-align:center;/* 文字中央寄せ */
border-bottom: solid 1px #ddd;
/*background-image: url(画像のURL); 背景画像(必要な場合) */
/*border-radius: 5px; CSS3角丸 */
/*-moz-border-radius: 5px; Firefox角丸 */
/*-webkit-border-radius: 5px; Safari、Google Chrome角丸 */
}

#Topnavi01 a {/* メニュー */
color:#634A32;/* 文字の色 */
display: block;
}

#Topnavi02 a,#Topnavi03 a,#Topnavi04 a,#Topnavi05 a,
#Topnavi06 a {/* メニュー */
border-left: solid 1px #ddd;
color:#634A32;/* 文字の色 */
display: block;
}

#Topnavi01 a:hover,a:focus,a:hover,#Topnavi02 a:hover,a:focus,a:hover,#Topnavi03 a:hover,a:focus,a:hover,#Topnavi04 a:hover,a:focus,a:hover,#Topnavi05 a:hover,a:focus,a:hover,
#Topnavi06 a:hover,a:focus,a:hover{/* メニュー */
color:#B64D6C;/* マウスをのせたときの文字の色 */
}

/* ————————————– */
/* ここは、必要な分だけセットしてください */
/* ————————————– */
#Topnavi01{left:0;}/* メニュー① */
#Topnavi02{left:162px;}/* メニュー② */
#Topnavi03{left:325px;}/* メニュー③ */
#Topnavi04{left:488px;}/* メニュー④ */
#Topnavi05{left:651px;}/* メニュー⑤ */
#Topnavi06{left:816px;}/* メニュー⑥ */
/* ————————————– */

/* ————————————– */
/* プルダウンの設定           */
/* ————————————– */
.Navilist0{display:none;} /*最初は表示しない*/
.Navilist0 a{/* プルダウンのリンク */
border:dotted 1px #ddd;
font-size:12px;/* 文字の大きさ */
background-color:#fff;/* 背景色 */
font-color:#6A5A4B;/* 文字の色 */
z-index:100;/* 重なり時の優先順位 */
width:165px;/* 横幅 */
padding:0;
margin:0;
position:relative;/* 相対配置指定 */
top:-16px;/* 上からの距離 */
line-height:34px;/* 行の高さ */
float:left;
text-align:center;/* 文字中央寄せ */
background-image: url(画像のURL); /* 背景画像(必要な場合) */
}
.Navilist0 a:hover{/* プルダウンのリンクにカーソルを乗せたとき */
text-decoration: none;/* アンダーラインなし */
background-color:#fff;/* 背景色 */
color:#B64D6C;/* 文字の色 */
background-image: url(画像のURL); /* 背景画像(必要な場合) */
/*border-radius: 5px; CSS3角丸 */
/*-moz-border-radius: 5px; Firefox角丸 */
/*-webkit-border-radius: 5px; Safari、Google Chrome角丸 */
}

 

フリースペース

<div id=”Topnavi01″> <a href=”リンク先のURL”>メニュー1</a> <div> <a href=”リンク先のURL”>メニュー1-1</a> <a href=”リンク先のURL”>メニュー1-2</a> </div> </div>

<div id=”Topnavi02″> <a href=”リンク先のURL”>メニュー2</a> </div>

<div id=”Topnavi03″> <a href=”リンク先のURL”>メニュー3</a> </div>

<div id=”Topnavi04″> <a href=”リンク先のURL”>メニュー4</a> </div>

<div id=”Topnavi05″> <a href=”リンク先のURL”>メニュー5</a> <div> <a href=”リンク先のURL”>メニュー5-1</a> <a href=”リンク先のURL”>メニュー5-1</a> </div> </div>

<div id=”Topnavi06″> <a href=”リンク先のURL”>メニュー6</a> </div>

 

フリープラグイン

<script type=”text/javascript” src=”http://usrcss.ameblo.jp/skin/templates/68/2d/10018015921.css”></script>
<script type=”text/javascript”>
var t=1000;var u=10; // 時間の設定
window.onload = function(){Topnavifn();}
</script>

 

以上「リアナ」さんのブログを参考に作成しました。ありがとうございます!

 

 

役に立ったよー、の方はプチッとお願いします。

ブログランキング用6

[subscribe2]