突出显示导航栏上的当前链接 [英] Highlight current link on navigation bar

问题描述

需要帮助来突出显示导航栏上的当前类别。我怎样才能做到这一点？我真的很感谢一些帮助。谢谢。

Need help to highlight current category on navigation bar. How can I achieve this? I would really appreciate some help. Thanks.

推荐答案

@MichaelEugeneYuen

@MichaelEugeneYuen

这是我的 top.phtml 文件，我加了

This is my top.phtml file, I added

<li <?php if (Mage::helper('core/url')->getCurrentUrl() === $this->getUrl('Offers')):?>class="active"<?php endif;?>><a href="<?php echo $this->getUrl('contacts')?>">Offers</a></li>

但我不知道它是否放置正确

but I don't know if it is correctly placed

<?php

/**

 * Top menu for store

 *

 * @see Mage_Catalog_Block_Navigation

 */

?>

<?php

/**

 * $this->renderCategoriesMenuHtml() supports optional arguments:

 * int Level number for list item class to start from

 * string Extra class of outermost list items

 * string If specified wraps children list in div with this class

 */

?>

<?php $_menu = $this->renderCategoriesMenuHtml(0,'level-top') ?>

<?php if($_menu): ?>

<script>

        $j(document).ready(function(){

                $j('#nav').mobileMenu();

        });

    </script>

<div class="nav-container">

    <ul id="nav">

    <li <?php if (Mage::helper('core/url')->getCurrentUrl() === $this->getUrl('Offers')):?>class="active"<?php endif;?>><a href="<?php echo $this->getUrl('contacts')?>">Offers</a></li>

        <?php echo $_menu ?>

    </ul>

</div>

<?php endif ?>

另外，我已将CSS代码添加到0级别的Style.css中

Also, i have added the CSS code you gave me to the Style.css in the 0 level

/* 0 Level */
    #nav li { 
        float: left;
        padding: 5px 17px 10px 0;
    }
    ul#nav{padding-left:0px }
    #nav a { font-size:18px!important;
    color: #666666 !important;
    float: left;
    padding-left: 5px;
    font-family: 'futura_lt_btlight'; !important;
    font-weight:normal !important;
    li:active a { font-color: red; }
     }
     .subcategories {
      padding-left: 0px !important;
      margin-right: 0px !important;
    }
    #mc-embedded-subscribe {
      float: left;
      width: 11px;
      background: url(https://www.blubond.com/wp-content/uploads/2015/01/cross.png) no-repeat !important;
      height: 11px;
      color: rgba(0, 0, 0, 0);
      text-indent: 9999px;
      border: 0px !important;
      margin-top: 7px;
      margin-left: 5px;
      box-shadow: none;
    }
    #nav > li:nth-child(3) {
    background: url("../images/main_menu_dd_arw.png") no-repeat 100% 15px;  
    margin-right: 16px;
    }
    .post-entry center {
      font-family: 'futura_lt_btlight';
      font-size: 18px;
      line-height: 24px;
    }
    .page-template-blog-excerpt-php .post {
      margin-bottom: 60px;
    }
    .page-template-blog-excerpt-php .post-entry {
      font-family: 'futura_lt_btlight';
      font-size: 18px;
      line-height: 24px !important;
    }
    .page-template-blog-excerpt-php .post-entry p {
      margin-bottom: 0px;   
    }
    .page-template-blog-excerpt-php .post-data {
      margin-top: 0px;
    }
     .nav-collapse a {
    text-align: left;
    }
    .rdiregdrop
    {
        background: url("../images/top_dd_arw-3.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
        display: block;
        float:right;
        height: 5px;
        margin-left: 0;
        margin-right: 6px;
        margin-top: 11px;
        width:9px;
    }
    #nav li.over a,
    #nav a:hover { color:#9f9f9f;}
    .rdishopdd{display: block;float:right;height:5px;width:9px;display:none; margin-left: 5px;
        margin-top: 10px;}
    .rdishopdd:hover{background: url("../images/main_menu_dd_arw.png") repeat scroll 0 0 rgba(0, 0, 0, 0); display: block;float:right;height:5px;width:9px;display:block;margin-left: 5px;
        margin-top: 10px;} 

这篇关于突出显示导航栏上的当前链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！