表示例
<!--MENUバーHTMLタグ//-->
<div id="menu">
<!--idを決めてcssの適応部を全て同じにする//-->
<!--ここから題名(1)//-->
<ul>
<li><a href="URL">題名(1)</a>
<ul>
<li><a href="URL">題名(1)1</a>
<ul>
<li><a href="URL">題名(1)1-1</a></li>
<li><a href="URL">題名(1)1-2</a></li>
</ul>
<li><a href="URL">題名(1)2</a></li>
<li><a href="URL">題名(1)3</a>
<ul>
<li><a href="URL">題名(1)3-1</a></li>
<li><a href="URL">題名(1)3-2</a></li>
<li><a href="URL">題名(1)3-3</a>
<ul>
<li><a href="URL">題名(1)3-3-1</a></li>
<li><a href="URL">題名(1)3-3-2</a></li>
<li><a href="URL">題名(1)3-3-3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!--ここから題名(2)//-->
<li><a href="URL">題名(2)</a>
<ul>
<li><a href="URL">題名(2)1</a></li>
<li><a href="URL">題名(2)2</a></li>
</ul>
</li>
<!--ここから題名(3)//-->
<li><a href="URL">題名(3)</a>
<ul>
<li><a href="URL">題名(3)1</a></li>
<li><a href="URL">題名(3)2</a></li>
<li><a href="URL">題名(3)3</a></li>
<li><a href="URL">題名(3)4</a></li>
</ul>
</li>
</ul>
</div>
<!--HTMLタグ ここまで//-->
<!--ここからcss//-->
<style type="text/css">
/* メインメニュー */
#menu ul {
display:block;
list-style-type: none;
margin:0;
padding:0;
}
/* サブメニュー1段目 */
#menu ul ul{
display:none;
position:absolute;
top:100%;
left:0;
}
/* サブメニュー2段目以降 */
#menu ul ul ul {
top:0;
left:100%;
}
/* リスト */
#menu li {
float:left;
}
#menu li li {
clear:both;
}
#menu li:hover {
position:relative;
}
#menu li:hover > ul {
display: block
}
/* デザイン */
#menu li {
line-height:15px; <!--画像の高さ//-->
text-align: center;
background:#000000; <!--画像の場合は background-image: url("http://〜〜" ); とする//-->
}
#menu li li {
text-align: left;
}
#menu li a{
display: block;
width:80px; <!--画像全体の幅//-->
text-decoration:none;
color:#ffffff; <!--文字の色//-->
padding:0 10px; <!--文字の大きさ//-->
}
<!--マウスON時の画像//-->
#menu li:hover {
background-image: url("http://bears.konjiki.jp/img006.jpg" ); <!--色の場合は background;#ｶﾗｰﾅﾝﾊﾞｰ; とする//-->
color:#ffffff; <!--文字の色//-->
height: 15px; <!--画像の高さ//-->
}
<!--サブメニューマウスON時の画像//-->
#menu .column1, #menu .column2, #menu .column3 {
background-image: url("http://bears.konjiki.jp/img006.jpg" ); <!--色の場合は background;#ｶﾗｰﾅﾝﾊﾞｰ; とする//-->
color:#ffffff; <!--文字の色//-->
height: 15px; <!--画像の高さ//-->
}
</style>
<!--ここまで//-->
楽天ウィジェット 防災
<script type="text/javascript" src="http://xml.affiliate.rakuten.co.jp/selectwidget/api/?mode=js&uid=0d64da96.be35930b.0d64ebd0.378add17&xmlid=2"></script>
News BEARS.jp News BEARS.jp RSS2.0 ワイド480px
<!-- start feedwind code -->
<script type="text/javascript">
<!--
rssmikle_url="http://www.ws1.ai-line.co.jp/rssbc/data/bears_jp/rss_2_0.xml";
rssmikle_frame_width="480";
rssmikle_frame_height="120";
rssmikle_target="_blank";
rssmikle_font_size="12";
rssmikle_border="on";
rssmikle_css_url="";
rssmikle_title="on";
rssmikle_title_bgcolor="#000000";
rssmikle_title_color="#FFFFFF";
rssmikle_title_bgimage="";
rssmikle_item_bgcolor="#000000";
rssmikle_item_bgimage="";
rssmikle_item_title_length="100";
rssmikle_item_title_color="#AFAFAF";
rssmikle_item_border_bottom="on";
rssmikle_item_description="off";
rssmikle_item_description_length="40";
rssmikle_item_description_color="#666666";
rssmikle_item_description_tag="off";
rssmikle_item_podcast="icon";
//-->
</script>
<script type="text/javascript" src="http://feed.mikle.com/js/rssmikle.js"></script>
<div style="font-size:10px; text-align:right;">
<a href="http://feed.mikle.com/" target="_blank" style="color:#CCCCCC;">RSS表示パーツ</a>
<!--利用規約に従ってページ内に必ずリンクを表示してください-->
</div>
<!-- end feedwind code --> |
|
Loading
|
