2013-11-14 3 views
2

Вот мой код врезкеКак сфокусировать активный пункт меню на боковой панели?

<div><ul class="menusubnav"> 
<li class="orange"><a href="Managerhomepage.php">Manager</a></li> 
<li><a href="addcustomerpage.php">New Customer</a></li> 
<li><a href="EditCustomer.php">Edit Customer</a></li> 
<li><a href="DeleteCustomerInput.php">Delete Customer</a></li> 
<li><a href="addAccount.php">New Account</a></li> 
<li><a href="editAccount.php">Edit Account</a></li> 
<li><a href="deleteAccountInput.php">Delete Account</a></li> 
<li><a href="MiniStatementInput.php">Mini Statement</a></li> 
<li><a href="CustomisedStatementInput.php">Customised Statement</a></li> 
<li><a href="Logout.php">Log out</a></li> 
</ul></div> 

и вот мой CSS код

.menusubnav li{ 
    margin-top:0px; padding:0; 
    list-style:none; 
} 
.menusubnav a{ 
    margin-left:0px; 
    margin:0px; padding:10px; display:block; 
    border-bottom: 1px solid #e0e0e0; 
    font: 12px "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Verdana, sans-serif; 
    text-decoration:none; color: #333; 
} 
.menusubnav a:hover{ 
    background-color:#FEF5EE; 
} 
.menusubnav a:active{ 
    outline:none; 
    border-color:#ffa853; 
    background-color:#FF6600; 
    box-shadow:0 0 10px #ffa853; 
} 

и вот мой jsfiddle

пожалуйста, помогите мне, как к этому. Я хочу сфокусировать или изменить цвет активной ссылки в меню боковой панели. прошу помочь.

ответ

5

просто добавьте класс в активное меню.

.active { 
    outline:none; 
    border-color:#ffa853; 
    background-color:#FF6600; 
    box-shadow:0 0 10px #ffa853; 
} 

например.

<div><ul class="menusubnav"> 
<li class="active"><a href="Managerhomepage.php">Manager</a></li> <--look here 
<li><a href="addcustomerpage.php">New Customer</a></li> 
<li><a href="EditCustomer.php">Edit Customer</a></li> 
<li><a href="DeleteCustomerInput.php">Delete Customer</a></li> 
<li><a href="addAccount.php">New Account</a></li> 
</ul></div> 

http://jsfiddle.net/b4U3n/1/

Так при загрузке страницы просто добавьте class="active" к текущей активной ссылки в боковом меню.

Update:

стороне сервера код

<div><ul class="menusubnav"> 
<li <?php if($current_page == Managerhomepage.php){ echo 'class="active"'; } ?> ><a href="Managerhomepage.php">Manager</a></li> 
</ul></div> 

Примечание: не точно, как это сделать, но это понятие о том, как это сделать. Я полагаю, вы бы поняли это, так как ваши ссылки перенаправляют на php страницах

+0

не помогает броу ... –

+1

Зачем вам нужно? –

+0

Я хочу сфокусировать активную ссылку меню, и это может быть динамическим, и вы говорите о добавлении класса manualu в css и sidebar –

-1

попробовать что-то вдоль этих линий:

$('.menusubnav a').click(function() { 
    $('.menusubnav a').css('background', '#ffffff'); 
    $(this).css('background-color', '#FF6600'); 
}); 

Вы можете добавить свои полные правила CSS для каждой из функций CSS. Это устанавливает каждый пункт меню в состояние по умолчанию каждый раз, когда нажимается, и обновляет выбранный элемент.

0

Если вы используете платформу Wordpress, то это очень просто. Просто добавьте класс с именем .current_page_item a, а затем настройте его так, как хотите. Он будет работать для каждого навигационного меню независимо от пункта меню. Так что попробуйте. Я думаю, что все будет хорошо.

+0

Нет wordpress only php –

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