a태그 속성이 visited를 해서 메뉴 아래에 밑줄을 만들고 싶은 데 애만 안됩니다. 채택완료
<nav id = "menu_bar">
<ul>
<li><a href="object.php">오늘의 운세</a></li>
<li><a href="row.php">띠운세</a></li>
<li><a href="star.php">별자리운세</a></li>
<li><a href="want_listen.php">듣고 싶은 말</a></li>
<li><a href="#">포춘쿠키</a></li>
<li><a href="fortune_item.php">행운의 아이템</a></li>
</ul>
</nav>
#menu_bar{ width: 100%; height: 70px; background-color: #FFFDF5;}
#menu_bar ul{display : flex;flex-direction: row;justify-content: space-between;}
#menu_bar li {font-size:28px;display:inline;padding: 20px;}
#menu_bar li a{color:black; text-decoration: none;}
#menu_bar li a:visited{border-bottom: 5px solid black;}
visited말고 hover같은 다른 속성은 되는데 visited를 하면은 방문한페이지만 밑줄을 만들고 싶은데 안됩니다.
답변 2개
[1. 하드코딩인 경우 ]
- 각 페이지 마다 네비가 각각 적용시 A 버튼 CLASS 안에 on 추가 : 예 ) 포츈쿠키
아래 스타일 추가 한후에
</strong></p>
<p><strong><span style="color:#e74c3c;"><style type="text/css">
#menu_bar li a.on { border-bottom:2px solid #FF0000}</span></strong></p>
<p><strong><span style="color:#e74c3c;"></style></span></strong></p>
<p><strong>
네비 버튼에 원하는 곳에 class="on"
적용하면 됨
</strong></p>
<p> <nav id = "menu_bar">
<ul>
<li><a href="object.php">오늘의 운세</a></li>
<li><a href="row.php">띠운세</a></li>
<li><a href="star.php" >별자리운세</a></li>
<li><a href="want_listen.php" >듣고 싶은 말</a></li>
<li><a <strong><span style="color:#d35400;">class="on" </span></strong>>포춘쿠키</a></li>
<li><a href="fortune_item.php">행운의 아이템</a></li>
</ul>
</nav></p>
<p><strong>
[2. 하드코딩인 경우 ]
- 공통 헤더가 들어가고 각 페이지 마다 클래스 적용하여 나타내기
</strong>
<!-- 공통 네비 css -->
<style type="text/css">
#menu_bar2{ width: 100%; height: 70px; }
#menu_bar2 ul{display : flex;flex-direction: row;justify-content: space-between;}
#menu_bar2 li {font-size:28px;display:inline;padding: 20px;}</p>
<p>#menu_bar2 li a { color:#333; text-decoration:none; font-size: 28px; padding:5px 10px }
#menu_bar2 li a:link { color:#333; text-decoration:none; }
#menu_bar2 li a:visited { color:#ff0000; text-decoration:none; }
#menu_bar2 li a:hover { color:#ff0000; }
</style>
</p>
<p> <nav id = "menu_bar2">
<ul>
<li class="<strong><span style="background-color:#f1c40f;">navi_1</span></strong>"><a href="object.php">오늘의 운세</a></li>
<li class="<strong><span style="background-color:#f1c40f;">navi_2</span></strong>"><a href="row.php">띠운세</a></li>
<li class="<strong><span style="background-color:#f1c40f;">navi_3</span></strong>"><a href="star.php" >별자리운세</a></li>
<li class="<strong><span style="background-color:#f1c40f;">navi_4</span></strong>"><a href="want_listen.php" >듣고 싶은 말</a></li>
<li class="<strong><span style="background-color:#f1c40f;">navi_5</span></strong>"><a href="#" >포춘쿠키</a></li>
<li class="<strong><span style="background-color:#f1c40f;">navi_6</span></strong>"><a href="fortune_item.php">행운의 아이템</a></li>
</ul>
</nav></p>
<p><strong>
li 안에 class를 각각 준후 원하는 해당 페이지 상단에 아래 스타일 추가
</strong></p>
<p><span style="color:#2ecc71;"><!-- 해당 페이지 상단에 추가할 css--></span>
<span style="color:#3498db;"><strong><style type="text/css">
#menu_bar2 li.navi_6 a {color:#ff0000; border-bottom:2px solid #FF0000}</strong></span></p>
<p><span style="color:#3498db;"><strong></style></strong></span></p>
<p><strong>
[3. 스크립트를 활용한 네비 on 적용 ]
- 공통 상단에 한번만 적용하면 됨 ( 단, php)
</strong></p>
<p> <nav id = "menu_bar3">
<ul>
<li class="navi_1"><a href="object.php<span style="background-color:#f1c40f;">?page=100</span>">오늘의 운세</a></li>
<li class="navi_2"><a href="row.php<span style="background-color:#f1c40f;">?page=200</span>">띠운세</a></li>
<li class="navi_3"><a href="star.php<span style="background-color:#f1c40f;">?page=300</span>" >별자리운세</a></li>
<li class="navi_4"><a href="want_listen.php<span style="background-color:#f1c40f;">?page=400</span>" >듣고 싶은 말</a></li>
<li class="navi_5"><a href="fortunephp<span style="background-color:#f1c40f;">?page=500</span>" >포춘쿠키</a></li>
<li class="navi_6"><a href="fortune_item.php<span style="background-color:#f1c40f;">?page=600</span>">행운의 아이템</a></li>
</ul>
</nav>
<strong>
원하는 링크 주소 뒤에 페이지명 추가 ( 예 : ?page=600 )
아래 에 스크립트 추가
</strong></p>
<p><?php</p>
<p>if($page==100) {
echo "<style type='text/css'> #menu_bar3 li.navi_1 a {color:#ff0000; border-bottom:2px solid #FF0000}</style>";
} else {
echo "";
}</p>
<p>if($page==200) {
echo "<style type='text/css'> #menu_bar3 li.navi_2 a {color:#ff0000; border-bottom:2px solid #FF0000}</style>";
} else {
echo "";
}</p>
<p>if($page==300) {
echo "<style type='text/css'> #menu_bar3 li.navi_3 a {color:#ff0000; border-bottom:2px solid #FF0000}</style>";
} else {
echo "";
}</p>
<p>if($page==400) {
echo "<style type='text/css'> #menu_bar3 li.navi_4 a {color:#ff0000; border-bottom:2px solid #FF0000}</style>";
} else {
echo "";
}</p>
<p>if($page==500) {
echo "<style type='text/css'> #menu_bar3 li.navi_5 a {color:#ff0000; border-bottom:2px solid #FF0000}</style>";
} else {
echo "";
}</p>
<p> if($ca_id==600) {
echo "<style type='text/css'> #menu_bar3 li.navi_6 a {color:#ff0000; border-bottom:2px solid #FF0000}</style>";
} else {
echo "";
}
?>
<strong>
해당 페이지 주소로 가면 해당 스크립트의 스타일이 적용되는 방식.
코드는 조금 무식하고 지저분하지만 그래도 간편하게 쓸수 있는 방법입니다.
더 깔끔하게 보기좋은 코드 정리는 더 높은 고수님들께 패스~~
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인