내가 현재있는 페이지를 강조하는 순수한 CSS 메뉴

다른 색상의 활성 메뉴 링크 페이지의 배경을 가진 메뉴에 대한 순수 CSS/HTML 구조를 만들려고합니다. 그 때문에 나는 :checked 셀렉터를 사용하고 있습니다. 입력 요소를 클릭하여이 작업을 수행 할 수 있지만 실제로 링크를 클릭하면 아무 일도 일어나지 않습니다.내가 현재있는 페이지를 강조하는 순수한 CSS 메뉴

메뉴의 모든 페이지에 메뉴 코드를 갖고 싶지 않고 포함 파일에 포함시키고 싶습니다. 내가 옳지 않은 일을 말해주십시오. 이 목적을 위해 javascript/jquery를 사용하고 싶지 않습니다.

편집 -

이 별도의 링크와 함께 별도의 페이지입니다. 나는 모든 링크를 똑같이 유지하여 나의 코데펜 밖으로 나가지 않도록했다.

이 내 codepen입니다 - https://codepen.io/anon/pen/zPrOoj이 내 조각 - 당신은 에 링크 Codepen는에만 CSS로

.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>

출처

2017-11-02 user20152015

나는 새 페이지를로드 할 때 각 페이지에서 체크 박스를 반복하지 않는 확인 올바른 확인란을 유지하고 넣을 수있는 방법이 없기 때문에 당신이 자바 스크립트없이 그것을 달성 할 수 있다고 생각 속성을 올바른 입력으로 확인했습니다. 펜은 어쨌든 잘 작동하지 않습니다. 이것은 HTML과 CSS 일 뿐이며 데이터베이스를 사용하고 있습니까? 이 경우 현재 페이지를 검색하고 클래스를 동적으로 현재 페이지에 할당 할 수 있습니다. –

이것은 HTML과 CSS입니다. 메뉴 항목은 데이터베이스에서 가져 오지 않습니다. – user20152015

을 만들 수 있습니다. 그러나 여전히은 새로운 페이지가로드 될 때의 문제를 해결하지 못합니다. 어떤 탐색 항목이 활성 상태인지 알 수있는 방법이 없습니다.

다음은 활성 탐색 항목을 강조 표시하는 CSS 전용 솔루션입니다. 다른 페이지 요소를 클릭 한 후에도 링크가 강조 표시되도록 시작한 동일한 설정을 사용했습니다 (:focus을 사용하면 발생하지 않음).

body{ 
 
    font-sze:14px; 
 
} 
 

 
.container{ 
 
max-width:960px; 
 
    margin:0 auto; 
 
} 
 
nav ul li{ 
 
    list-style:none; 
 
    float:left; 
 
    padding-right:20px; 
 
} 
 
nav ul li a{ 
 
    text-decoration:none; 
 
    color:#222; 
 
    background-color:#ccc; 
 
    padding:4px 5px; 
 
} 
 

 
input { 
 
    display: none; 
 
} 
 

 
input:checked + a { 
 
    background-color:#d90000; 
 
    color:#fff; 
 
}

<body> 
 
    <div class="container"> 
 
    <nav class="navecation"> 
 
     <ul id="navi"> 
 
     <li><input name="nav" type="radio" id="about"><a class="menu" href="#"><label for="about">About</label></a></li> 
 
     <li><input name="nav" type="radio" id="contact"><a class="menu" href="#"><label for="contact">Contact</label></a></li> 
 
     <li><input name="nav" type="radio" id="services"><a class="menu" href="#"><label for="services">Services</label></a></li> 
 
     <li><input name="nav" type="radio" id="contactus"><a class="menu" href="#"><label for="contactus">Contact Us</label></a></li> 
 
     <li><input name="nav" type="radio" id="blog"><a class="menu" href="#"><label for="blog">Read Our Blog</a></a></li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 

 

 
    <body>

출처

2017-11-02 16:05:32

목표는 메뉴 막대에서 강조 표시 할 링크 및 페이지가있는 CSS 메뉴를 갖는 것입니다. 링크가 필요하므로 제거 할 수 없습니다. 나는'label'을 사용하여'li'를 감싸려고했지만 스타일을 완전히 망칠 것입니다. – user20152015

그러나 왜 체크 박스와 라벨이 필요합니까? –

체크 박스와 라벨은': checked' CSS selector 속성을 사용하기위한 것입니다. 확인란이 숨겨집니다. – user20152015

내가 현재있는 페이지를 강조하는 순수한 CSS 메뉴

답변

관련 문제