投稿 画像置換でグローバルナビゲーションを作ります。 は CodingMania に最初に表示されました。
]]><div id="area_nav" class="mod_globalnav"> <ul> <li class="current-menu-item"><a class="nav01" href="#">メニュー01</a></li> <li><a class="nav02" href="#">メニュー02</a></li> <li><a class="nav03" href="#">メニュー03</a></li> <li><a class="nav04" href="#">メニュー04</a></li> <li><a class="nav05" href="#">メニュー05</a></li> </ul> <!--mod_globalnav_end--></div>
/* mod_globalnav 画像置換
-----------------------------------------*/
.mod_globalnav{
height:45px;
}
.mod_globalnav ul{
margin:0 auto;
width:750px;
height:45px;
overflow:hidden;
position:relative;
}
.mod_globalnav ul li{
float:left;
width:150px;
height:45px;
overflow:hidden;
}
.mod_globalnav ul li a{
display:block;
height:45px;
text-indent: -9999px;
background-image: url('bg_globalnav.jpg');
background-repeat:no-repeat;
}
.mod_globalnav ul li a.nav01{background-position:0px 0px; width:150px;}
.mod_globalnav ul li.current-menu-item a.nav01,
.mod_globalnav ul li a.nav01:hover{background-position:0px -45px;}
.mod_globalnav ul li a.nav02{background-position:-150px 0px; width:150px;}
.mod_globalnav ul li.current-menu-item a.nav02,
.mod_globalnav ul li a.nav02:hover{background-position:-150px -45px;}
.mod_globalnav ul li a.nav03{background-position:-300px 0px; width:150px;}
.mod_globalnav ul li.current-menu-item a.nav03,
.mod_globalnav ul li a.nav03:hover{background-position:-300px -45px;}
.mod_globalnav ul li a.nav04{background-position:-450px 0px; width:150px;}
.mod_globalnav ul li.current-menu-item a.nav04,
.mod_globalnav ul li a.nav04:hover{background-position:-450px -45px;}
.mod_globalnav ul li a.nav05{background-position:-600px 0px; width:150px;}
.mod_globalnav ul li.current-menu-item a.nav05,
.mod_globalnav ul li a.nav05:hover{background-position:-600px -45px;}
投稿 画像置換でグローバルナビゲーションを作ります。 は CodingMania に最初に表示されました。
]]>投稿 クリックで、右へ左へスライドするスライドショー は CodingMania に最初に表示されました。
]]><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript" src="js/billboard.js"></script>
$(function(){
//初期設定
$("#billboard ul").css("width",530*$("#billboard ul li").size()+"px");
$("#billboard ul li:last").prependTo("#billboard ul");
$("#billboard ul").css("margin-left","-530px");
//ボタン前へ
$("#prev").click(function(){
$("#billboard ul").animate({
marginLeft : parseInt($("#billboard ul").css("margin-left"))+530+"px"},"","swing" ,
function(){
$("#billboard ul").css("margin-left","-530px")
$("#billboard ul li:last").prependTo("#billboard ul");
$("#next,#prev").show();
});
});
//ボタン次へ
$("#next").click(function(){
$("#billboard ul").animate({
marginLeft : parseInt($("#billboard ul").css("margin-left"))-530+"px"},"","swing" ,
function(){
$("#billboard ul").css("margin-left","-530px");
$("#billboard ul li:first").appendTo("#billboard ul");
$("#next,#prev").show();
});
});
//timer
var timerID = setInterval(function(){
$("#next").click();
},5000);
//reset
$("#prev img,#next img").click(function(){
clearInterval(timerID);
});
});
<div class="mod_billboardbelt"> <div class="mod_billboardcontent"> <div id="billboard"> <ul> <li><a href="https://codingmania.net/"><img src="img/cut01.jpg" alt="1枚目" /></a></li> <li><a href="https://codingmania.net/"><img src="img/cut02.jpg" alt="2枚目" /></a></li> <li><a href="https://codingmania.net/"><img src="img/cut03.jpg" alt="3枚目" /></a></li> <li>テキストの入力もできます。</li> </ul> <!--billboard_end--></div> <div class="mod_billboardcontent_btn"> <ul> <li id="next"><img src="img/prev.png" alt="次へ" /></li> <li id="prev"><img src="img/next.png" alt="前へ" /></li> </ul> <!--mod_billboardcontent_btn_end--></div> <!--mod_billboardcontent_end--></div> <!--mod_billboardbelt_end--></div>
.mod_billboardbelt{
padding:40px 0 40px 0;
background-color:#062D46;
-webkit-box-shadow: 0 0 20px #162229 inset;
-moz-box-shadow: 0 0 20px #162229 inset;
box-shadow: 0 0 20px #162229 inset;
}
.mod_billboardcontent{
width:630px;
margin:0 auto;
position:relative;
}
#billboard{
width:530px;
height:250px;
overflow:hidden;
position:relative;
}
#billboard ul li{
float:left;
width:520px;
height:240px;
display:block;
border:solid 5px #3C4F5C;
}
.mod_billboardcontent_btn #next{
position:absolute;
top:110px;
left:-50px;
cursor:pointer;
}
.mod_billboardcontent_btn #prev{
position:absolute;
top:110px;
left:550px;
cursor:pointer;
}
投稿 クリックで、右へ左へスライドするスライドショー は CodingMania に最初に表示されました。
]]>投稿 サムネイルの画像をマウスオーバーで拡大・切り替え・表示します！ は CodingMania に最初に表示されました。
]]><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="js/swapimage.js"></script>
$(function(){
$(".mod_thumbnail").each(function(){
var set = $(this);
var btn = set.find(".thumbnaillist li a");
var image = set.find(".mainimglist img");
// hover時
$(btn).hover(function(){
$(image).attr("src",$(this).attr("href"));
$(image).attr("alt",$(this).attr("title"));
});
//クリック時
$(".thumbnaillist a").click(function(){
return false;
});
});
});
<div class="mod_thumbnail"> <div class="thumbnaillist"> <ul class="ex_clearfix"> <li><a href="img/image01.jpg" title="orange"><img src="img/thumbnail01.jpg" width="60" height="60"></a></li> <li><a href="img/image02.jpg" title="green"><img src="img/thumbnail02.jpg" width="60" height="60"></a></li> <li><a href="img/image03.jpg" title="pink"><img src="img/thumbnail03.jpg" width="60" height="60"></a></li> <li><a href="img/image04.jpg" title="blue"><img src="img/thumbnail04.jpg" width="60" height="60"></a></li> </ul> <!-- thumbnaillist_end --></div> <div class="mainimglist"> <img src="img/image01.jpg" alt="orange" width="700" height="350"> <!-- mainimglist_end --></div> <!-- mod_thumbnail_end --></div>
/* mod_thumbnail
--------------------------------------------*/
.mod_thumbnail{
margin:0 0 30px 0;
}
/* サムネイル画像表示（thumbnaillist）
-----------------------------------------*/
.thumbnaillist{
}
.thumbnaillist ul{
}
.thumbnaillist li{
width:60px;
height:60px;
float:left;
background:none;
padding:0 10px 0px 0;
margin:0 0 10px 0;
}
.thumbnaillist li a{
display:block;
}
.thumbnaillist li a:link {}
.thumbnaillist li a:visited {}
.thumbnaillist li a:hover {opacity:0.8;}
.thumbnaillist li a:active {opacity:0.8;}
/* IE用 ↓*/
.thumbnaillist li a:hover img {filter:alpha(opacity=80);}
/* メイン画像表示（mod_mainimglist）
-----------------------------------------*/
.mainimglist{
width:700px;
height:350px;
margin:20px 0 0 0;
}
.mainimglist img{
}
投稿 サムネイルの画像をマウスオーバーで拡大・切り替え・表示します！ は CodingMania に最初に表示されました。
]]>投稿 jquery tile.jsでグリッドの高さを揃えます は CodingMania に最初に表示されました。
]]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/tile.js"></script>
<script type="text/javascript">
$(window).load(function() {
$(".mod_grid3hBox_inner").tile(3);
});
</script>
<div class="mod_grid3hBox"> <div class="mod_grid3hBox_inner"> <h3>タイトル</h3> <p><img src="Grid_001.gif" width="220" height="132" alt="写真" /></p> <p class="mod_caption">キャプション</p> <p>説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。</p> <!-- mod_grid3hBox_inner_end --></div> <div class="mod_grid3hBox_inner"> <h3>タイトル</h3> <p><img src="Grid_001.gif" width="220" height="132" alt="写真" /></p> <p class="mod_caption">キャプション</p> <p>説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。</p> <!-- mod_grid3hBox_inner_end --></div> <div class="mod_grid3hBox_inner"> <h3>タイトル</h3> <p>写真とキャプションをとりました。</p> <!-- mod_grid3Box_inner_end --></div> <div class="mod_grid3hBox_inner"> <h3>タイトル</h3> <p>写真とキャプションをとりました。</p> <!-- mod_grid3hBox_inner_end --></div> <div class="mod_grid3hBox_inner"> <h3>タイトル</h3> <p><img src="Grid_001.gif" width="220" height="132" alt="写真" /></p> <p class="mod_caption">キャプション</p> <p>説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。</p> <!-- mod_grid3hBox_inner_end --></div> <div class="mod_grid3hBox_inner"> <h3>タイトル</h3> <p>写真とキャプションをとりました。</p> <!-- mod_grid3hBox_inner_end --></div> <!-- mod_grid3hBox_end --></div>
.mod_grid3hBox{
width:720px;
margin-right:-20px;
}
.mod_grid3hBox_inner{
width:220px;
float:left;
margin:0 20px 10px 0;
background-color:#FFFFCC;
}
.mod_grid3hBox_inner h3{
font-weight: bold;
font-size: 1.4em;
border-bottom:double 3px #000;
margin:0 0 5px 0;
}
.mod_grid3hBox_inner p.mod_caption{
color:#666;
padding:0 0 5px 0;
}
投稿 jquery tile.jsでグリッドの高さを揃えます は CodingMania に最初に表示されました。
]]>投稿 テキストで作る。ドロップダウンメニュー・プルダウンメニュー は CodingMania に最初に表示されました。
]]><script type="text/javascript" src="js/jQuery.js"></script> <script type="text/javascript" src="js/dropdown_t.js"></script>
$(function(){
//ドロップダウン表示
$(".mod_dropnavi ul.topmenu li.slidebtn a").addClass("close");
$(".mod_dropnavi ul.submenu").addClass("close");
$(".mod_dropnavi ul.topmenu li.slidebtn>a").each(function(){
var allsubmenu = $(".mod_dropnavi ul.submenu");
var btn = $(this);
var submenu = $(this).next();
btn.click(function(){
if($(this).hasClass("open")){
$(this).removeClass("open").addClass("close");
$(submenu).slideUp("fast");
}else{
$(allsubmenu).slideUp("fast");
$(".mod_dropnavi ul.topmenu li.slidebtn a").removeClass("open").addClass("close");
$(submenu).slideDown("fast");
$(btn).removeClass("close").addClass("open");
}
return false;
});
});
});
<div class="mod_dropnavi ex_clearfix"> <ul class="topmenu"> <li><a href="#">Menu01</a></li> <li class="slidebtn"><a href="#">Menu02</a> <ul class="submenu menu2"> <li><a href="#">Menu02_Aのタイトルが長い場合は幅を指定</a></li> <li><a href="#">Menu02_B</a></li> <li><a href="#">Menu02_C</a></li> </ul> </li> <li><a href="#">Menu03</a></li> <li class="slidebtn"><a href="#">Menu04</a> <ul class="submenu"> <li><a href="#">Menu04_A</a></li> <li><a href="#">Menu04_B</a></li> <li><a href="#">Menu04_C</a></li> <li><a href="#">Menu04_D</a></li> </ul> </li> </ul> <!--mod_dropnavi_end --></div>
/* テキストで作るdrop downリスト
-----------------------------------------*/
/* Topmenu部分 */
.mod_dropnavi ul.topmenu{
width:920px;
height:45px;
border-top:solid 1px #CCC;
border-bottom:solid 1px #CCC;
background-color:#336600;
}
.mod_dropnavi ul.topmenu li{
width:150px;
float:left;
position:relative;
text-align:center;
line-height:45px;
border-right:solid 1px #CCC;
}
.mod_dropnavi ul.topmenu li a{
width:100%;
height:100%;
display:block;
color:#FFFFFF;
font-weight:bold;
}
.mod_dropnavi ul.topmenu li a:link {text-decoration:none;}
.mod_dropnavi ul.topmenu li a:visited {text-decoration:none;}
.mod_dropnavi ul.topmenu li a:hover {text-decoration:none; color:#FFFF66;}
.mod_dropnavi ul.topmenu li a:active {text-decoration:none; color:#FFFF66;}
/* サブメニュー階層は通常は非表示 */
.mod_dropnavi ul.topmenu li.slidebtn ul.close{display:none;}
/* サブ階層部分 */
.mod_dropnavi ul.topmenu li ul.submenu{
position:absolute;
top:45px;
left:-1px;
white-space:nowrap;
border-left:solid 1px #CCC;
}
.mod_dropnavi ul.topmenu li ul.submenu li{
height:35px;
text-align:left;
line-height:35px;
text-indent:10px;
clear:both;
border-bottom:solid 1px #CCC;
}
.mod_dropnavi ul.topmenu li ul.submenu.menu2 li{
width:290px;
}
.mod_dropnavi ul.topmenu li ul.submenu li a{
color:#339900;
background-color:#EEE;
}
.mod_dropnavi ul.topmenu li ul.submenu li a:link {text-decoration:none;}
.mod_dropnavi ul.topmenu li ul.submenu li a:visited {text-decoration:none;}
.mod_dropnavi ul.topmenu li ul.submenu li a:hover {text-decoration:none; background-color:#DDD; color:#339900;}
.mod_dropnavi ul.topmenu li ul.submenu li a:active {text-decoration:none; background-color:#DDD; color:#339900;}
投稿 テキストで作る。ドロップダウンメニュー・プルダウンメニュー は CodingMania に最初に表示されました。
]]>投稿 画像で作る。ドロップダウンメニュー・プルダウンメニュー は CodingMania に最初に表示されました。
]]><script type="text/javascript" src="js/jQuery.js"></script> <script type="text/javascript" src="js/dropdown.js"></script>
$(function(){
//マウスオーバー
$(".mod_dropnavi ul li img").mouseover(function(){
$(this).attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2"));
}).mouseout(function(){
$(this).attr("src",$(this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/, "$1$2"));
}).each(function(){
$("<img>").attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2"));
});
//ドロップダウン表示
$(".mod_dropnavi ul.topmenu li.slidebtn>a").addClass("close");
$(".mod_dropnavi ul.submenu").addClass("close");
$(".mod_dropnavi ul.topmenu li.slidebtn>a").each(function(){
var allsubmenu = $(".mod_dropnavi ul.submenu");
var btn = $(this);
var submenu = $(this).next();
btn.click(function(){
if($(this).hasClass("open")){
$(this).removeClass("open").addClass("close");
$(submenu).slideUp("fast");
}else{
$(allsubmenu).slideUp("fast");
$(".mod_dropnavi ul.topmenu li.slidebtn>a").removeClass("open").addClass("close");
$(submenu).slideDown("fast");
$(btn).removeClass("close").addClass("open");
}
return false;
});
});
});
<div class="mod_dropnavi ex_clearfix"> <ul class="topmenu"> <li><a href="#"><img src="menu01.gif" width="150" height="45" alt="Menu01" /></a></li> <li class="slidebtn"><a href="#"><img src="menu02.gif" width="149" height="45" alt="Menu02" /></a> <ul class="submenu"> <li><a href="#"><img src="menu02a.gif" width="150" height="44" alt="Menu02a" /></a></li> <li><a href="#"><img src="menu02b.gif" width="150" height="44" alt="Menu02b" /></a></li> <li><a href="#"><img src="menu02c.gif" width="150" height="44" alt="Menu02c" /></a></li> </ul> </li> <li><a href="#"><img src="menu03.gif" width="149" height="45" alt="Menu03" /></a></li> <li class="slidebtn"><a href="#"><img src="menu04.gif" width="149" height="45" alt="Menu04" /></a> <ul class="submenu"> <li><a href="#"><img src="menu04a.gif" width="150" height="44" alt="Menu04a" /></a></li> <li><a href="#"><img src="menu04b.gif" width="150" height="44" alt="Menu04b" /></a></li> <li><a href="#"><img src="menu04c.gif" width="150" height="44" alt="Menu04c" /></a></li> <li><a href="#"><img src="menu04d.gif" width="150" height="44" alt="Menu04d" /></a></li> </ul> </li> </ul> <!--mod_dropnavi_end --></div>
/* 画像で作るdrop downリスト
-----------------------------------------*/
/* Topmenu部分 */
.mod_dropnavi ul.topmenu{
width:920px;
height:45px;
}
.mod_dropnavi ul.topmenu li{
float:left;
position:relative;
}
.mod_dropnavi ul.topmenu li.topmenu01{width:150px;}
.mod_dropnavi ul.topmenu li.topmenu02{width:149px;}
.mod_dropnavi ul.topmenu li.topmenu03{width:149px;}
.mod_dropnavi ul.topmenu li.topmenu03{width:149px;}
.mod_dropnavi ul.topmenu li a{
display:block;
width:100%;
height:100%;
}
/* サブ階層部分 */
.mod_dropnavi ul.topmenu li ul.submenu{
width:150px;
position:absolute;
top:45px;
left:-1px;
}
.mod_dropnavi ul.topmenu li ul.submenu.close {
display:none;
}
.mod_dropnavi ul.topmenu li ul.submenu li{
height:44px;
clear:both;
}
投稿 画像で作る。ドロップダウンメニュー・プルダウンメニュー は CodingMania に最初に表示されました。
]]>投稿 floatを使ってコンテンツを2列にする は CodingMania に最初に表示されました。
]]><div class="mod_Grid2Box ex-clearfix"> <div class="mod_Grid2Box_inner"> <h3>タイトル</h3> <div class="mod_Grid2Box_inner_figure"> <img src="Grid_003.gif" width="150" height="132" alt="写真" /> <p class="mod_caption">キャプション</p> <!-- mod_Grid2Box_inner_figure_end --></div> <p>説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。</p> <!-- mod_Grid2Box_inner_end --></div> <div class="mod_Grid2Box_inner"> <h3>タイトル</h3> <div class="mod_Grid2Box_inner_figure"> <img src="Grid_003.gif" width="150" height="132" alt="写真" /> <p class="mod_caption">キャプション<br /> 改行してみました。</p> <!-- mod_Grid2Box_inner_figure_end --></div> <p>説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。</p> <!-- mod_Grid2Box_inner_end --></div> <!--mod_Grid2Box_end --></div>
.mod_Grid2Box{
width:720px;
margin-right:-20px;
}
.mod_Grid2Box_inner{
width:340px;
float:left;
margin:0 20px 10px 0;
}
.mod_Grid2Box_inner_figure{
width:150px;
float:left;
margin:0 20px 5px 0;
}
.mod_Grid2Box_inner h3{
margin:0 0 5px 0;
font-weight: bold;
font-size: 1.4em;
border-bottom:double 3px #000;
}
.mod_caption{
color:#666;
}
投稿 floatを使ってコンテンツを2列にする は CodingMania に最初に表示されました。
]]>投稿 floatを使ってコンテンツを3列にする は CodingMania に最初に表示されました。
]]><div class="mod_Grid3Box ex_clearfix"> <div class="mod_Grid3Box_inner"> <h3>タイトル</h3> <p><img src="Grid_001.gif" width="220" height="132" alt="写真" /></p> <p class="mod_caption">キャプション</p> <p>説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。</p> <!-- mod_Grid3Box_inner_end --></div> <div class="mod_Grid3Box_inner"> <h3>タイトル</h3> <p><img src="Grid_001.gif" width="220" height="132" alt="写真" /></p> <p class="mod_caption">キャプション</p> <p>説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。</p> <!-- mod_Grid3Box_inner_end --></div> <div class="mod_Grid3Box_inner"> <h3>タイトル</h3> <p>写真とキャプションをとりました。</p> <!-- mod_Grid3Box_inner_end --></div> <!-- mod_Grid3Box_end --></div>
.mod_Grid3Box{
width:720px;
margin-right:-20px;
}
.mod_Grid3Box_inner{
width:220px;
float:left;
margin:0 20px 10px 0;
}
.mod_Grid3Box_inner h3{
font-weight: bold;
font-size: 1.4em;
border-bottom:double 3px #000;
margin:0 0 5px 0;
}
.mod_Grid3Box_inner p.mod_caption{
color:#666;
padding:0 0 5px 0;
}
投稿 floatを使ってコンテンツを3列にする は CodingMania に最初に表示されました。
]]>投稿 liで作る横並び（3列）のバナーリスト は CodingMania に最初に表示されました。
]]><div class="mod_Banner001"> <ul class="ex_clearfix"> <li><a href="#"><img src="Banner_001.gif" width="220" height="120" alt="バナー" /></a></li> <li><a href="#"><img src="Banner_001.gif" width="220" height="120" alt="バナー" /></a></li> <li><a href="#"><img src="Banner_001.gif" width="220" height="120" alt="バナー" /></a></li> <li><a href="#"><img src="Banner_001.gif" width="220" height="120" alt="バナー" /></a></li> <li><a href="#"><img src="Banner_001.gif" width="220" height="120" alt="バナー" /></a></li> <li><a href="#"><img src="Banner_001.gif" width="220" height="120" alt="バナー" /></a></li> </ul> <!-- mod_Banner001_end --></div>
.mod_Banner001{
width:700px;
background-color:#EEE;
}
.mod_Banner001 ul{
width:720px;
margin-right:-20px;
}
.mod_Banner001 li{
width:220px;
height:60px;
float:left;
padding:0 20px 0px 0;
margin:0 0 10px 0;
overflow:hidden;
}
.mod_Banner001 li a{
display:block;
}
.mod_Banner001 li a:link {}
.mod_Banner001 li a:visited {}
.mod_Banner001 li a:hover {margin-top:-60px;}
.mod_Banner001 li a:active {margin-top:-60px;}
投稿 liで作る横並び（3列）のバナーリスト は CodingMania に最初に表示されました。
]]>投稿 画像を使ったナビゲーション は CodingMania に最初に表示されました。
]]><div class="mod_Gnavi003"> <ul> <li><a href="#"><img src="GlobalNavi_003a.jpg" width="150" height="135" alt="Menu01" /></a></li> <li><a href="#"><img src="GlobalNavi_003b.jpg" width="149" height="135" alt="Menu02" /></a></li> <li class="mod_current"><img src="GlobalNavi_003c.jpg" width="149" height="135" alt="Menu03" /></li> <li><a href="#"><img src="GlobalNavi_003d.jpg" width="149" height="135" alt="Menu04" /></a></li> </ul> <!--mod_Gnavi003_end --></div>
.mod_Gnavi003 ul{
width:597px;
overflow:hidden;
position:relative;
}
.mod_Gnavi003 ul li{
height:45px;
float:left;
overflow:hidden;
}
.mod_Gnavi003 ul li.mod_current img{
margin-top:-90px;
display:block; /* IE6隙間防止 */
}
.mod_Gnavi003 ul li a{
display:block;
}
.mod_Gnavi003 ul li a:link {}
.mod_Gnavi003 ul li a:visited {}
.mod_Gnavi003 ul li a:hover {margin-top:-45px;}
.mod_Gnavi003 ul li a:active {margin-top:-45px;}
投稿 画像を使ったナビゲーション は CodingMania に最初に表示されました。
]]>