タブメニュー作成-CSS Tab Designer
色々調べたのですが、私が希望している結果に辿りつけず、質問させて頂きます。
CSS Tab Designer v2.0を使用してタブメニューを作成しました。
HTML部分で
<ul>
<!-- CSS Tabs -->
<li id="current"><a href="1.html"><span>いち</span></a></li>
<li><a href="2.html"><span>に</span></a></li>
<li><a href="3.html"><span>さん</span></a></li>
<li><a href="4.html"><span>よん</span></a></li>
</ul>
というのが自動作成(tabmenu.htmlと命名)されました。
tabmenu.htmlを起動すると、綺麗なタブが作成されているのですが、
「いち」をクリックすると
tabmenu.htmlから、1.htmlにジャンプしてしまいます。
そこで、以下のようにFrameを作成し
<frameset rows="50,*">
<frame src="tabmenu.html" name="top">
<frame src="1.html" name="bottom">
</frameset>
tabmenu.htmlを編集し
<ul>
<!-- CSS Tabs -->
<li id="current"><a href="1.html" target="bottom"><span>いち</span></a></li>
<li><a href="2.html" target="bottom"><span>に</span></a></li>
<li><a href="3.html" target="bottom"><span>さん</span></a></li>
<li><a href="4.html" target="bottom"><span>よん</span></a></li>
</ul>
とTAGETを指定しました。
一見、うまく動作しているように見えたのですが・・・
タブの「いち」をクリックすると、bottomに1.htmlが表示されます。
タブの「に」をクリックすると、bottomに2.htmlが表示されます。
しかし、タブの「いち」から「に」に色が変わらない(カレントタブに移動しない)のです。
どのタブをクリックしても、「いち」がカレントタブを示す濃い色になってしまいます。
クリックしたタブがカレント色になるようにするには、どのように編集したら良いでしょうか?
そもそも、Frameを使用するのが間違いなのでしょうか?
以下が、自動作成されたCSS部分です、
<style type="text/css">
<!--
body {
margin:0;
padding:0;
font: bold 11px/1.5em Verdana;
}
h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
padding: 0px 0px 0px 15px;
}
/*- Menu Tabs F--------------------------- */
#tabsF {
float:left;
width:100%;
background:#efefef;
font-size:93%;
line-height:normal;
border-bottom:1px solid #666;
}
#tabsF ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsF li {
display:inline;
margin:0;
padding:0;
}
#tabsF a {
float:left;
background:url("tableftF.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsF a span {
float:left;
display:block;
background:url("tabrightF.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsF a span {float:none;}
/* End IE5-Mac hack */
#tabsF a:hover span {
color:#FFF;
}
#tabsF a:hover {
background-position:0% -42px;
}
#tabsF a:hover span {
background-position:100% -42px;
}
#tabsF #current a {
background-position:0% -42px;
}
#tabsF #current a span {
background-position:100% -42px;
}
-->
</style>
補足
ご回答、ありがとうございますm(_ _)m >ページごとにメニューの該当するメニュー名の背景・画像を変えたいのであれば、そのページごとに背景(もしくは画像)を指定するのが一番簡単です。 はい、とりあえず次善の策としてそのようにやってみて、OKでした。ただ、何かもっと“洒落た”やり方がcssにないものかと考えたものですから、質問を出してみたところです。 >あとはJavaScriptやCSSでも方法があるかもしれません もし思い出すようなことがあれば、是非ご紹介下さいm(_ _)m