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 추가 : 예 ) 포츈쿠키
아래 스타일 추가 한후에
<style type="text/css">
#menu_bar li a.on { border-bottom:2px solid #FF0000}
</style>
네비 버튼에 원하는 곳에 class="on"
적용하면 됨
<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 class="on" >포춘쿠키</a></li>
<li><a href="fortune_item.php">행운의 아이템</a></li>
</ul>
</nav>
[2. 하드코딩인 경우 ]
- 공통 헤더가 들어가고 각 페이지 마다 클래스 적용하여 나타내기
<!-- 공통 네비 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;}
#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>
<nav id = "menu_bar2">
<ul>
<li class="navi_1"><a href="object.php">오늘의 운세</a></li>
<li class="navi_2"><a href="row.php">띠운세</a></li>
<li class="navi_3"><a href="star.php" >별자리운세</a></li>
<li class="navi_4"><a href="want_listen.php" >듣고 싶은 말</a></li>
<li class="navi_5"><a href="#" >포춘쿠키</a></li>
<li class="navi_6"><a href="fortune_item.php">행운의 아이템</a></li>
</ul>
</nav>
li 안에 class를 각각 준후 원하는 해당 페이지 상단에 아래 스타일 추가
<!-- 해당 페이지 상단에 추가할 css-->
<style type="text/css">
#menu_bar2 li.navi_6 a {color:#ff0000; border-bottom:2px solid #FF0000}
</style>
[3. 스크립트를 활용한 네비 on 적용 ]
- 공통 상단에 한번만 적용하면 됨 ( 단, php)
<nav id = "menu_bar3">
<ul>
<li class="navi_1"><a href="object.php?page=100">오늘의 운세</a></li>
<li class="navi_2"><a href="row.php?page=200">띠운세</a></li>
<li class="navi_3"><a href="star.php?page=300" >별자리운세</a></li>
<li class="navi_4"><a href="want_listen.php?page=400" >듣고 싶은 말</a></li>
<li class="navi_5"><a href="fortunephp?page=500" >포춘쿠키</a></li>
<li class="navi_6"><a href="fortune_item.php?page=600">행운의 아이템</a></li>
</ul>
</nav>
원하는 링크 주소 뒤에 페이지명 추가 ( 예 : ?page=600 )
아래 에 스크립트 추가
<?php
if($page==100) {
echo "<style type='text/css'> #menu_bar3 li.navi_1 a {color:#ff0000; border-bottom:2px solid #FF0000}</style>";
} else {
echo "";
}
if($page==200) {
echo "<style type='text/css'> #menu_bar3 li.navi_2 a {color:#ff0000; border-bottom:2px solid #FF0000}</style>";
} else {
echo "";
}
if($page==300) {
echo "<style type='text/css'> #menu_bar3 li.navi_3 a {color:#ff0000; border-bottom:2px solid #FF0000}</style>";
} else {
echo "";
}
if($page==400) {
echo "<style type='text/css'> #menu_bar3 li.navi_4 a {color:#ff0000; border-bottom:2px solid #FF0000}</style>";
} else {
echo "";
}
if($page==500) {
echo "<style type='text/css'> #menu_bar3 li.navi_5 a {color:#ff0000; border-bottom:2px solid #FF0000}</style>";
} else {
echo "";
}
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 "";
}
?>
해당 페이지 주소로 가면 해당 스크립트의 스타일이 적용되는 방식.
코드는 조금 무식하고 지저분하지만 그래도 간편하게 쓸수 있는 방법입니다.
더 깔끔하게 보기좋은 코드 정리는 더 높은 고수님들께 패스~~
visited 속성을 집어 넣는 자바스크립트가 필요합니다.
클릭했을 때, 자바스크립트가 실행하고, 그 안에서 visited 속성을 li에 집어 넣으면,
CSS가 알아서 밑줄을 넣어 주겠죠..
