メニュー内のメニュー項目をハイライトする方法

-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使用しても大丈夫です場合：ホバー**あなた以来、動作しません –

はその後、クラス

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.P.S：同じページ内のリンクを使用している場合は、javascriptを使用する必要があります。 jQueryのでは、コードは次のようになります。

また

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

は、直接HTMLで、initally選択した項目にpureCssMenuSelectedクラスを追加します。あなたはこの最後のソリューションを使用する場合は最後に、1つのページにこのリンクを使用する場合は

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

（または）もjqueryのを使用することができます純粋 CSSメニュー以外の何か:)

出典

2012-04-13 08:37:57 webdreamer

それを呼び出します

別のページにリダイレクトして1つのクラスを作成し、そのクラスをリダイレクトされたページにリンクごとに追加します。私は、これはあなたを助けることを願っています
...

出典

2012-04-13 08:47:08 Sam

クリックされた同じ要素を削除して追加しています。あなたがクリックするたびに常に選択されます - 良いのは、決して選択を解除しません。 – webdreamer

あなたは私の回答に答えることができたので、あなたは私の答えを編集したので意味がないようには見えません。Dあなたはまだ問題があります。 liとaの両方にクラスを追加するようになったので、分離しないで、同じオプションに関連するliまたは以前に選択したクラスから選択したクラスを削除します。したがって、要素の1つ（aまたはliのいずれか）だけがクラスを持ちます。 – webdreamer

確かにそれは動作しますが、あなたはjqueryライブラリファイルを使用する必要があります！ – Sam

あなたが個別にすべてのページのメニューを使用している場合、あなたはwebdreamerは、上記の説明のように、メニューから該当する項目を強調classを追加することができます。

マスターページのコントロールとしてメニューを使用している場合は、現在のページを見つけてクラスを手動で追加する必要があります。あなたはハイテクあなたがアクティブなクラスを作成し、同じ** pureCssMenui0に与えることができ.addClass()と .removeClass()

出典

2012-04-13 08:51:58

$（ 'a'）。最小限のコード（私は思う）： $（this）.toggleClass（ 'pureCssMenuSelected'） ; } – webdreamer

メニュー内のメニュー項目をハイライトする方法

答えて

関連する問題