0
私は、アクティブなメニューリンクページの背景が異なる色のメニューの純粋なCSS/HTML構造を作ろうとしています。そのために私は:checkedセレクタを使用しています。私は入力要素をクリックすることでこれを実現できますが、実際のリンク自体をクリックすると何も起こりません。私が現在使っているページを強調表示した純粋なCSSメニュー
私は、メニューのすべてのページにメニューコードを入れたくないので、それをインクルードファイルに含めました。私が正しくしていないことを教えてください。私はこの目的のためにjavascript/jqueryを使いたくない。
編集 -
これらの個別のリンクを持つ独立したページです。私は私のコードの外に出ないようにすべてのリンクを同じにしていました。
これが私のcodepenある - https://codepen.io/anon/pen/zPrOoj、これは私の抜粋です -
.nav {
float: left;
width: 100%;
background-color: rgba(248, 220, 192, 1);
color: black;
display: table;
table-layout: fixed;
}
.nav ul {
width: 100%;
float: left;
white-space: nowrap;
display: flex;
flex-direction: row;
\t overflow: hidden;
\t margin: 0;
padding: 0;
}
.nav ul li.nav_bar {
display: inline;
padding: 1% 0% .5% 0.75%;
border-right: solid 1px rgba(78, 52, 25, 1);
\t flex-grow: 1;
}
.nav ul li a {
color: black;
\t display: block;
\t
}
.nav ul li.active {
\t background-color: rgba(103, 140, 57, 1);
\t \t
}
.nav ul li.active a {
border-bottom: none;
padding-bottom: 4px;
\t color : #ccc;
}
.nav ul li.nav_bar:last-child {
border-right: none;
}
a.nav_bar {
text-align: center;
text-decoration: none;
font-family: verdana;
font-size: 16px;
}
a.nav_bar:hover {
color: red;
}
.menu1:checked ~ ul.nav_bar>.num1+li.first {
background: blue;
}
.menu2:checked ~ ul.nav_bar>.num2+li.second {
background: red;
}
.menu3:checked ~ ul.nav_bar>.num3+li.third {
background: pink;
}
.menu4:checked ~ ul.nav_bar>.num4+li.fourth {
background: yellow;
}<div class="nav" >
<input class="menu1" id="_menu1" type="checkbox">
<input class="menu2" id="_menu2" type="checkbox">
<input class="menu3" id="_menu3" type="checkbox">
<input class="menu4" id="_menu4" type="checkbox">
\t <ul id="respons-text1" class="nav_bar">
<label class="num1" for="_menu1">
<span></span></label>
\t \t <li class="nav_bar active first"><a class="nav_bar" href="#">home</a>
\t \t </li>
<label class="num2" for="_menu2">
<span></span></label>
\t \t <li class="nav_bar second"><a class="nav_bar" href="#">about</a>
\t \t </li>
<label class="num3" for="_menu3">
<span></span></label>
\t \t <li class="nav_bar third"><a class="nav_bar" href="#">work areas</a>
\t \t </li>
<label class="num4" for="_menu4">
<span></span></label>
\t \t <li class="nav_bar fourth"><a class="nav_bar" href="#">contact</a>
\t \t </li>
\t </ul>
</div>
は、私はあなたが新しいページをロードするとき、あなたは、各ページのチェックボックスを繰り返さない限り確認し、正しいチェックボックスを維持して置くことができる方法はありませんので、あなたはjavascriptをせずにそれを達成することができないと思いますチェックされた属性を正しい入力に置き換えます。とにかくうまくいきません。これはHTMLとCSSだけですか、データベースを使用していますか？その場合、現在のページを取得し、現在のページにクラスを動的に割り当てることができます。 –
これはHTMLとCSSだけです。メニュー項目はデータベースからフェッチされません。 – user20152015