PHP 메뉴 탐색

Question

이 이미지 탭 시스템을 사용하여 현재 페이지를 강조 표시하는 PHP 탐색 메뉴를 어떻게 만들 수 있습니까?

<a href="index.php" title="Home"> 
    <img src="images/menu/SR_MenuHome.gif" 
     alt="Home" 
     width="52" 
     height="31" 
     onmouseover="this.src='images/menu/SR_MenuHome-ov.gif';" 
     onmouseout="this.src='images/menu/SR_MenuHome.gif';" 
     /> 
</a> 
<a href="company.php" title="Company"> 
    <img src="images/menu/SR_MenuCompany.gif" 
     alt="Company" 
     width="76" 
     height="31" 
     onmouseover="this.src='images/menu/SR_MenuCompany-ov.gif';" 
     onmouseout="this.src='images/menu/SR_MenuCompany.gif';" 
     /> 
</a> 
<a href="investors.php" title="Investor Relations"> 
    <img src="images/menu/SR_MenuIR.gif" 
     alt="Investor Relations" 
     width="157" 
     height="31" 
     onmouseover="this.src='images/menu/SR_MenuIR-ov.gif';" 
     onmouseout="this.src='images/menu/SR_MenuIR.gif';" 
     /> 
</a> 

Answer 1

get 배열을 사용하여 강조 표시된 클래스를 결정하는 변수를 설정할 수 있습니다.

이것은 아마도 가장 원시적 인 접근 방법이지만이 용도로 사용할 수 있습니다.

$class = $_GET['selected_class']; 

URL이 GET 배열 수퍼 글로벌을 사용하여 변수를 전달할 수있게합니다. 을 strcmp 함수에서 이름을 변경 모든 탭에 대한

http://www.yourdomain.com/?selected_class=about

<a href="index.html" title="Home" class="<?if(strcmp($class, 'about') ==0){echo 'selected';}?>"><img src="images/menu/SR_MenuHome.gif" alt="Home" width="52" height="31" onmouseover="this.src='images/menu/SR_MenuHome-ov.gif';" onmouseout="this.src='images/menu/SR_MenuHome.gif';"/></a> 

반복, 다음 해당 클래스에 대해 확인합니다. 그러면 선택한 클래스가 URL에 의해 결정됩니다. 그런 다음 강조 표시된 스타일을 .selected 클래스에 적용 할 수 있습니다.

또한 자바 스크립트를 사용하여 get 배열에서이 값을 가져오고 dom을 조작하여 클래스를 설정할 수 있습니다. 이것은 가장 기본적인 접근 방식으로 제공됩니다.

또한 모든 CSS를 이동하고 이미지 크기가 작 으면 롤 오버 이벤트를 버리고 배경 이미지 속성을 설정하기 위해 CSS의 : 호버 (hover) 상태를 사용하는 버튼 CSS 배경 이미지를 만듭니다.

http://www.w3schools.com/CSS/css_pseudo_classes.asp

편집 : 요청에 따라 편집. 그러면 선택한 페이지에 대해 get 변수가 생성됩니다. href attr에 varible을 추가 할 것입니다. 그래서 클릭하면 변수가있는 페이지가로드됩니다.

<? $class = $_GET['selected_tab']; ?> 

<a href="index.php?selected_tab=home" title="Home"> 
    <img src="images/menu/SR_MenuHome.gif" 
     alt="Home" 
     width="52" 
     height="31" 
     class="<? if(strcmp($class,'home')==0){echo 'selected';} ?>" 
     onmouseover="this.src='images/menu/SR_MenuHome-ov.gif';" 
     onmouseout="this.src='images/menu/SR_MenuHome.gif';" 
     /> 
</a> 
<a href="company.php?selected_tab=company" title="Company"> 
    <img src="images/menu/SR_MenuCompany.gif" 
     alt="Company" 
     width="76" 
     height="31" 
     class="<? if(strcmp($class,'company')==0){echo 'selected';} ?>" 
     onmouseover="this.src='images/menu/SR_MenuCompany-ov.gif';" 
     onmouseout="this.src='images/menu/SR_MenuCompany.gif';" 
     /> 
</a> 
<a href="investors.php?selected_tab=investors" title="Investor Relations"> 
    <img src="images/menu/SR_MenuIR.gif" 
     alt="Investor Relations" 
     width="157" 
     height="31" 
     class="<? if(strcmp($class,'investors')==0){echo 'selected';} ?>" 
     onmouseover="this.src='images/menu/SR_MenuIR-ov.gif';" 
     onmouseout="this.src='images/menu/SR_MenuIR.gif';" 
     /> 
</a> 

CSS 파일에 .selected 스타일을 추가하십시오. 인라인하려면 스타일 태그를 헤더에 넣고 거기에 넣으십시오.

<style> 
     .selected{border-bottom:2px #fff solid;} 
</style> 

이 예제에서는 선택한 요소에 border 속성을 넣었습니다. 모든 CSS 스타일을 사용할 수 있습니다.

편집 :

당신이 당신의 이미지의 상태가 JS, 당신이 사용할 수있는 다양한 의사 선택기의 CSS 만들기 사용에 걸쳐 작업을 이동해야 것보다는 CSS를 기반으로 변경을 원합니다. 블록 또는 인라인 블록 (메뉴의 순서, 세로 또는 가로)에 따라 요소를 만든 다음 상태에 따라 배경 이미지 속성을 설정하여이 작업을 수행 할 수 있습니다. .이

을 아마 의미를 위해서 좋은 일이있는 img 태그에 대한 필요성을 (제거하는 것입니다 그래서 당신과 같이 링크의 메뉴가 있다면 :

<a class="nav-item" href="one">Home</a><a class="nav-item" href="two">About</a> 

는 당신의 상태를 스타일 수 배경 이미지 나 이전에 제공 한 코드가 반영해야하므로 선택한 요소는, 새로운 .nav 항목 클래스에 추가해야합니다 이러한 접근 방식에

<style> 
.nav-item 
{display:inline-block; width:76px; height:31px; background-image:url('path/to/upstate_image.gif');} 

.nav-item:hover 
{background-image:url('path/to/hover_image.gif');} 

.nav-item.selected 
{background-image:url('path/to/selected_image.gif');} 
</style> 

만들기 참고, 이러한.

class="nav-item <? if(strcmp($class,'investors')==0){echo 'selected';} ?>" 

이렇게하면 클래스가 모든 태그 자체에 추가됩니다. 이 방법을 사용하면 태그가 배경 이미지로 원하는 이미지를로드하므로 img 태그 또는 js에 대해 걱정할 필요가 없습니다. 여기

색상과 배경처럼 원시적 CSS 스타일을 사용하여 거친 데모입니다 (나는 이미지를 만들 수있는 시간이 없었다.)

http://www.idrivecreative.com/offsource/demo_for_detonate.php

http://www.idrivecreative.com/offsource/demo_for_detonate.php?selected_tab=company

당신은 상태 변화를 볼 수 있습니다 소스를보고 css를 사용하여 수행하는 방법에 대해 설명합니다. 희망이 도움이됩니다.

http://www.w3schools.com/css/pr_background-image.asp

당신이 구문을 사용하여 도움이 필요합니다.