메뉴바 호버로 활성화 : PHP와 CSS를 활용한 방법
웹사이트를 방문할때 현재 페이지를 메뉴바에서 색깔로 표시할 수 있습니다. 그렇게 하면 사용자 경험을 더 향상 시킬 수 있는데요.
이번 글에서는 JS를 활용하지 않고, PHP CSS만으로 현재 페이지를 표시하는 메뉴바를 구현하는 방법을 말씀드리겠습니다.
이 방법을 통해 URL을 기준으로 메뉴바 항목에 색깔을 입히는 기능을 구현 할 수 있습니다.
HTML 에 PHP 코드 넣기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu Highlight</title>
<style>
.active {
color: red;
}
</style>
</head>
<body>
<?php
// 현재 페이지 URI 가져오기
$currentPage = $_SERVER['REQUEST_URI'];
?>
<ul>
<li class="<?php echo ($currentPage == '/home.php') ? 'active' : ''; ?>"><a href="/home.php">Home</a></li>
<li class="<?php echo ($currentPage == '/about.php') ? 'active' : ''; ?>"><a href="/about.php">About</a></li>
<li class="<?php echo ($currentPage == '/services.php') ? 'active' : ''; ?>"><a href="/services.php">Services</a></li>
<li class="<?php echo ($currentPage == '/contact.php') ? 'active' : ''; ?>"><a href="/contact.php">Contact</a></li>
</ul>
</body>
</html>위 코드에서는 $_SERVER['REQUEST_URI']를 사용하여 현재 페이지의 URI를 가져오고, 이를 기준으로 삼항 연산자를 사용하여 각 <li> 요소에 'active' 클래스를 조건부로 적용했습니다. 해당 URI와 일치하는 메뉴 항목에 'active' 클래스가 추가되며, 이를 통해 스타일을 적용할 수 있습니다.
MID 기준으로 메뉴바 활성화
XE와 같은 CMS를 사용할 경우, MID를 기준으로 메뉴바 항목을 활성화할 수 있습니다. MID는 XE에서 페이지를 식별하는 데 사용되는 고유 ID입니다. 다음은 MID를 사용하여 메뉴바를 활성화하는 예시입니다.
<?php
// MID 가져오기 (예시: MID가 URL의 쿼리 스트링에 포함된 경우)
$currentMID = $_GET['mid'];
// 메뉴 항목 정의
$menuItems = [
'home' => 'Home',
'about' => 'About',
'services' => 'Services',
'contact' => 'Contact'
];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu Highlight</title>
<style>
.active {
color: red;
}
</style>
</head>
<body>
<ul>
<?php
foreach ($menuItems as $mid => $title) {
$activeClass = ($currentMID == $mid) ? 'active' : '';
echo "<li class=\"$activeClass\"><a href=\"/page.php?mid=$mid\">$title</a></li>";
}
?>
</ul>
</body>
</html>
위 코드에서는 $_GET['mid']를 사용하여 현재 페이지의 MID를 가져오고, 각 메뉴 항목의 MID와 비교하여 'active' 클래스를 추가합니다. 이 방법을 통해 URL의 MID를 기준으로 메뉴 항목을 활성화할 수 있습니다.
PHP와 CSS만을 사용하여 현재 페이지를 표시하는 메뉴바를 구현하는 방법을 살펴보았습니다. 이 방법을 통해 간단하고 효율적으로 메뉴바를 활성화할 수 있으며, 사용자 경험을 향상시킬 수 있습니다. PHP의 삼항 연산자를 활용하여 조건부 클래스를 적용하는 것이 핵심입니다. XE와 같은 CMS를 사용할 때는 MID를 기준으로 메뉴바를 활성화할 수도 있습니다
#phpphp 태그 삭제#웹디자인웹디자인 태그 삭제#CSSCSS 태그 삭제#cmscms 태그 삭제#웹개발웹개발 태그 삭제#메뉴활성화메뉴활성화 태그 삭제#사용자경험사용자경험 태그 삭제#메뉴바메뉴바 태그 삭제#url기준url기준 태그 삭제#mid기준mid기준 태그 삭제