CSS アクティブタブの仕組み
CSS アクティブタブの仕組み
閲覧ありがとうございます。説明下手ですがお付き合い宜しくお願い致します
CSS勉強も兼ねて擬似フレームのサイトを作っているCSS初心者です
解らないことは本やリファレンスサイトで調べ、忘れた時の為にコメントを書きこみ少しずつですが理解しながらサイトを作っています。
現在テンプレートサイト様が配布されている
http://10prs.com/material/samples/cdp/mono-vivid/index.html
を参考にメニュータブごとに背景色を変え、アクティブになったタブの背景色もタブと同じ色にしようと考察してます。
タブがアクティブになった時にメニューとメイン部分の境界のボーダーが消えるのですが、この仕組みがいまいちよく解りません。
恥ずかしながらアクティブになった時にボーダーが消える部分の記述があるのがどこにあるのか発見できずにいます。
無知なのに無謀な試みと思われるでしょうが御教示頂けないでしょうか、宜しくお願い致します
■以下テンプレートのCSSを抜粋
/* 各#ID＆.class */
div#PAGETOP {
height: 100%;
overflow: auto;
}
div#HEADER {
position: fixed !important;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
color: #fff;
background: #000;
}
ul#PAN {
display: none;
}
div#MENU {
position: fixed !important;
position: absolute;
top: 80px;
left: 30px;
width: 130px;
}
div#MENU h2 {
display: none;
}
div#MENU ul {
margin-top: 20px;
margin-left: 0;
list-style: none;
position: absolute;
z-index: 100;
height: 100%;
}
div#MENU ul li a {
margin: 5px 0 5px 10px;
padding: 5px 0;
border: 1px solid;
display: block;
width: 119px;
color: #333;
background: #f1f1f1;
font-family: 'Book Antiqua', 'ＭＳ Ｐ明朝', serif;
font-size: 116%;
text-align: center;
text-decoration: none;
}
div#MENU ul li a:hover {
margin-left: 0 !important;
width: 129px !important;
}
li.menu-on a, li.menu-on a:link, li.menu-on a:visited {
margin-left: 0 !important;
border-right: 1px solid #fff !important;
width: 129px !important;
background: #fff !important;
}
div#KIZI {
margin-left: 160px;
padding: 80px 50px 30px 50px;
border-left: 1px solid #333;
background: #fff;
}
ul.modori {
display: none;
}
div#FOOTER {
position: fixed !important;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 22px;
color: #fff;
background: #000;
}
div#FOOTER h2, div#FOOTER ul.modori {
display: none;
}
div#FOOTER ul {
text-align: center;
}
div#FOOTER ul li {
display: inline;
}
お礼
ご回答ありがとうございましたm(__)m