Как выделить пункт меню в меню

-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

привет вы можете создать класс активный и раздай же ** 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.S .: Вероятно, вы, вероятно, не хотите использовать привязку привязки к этой опции.

P.P.S .: Как уже упоминалось, если вы используете ссылки на одной странице, вам необходимо использовать javascript. В JQuery, код может быть:

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

Кроме того, добавьте класс pureCssMenuSelected к Initally выбранного элемента, непосредственно в HTML. И, наконец, если вы используете это последнее решение, назвать это нечто иное, чем чистого меню CSS :)

источник

2012-04-13 08:37:57 webdreamer

Если вы используете эти ссылки на одной странице Вы можете использовать JQuery также

$('.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

Если вы используете меню во всех страницах отдельно, вы можете добавить class, который выдвигает на первый план соответствующего пункта из меню, как webdreamer объясняет выше.

Если вы используете меню в качестве элемента управления, которое размещается на главной странице, вы должны найти текущую страницу и добавить класс вручную. Если вы хорошо использовать JQuery вы можете сделать этот пункт Click с помощью .addClass() и .removeClass()

источник

2012-04-13 08:51:58

Минимальный код (я думаю): $ ('a'). Click (function() {$ ('. PureCssMenuSelected'). RemoveClass ('pureCssMenuSelected'); $ (this) .toggleClass ('pureCssMenuSelected') ; } – webdreamer

Как выделить пункт меню в меню

ответ

Смежные вопросы