메뉴에서 메뉴 항목을 강조 표시하는 방법

-3

웹 페이지에서 CSS 메뉴를 사용하고 있으며 CSS 메뉴에서 선택한 메뉴 항목을 강조 표시하는 방법을 알고 싶습니다. 아래 HTML/CSS 코드를 붙여 넣었습니다. 누구든지 메뉴 항목을 강조 표시하기 위해 코드 스 니펫을 게시하여 도움을받을 수 있습니까?메뉴에서 메뉴 항목을 강조 표시하는 방법

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
    <title>Generated by Pure CSS Menu.com : Free CSS Drop Down Menu Generator</title> 
    <meta name="description" content="Online CSS Menu Maker. Create No-Javascript, 100% CSS Dropdown Menu in seconds! Horizontal css menu & Vertical css menu." /> 
</head> 
<body bgcolor="#ffffff"> 



<!-- Start PureCSSMenu.com STYLE --> 
<style> 
#pcm{display:none;} 
ul.pureCssMenu ul{display:none} 
ul.pureCssMenu li:hover>ul{display:block} 
ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;} 
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;} 
ul.pureCssMenu,ul.pureCssMenu ul { 
    margin:0px; 
    list-style:none; 
    padding:0px 1px 1px 0px; 
    background-color:#A5A5A5; 
    background-repeat:repeat; 
    border-color:#A6A6A6; 
    border-width:0px; 
    border-style:solid; 
} 
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu { 
    display:block; 
    zoom:1; 
    float: left; 
} 
ul.pureCssMenu ul{ 
    width:0px; 
} 
ul.pureCssMenu li{ 
    display:block; 
    margin:1px 0px 0px 1px; 
    font-size:0px; 
} 
ul.pureCssMenu a:active, ul.pureCssMenu a:focus { 
outline-style:none; 
} 
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover { 
    display:block; 
    vertical-align:middle; 
    background-color:#FFFFFF; 
    border-width:0px; 
    border-color:#FCEEB0; 
    border-style:solid; 
    text-align:left; 
    text-decoration:none; 
    padding:5px; 
    _padding-left:0; 
    font:normal 11px Arial; 
    color: #000000; 
    text-decoration:none; 
    cursor:pointer; 
} 
ul.pureCssMenu span{ 
    overflow:hidden; 
} 
ul.pureCssMenu li { 
    float:left; 
} 
ul.pureCssMenu ul li { 
    float:none; 
} 
ul.pureCssMenu ul a { 
    text-align:left; 
    white-space:nowrap; 
} 
ul.pureCssMenu li.sep{ 
    text-align:left; 
    padding:0px; 
    line-height:0; 
    height:100%; 
} 
ul.pureCssMenu li.sep span{ 
    float:none; padding-right:0; 
    width:3; 
    height:100%; 
    display:inline-block; 
    background-color:#A6A6A6; background-image:none;} 
ul.pureCssMenu ul li.sep span{ 
    width:100%; 
    height:3; 
} 
ul.pureCssMenu li:hover{ 
    position:relative; 
} 
ul.pureCssMenu li:hover>a{ 
    background-color:#FF1C1C; 
    border-color:#4C99AB; 
    border-style:solid; 
    font:normal 11px Arial; 
    color: #FFFFFF; 
    text-decoration:none; 
} 
ul.pureCssMenu li a:hover{ 
    position:relative; 
    background-color:#FF1C1C; 
    border-color:#4C99AB; 
    border-style:solid; 
    font:normal 11px Arial; 
    color: #FFFFFF; 
    text-decoration:none; 
} 
ul.pureCssMenu li.dis a { 
    color: #AAAAAA !important; 
} 
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:5px;width:16px; 
height:16px; 
} 
ul.pureCssMenu ul img {width:16px; 
height:16px; 
} 
ul.pureCssMenu img.over{display:none} 
ul.pureCssMenu li.dis a:hover img.over{display:none !important} 
ul.pureCssMenu li.dis a:hover img.def {display:inline !important} 
ul.pureCssMenu li:hover > a img.def {display:none} 
ul.pureCssMenu li:hover > a img.over {display:inline} 
ul.pureCssMenu a:hover img.over{display:inline} 
ul.pureCssMenu a:hover img.def{display:none} 
ul.pureCssMenu span{ 
    display:block; 
    background-image:url(./images/arrv_blue_2.gif); 
    background-position:right center; 
    background-repeat: no-repeat; 
    padding-right:8px;} 
ul.pureCssMenu li:hover>a>span{ background-image:url(./images/arrv_white_2.gif); 
} 
ul.pureCssMenu a:hover span{ _background-image:url(./images/arrv_white_2.gif)} 
ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arr_blue_2.gif)} 
ul.pureCssMenu ul li:hover > a span{ background-image:url(./images/arr_white_2.gif);} 
ul.pureCssMenu li a.pureCssMenui0{ 
font:n; 
} 
ul.pureCssMenu li a.pureCssMenui0:hover{ 
font:o; 
} 
</style> 
<!-- End PureCSSMenu.com STYLE --> 



