スマホ版
TOP >  お小遣い稼ぎの準備 >  FC2ブログ編集>  FC2ブログ 編集 固定メニューバーにドロップダウンメニューを付けました
FC2ブログ 編集 固定メニューバーにドロップダウンメニューを付けました
固定メニューとドロップダウンメニュー
今までのメニューにドロップダウンメニューをつけました。
固定メニュー
ドロップダウンメニュー(プルダウンメニュー)

2つのブログ参考にさせていただいて、
固定メニュー・ドロップダウンを作りました。
ありがとうございました。


140807menu.jpg
記事を動かしても、ついてくるメニューです。
便利なのですが1列でした。

140807menu-2.jpg
ドロップダウンメニューを追加したかったのですが、
いくつかの方法を試しても、横に広がったり、左にまとまったりしていたのですが、
やっとドロップダウンメニューとなりました。

テンプレートを変更すると、
崩れるかもしれないので、自分用覚書。

1、テンプレートの設定
複製を必ずとります。


2、HTML編集
<head>の下の適当なところにコピー
青い文字は子メニュー </li>の位置に気をつけてください。


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
$(function() {
var headerMenu = $('.headerMenu');
var headerMenuTop = headerMenu.offset().top;
$(window).scroll(function () {
var winTop = $(this).scrollTop();
if (winTop >= headerMenuTop) {
headerMenu.addClass('headerFixed')
} else if (winTop <= headerMenuTop) {
headerMenu.removeClass('headerFixed')
}
});
});
</script>

<!--▼ 上部固定バー ▼-->
<div class="headerMenu">
<ul id="header_menu_bar">
<li><a href="<%url>">トップページ</a></li>
<li><a href="<%url>blog-category-1.html">2番目</a>

<ul>
<li><a href="blog-entry-1.html">子の1番目</a></li>
<li><a href="blog-entry-2.html">子の2番目</a></li>
<li><a href="blog-entry-3.html">子の3番目</a></li>
</ul>

</li>

<li><a href="<%url>#">3番目</a></li>
<li><a href="<%url>#">4番目</a>

<ul>
<li><a href="#">子の1番目</a></li>
<li><a href="#">子の2番目</a></li>
<li><a href="#">子の3番目</a></li>
</ul>

</li>

<li><a href="<%url>#">5番目</a></li>
<li><a href="<%url>#">6番目</a></li>
<li><a href="<%url>#">7番目</a></li>
</ul>
</div>
<!--▲ 上部固定バー ▲-->



3、スタイルシート編集
1つのメニューボタンの幅を変更すると5個~8個に変更できます。
ただ、私のテンプレでは文字サイズ が小さくなりません。


/***************************************** ▼上部固定バー▼ */
.headerMenu {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
}
.headerFixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
/***************************************** ▲上部固定バー▲ */


/* ▼上部固定バー▼ */
ul#header_menu_bar {
font-size: 30%; /* 文字サイズ */
height:24px; /* 高さ */
background-color:#b0cc28; /* 背景色 */
padding-left:0px;
margin-left:0px;
margin-top:0px; /* 上の間隔 */
margin-bottom:5px; /* 下の間隔 */
}

#header_menu_bar li {
list-style-type:none;
float:left;
line-height:24px; /* 高さ */
margin:0px;
padding:0px;
position: relative; /* 子メニューにabsoluteを設定するため */
}

#header_menu_bar li a {
display:block;
text-align:center;
width:110px; /* 1つのメニューボタンの幅 */
border-right:1px solid #ffffff; /* 区切り線 */
color:#ffffff; /* リンク文字の色 */
background-color:#b0cc28; /* メニューボタンの背景 */
text-decoration:none;
}

#header_menu_bar li a:hover{
color:#474747; /* マウスが乗ったときのリンク文字の色 */
background-color:#ffd700; /* マウスが乗ったときの背景色 */
text-decoration:none;
}


#header_menu_bar li ul { /* 子メニュー */ 
margin: 0px;
padding: 0px;
list-style-type: none;
position: absolute;
top:25px;
left:0px;
overflow: hidden;
display:none; /* 子メニューを消す */
}

#header_menu_bar li:hover ul { /* ポインタが重なった時に子メニュー */
overflow: visible;
display: block; 
}

/* ▲上部固定バー▲ */




げん玉はコンテンツが豊富
無料で遊んで、貯めたポイントは現金Webマネーに交換できます!!
パズドラはiTunesギフトコード・Vプリカ発行コードを使ってください。

クラウドでお小遣いを稼げます
ここから登録すると250ポイントプレゼント

▲登録無料で始められるから、ぜひここから登録してください!

関連記事

  ブログランキング・にほんブログ村へ

テーマ:ポイントサイト - ジャンル:アフィリエイト

Edit [2014/08/08 00:33] | FC2ブログ編集 | コメント(0) | page top
<<お小遣いを稼ぐ フルーツメール 8/8 みっくんのクロスワード 歴史 | ホーム | お小遣い 8/07 げん玉・クラウド・フルーツメールで稼ぐ(2014)>>
コメント
コメントの投稿














管理者にだけ表示を許可する

| ホーム |