●デザイン⇒テンプレート⇒テンプレートモジュール⇒ヘッダー
メニューを置きたいページの<head>～</head>内に以下のJava Scriptを記述。
<script type="text/javascript">
<!--
function MenuOn(x){
obj=document.getElementById("submenu"+x).style.visibility="visible";
}
function MenuOff(x){
obj=document.getElementById("submenu"+x).style.visibility="hidden";
}
//-->
</script>●デザイン⇒テンプレート⇒スタイルシート(メイン)
スタイルシートに以下の記述を追加。
/* menu */
.menu {
font-size: 10px;
width: auto;
font-family:"Osaka",Verdana, Arial,"ＭＳ Ｐゴシック",sans-serif;
margin-top: 1px;
padding: 0px;
background: #ffffff;
color:#999999;
height: 2.0em;
text-align: center;
position: relative;
top: 0;
left: 0;
border-bottom : 1px solid #999999;
}
.menu a{
color: #999999;
background: #ffffff;
text-decoration: none;
display: block;
padding: 0px;
line-height: normal;
width: 65px;
border: 1px solid #999999;
}
.menu a:visited {color:#999999;}
.menu a:hover{color:#999999; background-color: #ffffff; text-decoration: none;}
.menu a:active {color: #999999;}
.submenu a{
color:#999999;
background: #d1d1d1;
font-weight: normal;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
}
.submenu a:visited {color:#999999;}
.submenu a:hover{color:#999999; background-color: #ffffff; text-decoration: none;}
.submenu a:active {color: #999999;}
#menu1{
position: absolute;
top: 2;
left: 156px;
}
#menu2{
position: absolute;
top: 2;
left: 225px;
}
#menu3{
position: absolute;
top: 2;
left: 294px;
}
#menu4{
position: absolute;
top: 2;
left: 363px;
}
#menu5{
position: absolute;
top: 2;
left: 432px;
}
#menu6{
position: absolute;
top: 2;
left: 501px;
}
#menu7{
position: absolute;
top: 2;
left: 570px;
}
#menu8{
position: absolute;
top: 2;
left: 639px;
}
div.menu span{
display: none;
}
div.submenu {
visibility: hidden;
position: absolute;
left: 0;
}●デザイン⇒テンプレート⇒テンプレートモジュール
モジュールテンプレートを作成する。
名称：menu（任意）などにして以下の記述をする。
<div class="menu">
<div id="menu1">
<a href="<$MTBlogURL$>" title="Home" class="menuhead">Home</a><span>|</span>
</div>
<div id="menu2">
<a href="<$MTBlogURL$>profile.php" title="Profile" class="menuhead">Profile</a><span>|</span>
</div>
<div id="menu3">
<a href="<$MTBlogURL$>tagcloud.php" title="Tag" class="menuhead">Tag</a><span>|</span>
</div>
<div id="menu4" onmouseover="MenuOn(4)" onmouseout="MenuOff(4)">
<a href="<$MTBlogURL$>link.php" title="Links" class="menuhead">Links</a><span>|</span>
<div class="submenu" id="submenu4">
<a href="<$MTBlogURL$>drecomrss.php" title="DrecomRss" >DrecomRss</a><span>|</span>
<a href="<$MTBlogURL$>blogpeople.php" title="BlogPeople">BlogPeople</a><span>|</span>
<a href="http://shakuo.s31.xrea.com/" target="_blank" title="藤川流 宗家 藤川爵応">藤川爵応</a><span>|</span>
</div>
</div>
<div id="menu5" onmouseover="MenuOn(5)" onmouseout="MenuOff(5)">
<a href="<$MTBlogURL$>blog_accessories.php" title="Blog Accessories" class="menuhead">Accessories</a><span>|</span>
<div class="submenu" id="submenu5">
<a href="<$MTBlogURL$>harbot.php" title="Harbot" >Harbot</a><span>|</span>
<a href="<$MTBlogURL$>livly.php" title="Livly">Livly</a><span>|</span>
<a href="<$MTBlogURL$>myminicity.php" title="MyMiniCity">MyMiniCity</a><span>|</span>
</div>
</div>
<div id="menu6" onmouseover="MenuOn(6)" onmouseout="MenuOff(6)">
<a href="<$MTBlogURL$>blog.php" title="アプルの他のBlog" class="menuhead">Blog</a><span>|</span>
<div class="submenu" id="submenu6">
<a href="http://blog.so-net.ne.jp/apuru/" target="_blank" title="アプルの楽屋" >アプルの楽屋</a><span>|</span>
<a href="http://shaku129.blog44.fc2.com/" target="_blank" title="コツコツお小遣い♪ ">お小遣い♪</a><span>|</span>
<a href="http://shakulove.seesaa.net/" target="_blank" title="夢の続き・・・。">夢の続き・・・。</a><span>|</span>
<a href="http://curuhome.cururu.jp/shaku129" target="_blank" title="亜風瑠クルホーム">CURURU</a><span>|</span>
<a href="http://chakichaki.padotown.net/room.cgi?address=070101" target="_blank" title="ぱどタウン ">ぱどタウン</a><span>|</span>
</div>
</div>
<div id="menu7">
<a href="<$MTBlogURL$>mail.php" title="お問い合わせ" class="menuhead">Contact</a><span>|</span>
</div>
<div id="menu8">
<a href="http://musashi.s201.xrea.com/x/mt/mt.cgi" title="管理者ページ" class="menuhead">┌|∵|┘</a><span>|</span>
</div>
</div>上記のプルダウン式ですと、menu4～6は、サブメニューがありますのでブルーの部分の
数字は必ず統一する。数字が違うと正しい動きをしません。
Post a Comment