<!-- Start PureCSSMenu.com MENU --> 
<ul class="pureCssMenu pureCssMenum"> 
    <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">Home</a></li> 
    <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">About us</a></li> 
    <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">FAQ</a></li> 
    <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">Gallery</a></li> 
    <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">Forums</a></li> 
    <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">Contact us</a></li> 
</ul> 
<a id="pcm" href="http://www.purecssmenu.com/">CSS Drop Down Menu by PureCSSMenu.com</a> 
<!-- End PureCSSMenu.com MENU --> 



<!-- (c) 2009, PureCSSMenu.com --> 


<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
</body> 
</html>

출처

2012-04-13 Chandan M

를 사용하여이 항목 Click을 할 수 JQuery 사용하고 동일한 ** pureCssMenui0에게 줄 수 확인 경우 : 가져 ** –

나는 당신이 원하는 것은, 그런 다음 클래스를

ul.pureCssMenuSelected { 
    //whatever the selection should look like 
}

가 당신이 갈 각 HTML 페이지에서, 당신은 페이지가 너무 참조하는 옵션에 해당 클래스를 추가하는 것 같아요.

<ul class="pureCssMenu pureCssMenum"> 
    <li class="pureCssMenui0"><a class="pureCssMenui0 pureCssMenuSelected" href="#">Home</a></li> 
    <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">About us</a></li> 
    <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">FAQ</a></li> 
    <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">Gallery</a></li> 
    <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">Forums</a></li> 
    <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">Contact us</a></li> 
</ul>

물론이 때문에 html에는 선택한 항목이 무엇을 의미하는지 짐작할 수있는 방법이 없습니다.

추신 : 아마 아마 해당 옵션에 앵커 링크를 사용하고 싶지 않을 것입니다.

P.P.S : 다른 페이지에서 언급했듯이 같은 페이지에서 링크를 사용하는 경우 javascript를 사용해야합니다. jQuery를에서 코드가 될 수있다 :

또한

$('a').click(function() { 
    $('.pureCssMenuSelected').removeClass('pureCssMenuSelected'); 
    $(this).addClass('pureCssMenuSelected'); 
}

는 직접 HTML에서, 초기에는 더 선택한 항목에 pureCssMenuSelected 클래스를 추가 할 수 있습니다. 당신이 마지막으로 솔루션을 사용하는 경우 당신은 jQuery를 사용할 수있는 하나의 페이지에이 링크를 사용하는 경우 마지막으로, 순수 CSS 메뉴 :

출처

2012-04-13 08:37:57 webdreamer

보다 그것을 다른 뭔가를 호출도

$('.pureCssMenu li a').click(function() { 
$('.pureCssMenu li a').removeClass('selected'); 
$(this).addClass('selected'); 
});

(또는)

한 페이지를 다른 페이지로 리디렉션하고 해당 링크를 리디렉션 된 페이지에 추가하십시오. 나는 이것이 당신을 도움이되기를 바랍니다
...

출처

2012-04-13 08:47:08 Sam

당신 때문에 작동하지 않습니다 클릭 한 동일한 요소를 제거하고 클래스를 추가하고 있습니다. 클릭 할 때마다 항상 선택됩니다. 좋으면 선택을 해제하지 않습니다. – webdreamer

당신은 내 답장에 응답 할 수 있었으므로 이제는 내 대답을 편집 한 것이 이해가 안되는 것처럼 보이지 않을 것입니다. D 여전히 문제가 있긴하지만. 이제 li과 a 모두에 클래스를 추가하고 있습니다. 분리하지 않으면 동일한 옵션과 관련된 li 또는 이전에 선택된 클래스에서 선택된 클래스가 제거됩니다. 따라서 요소 중 하나 (a 또는 li) 만 클래스를 갖습니다. – webdreamer

작동하는지 확신하지만 jquery 라이브러리 파일을 사용해야합니다! – Sam

별도로 모든 페이지의 메뉴를 사용하는 경우, 당신은 webdreamer 위의 설명과 같이 메뉴에서 관련 항목을 하이라이트 class를 추가 할 수 있습니다.

메뉴를 마스터 페이지의 컨트롤로 사용하는 경우 현재 페이지를 찾아 수동으로 추가해야합니다. 당신이 인사는 활성 클래스를 만들 수 있습니다 당신이 .addClass() 및 .removeClass()

출처

2012-04-13 08:51:58

최소 코드 (내 생각 엔) : $ ('a'). (() pureCssMenuSelected '). ; } – webdreamer

메뉴에서 메뉴 항목을 강조 표시하는 방법

답변

관련 문제