`
yanggaojiao
  • 浏览: 81790 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

在导航栏中或其他位置添加Home链接

阅读更多

本节不打算翻译,留给自己需要的时候Copy用

Add Home Link with functional active state to Menu Bar (Alternative Method)

Find the file called top.phtml in app/design/frontend/default/yourtheme/template/catalog/navigation/ and make the following change:

<div class="header-nav-container">
    <div class="header-nav">
        <h4 class="no-display"><?php echo $this->__('Category Navigation:') ?></h4>
        <ul id="nav">
 
        <!-- ALTERNATIVE HOME BUTTON HACK -->
        <li class="home"><a href="<?php echo $this->getUrl('')?>"><?php echo $this->__('Home') ?></a></li>
        <!-- ALTERNATIVE HOME BUTTON HACK -->
 
        <?php foreach ($this->getStoreCategories() as $_category):?>
            <?php echo $this->drawItem($_category) ?>
        <?php endforeach ?>
        </ul>
    </div>
    <?php echo $this->getChildHtml('topLeftLinks') ?>
</div>

 

Add the following to the menu.css file in skin/frontend/default/yourtheme/css/. This example is for a CMS home page which uses cms-home class in its body tag.

body.cms-home #nav li.home a { color:#d96708; }

 

NOTE: The following comments refer to the following methods.


:::: TRIED THIS AND IT ADDS THE LINK, BUT THE ACTIVE STATE DOES NOT FUNCTION CORRECTLY ::::

Special Note to the person(s) responsible for this page. Myself and many others have attempted to use this code snippet to get the result explained with an active state, but have been unable to get the active state to work. The link does work as far as pointing to exsisting cms page or external pages, but the “active” state does not work at all. Page refreshes and all links adjust back to original state.

FOR HOME LINK ONLY ACTIVE STATE I use the following as it’s the simplist way to get the active state working correctly on the home link.

<div class="header-nav-container">
    <div class="header-nav">
        <h4 class="no-display"><?php echo $this->__('Category Navigation:') ?></h4>
        <ul id="nav">
 
        <!-- WORKING ACTIVE STATE HOME BUTTON HACK -->
        <li class="home<?php if (Mage::helper('core/url')->getCurrentUrl() === Mage::helper('core/url')->getHomeUrl()):?> active<?php endif;?>"><a href="<?php echo $this->getUrl('')?>"><?php echo $this->__('Home') ?></a></li>
        <!-- WORKING ACTIVE STATE HOME BUTTON HACK -->
 
        <?php foreach ($this->getStoreCategories() as $_category):?>
            <?php echo $this->drawItem($_category) ?>
        <?php endforeach ?>
        </ul>
    </div>
    <?php echo $this->getChildHtml('topLeftLinks') ?>
</div>

 


For the Home link in the menu bar of the main template you can add some code to one of the template files.

Find the file called top.phtml in app/design/frontend/default/default/template/catalog/navigation/ and make the following change:

div class="header-nav-container">
    <div class="header-nav">
        <h4 class="no-display"><?php echo $this->__('Category Navigation:') ?></h4>
        <ul id="nav">
 
        <!-- HOME BUTTON HACK -->
        <?php $_anyActive = false; foreach ($this->getStoreCategories() as $_category) { $_anyActive = $_anyActive || $this->isCategoryActive($_category); } ?>
        <li class="<?php echo !$_anyActive ? 'active' : '' ?>"><a href="<?php echo $this->getUrl('')?>"><?php echo $this->__('Home') ?></a></li>
        <!-- HOME BUTTON HACK -->
 
        <?php foreach ($this->getStoreCategories(10) as $_category):?>
            <?php echo $this->drawItem($_category) ?>
        <?php endforeach ?>
        </ul>
    </div>
    <?php echo $this->getChildHtml('topLeftLinks') ?>
</div>

 

:x:x:x: Tried several on this page. The one directly above worked best. I modified it a little bit to contain a link title. Just paste

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

 

just before

<?php echo $_menu; ?>

 

if you’re using the default theme or a top.phtml that is based on it. :x:x:x:

 

The correct way to do this is to open the theme/layout/customer.xml file and then modify the section that shows customer links on all pages, to include a link home and also a link to other customer service pages that you have deemed necessary, e.g. ‘returns’ (if you get a lot of those enquiries...).

By way of example, this modified XML file includes a ‘Home’ link and ‘Deliveries’, ‘Returns’ and ‘Contact Us’:

<!--
Default layout, loads most of the pages
-->

    <default>

        <!-- Mage_Customer -->
        <reference name="top.links">
            <action method="addLink" translate="label title" module="customer"><label>Home</label><url></url><title>Home</title><prepare>true</prepare><urlParams/><position>5</position></action>
            <action method="addLink" translate="label title" module="customer"><label>My Account</label><url helper="customer/getAccountUrl"/><title>My Account</title><prepare/><urlParams/><position>94</position></action>
            <action method="addLink" translate="label title" module="customer"><label>Deliveries</label><url>deliveries</url><title>Deliveries</title><prepare>true</prepare><urlParams/><position>95</position></action>
            <action method="addLink" translate="label title" module="customer"><label>Returns</label><url>returns</url><title>Returns</title><prepare>true</prepare><urlParams/><position>96</position></action>
            <action method="addLink" translate="label title" module="customer"><label>Contact Us</label><url>contacts</url><title>Contact Us</title><prepare>true</prepare><urlParams/><position>97</position></action>
        </reference>
    </default>

 

This will allow you to add a Home link in the Top Links (My Account | My Wishlist | Etc.) before the My Account.

Find the file called links.phtml in app/design/frontend/default/default/template/page/template/ and make the following change:

<?php $_links = $this->getLinks(); ?>
<?php if(count($_links)>0): ?>
    <div>
        <ul<?php if($this->getName()): ?>):?> id="<?php echo $this->getName() ?>"<?php endif;?>>
        
        <!-- HOME BUTTON HACK -->
        <li class="first"><a href="<?php echo $this->getUrl('')?>"><?php echo $this->__('Home') ?></a></li>
        <!-- HOME BUTTON HACK -->
        
            <?php foreach($_links as $_link): ?>
                <li <?php if($_link->getIsLast()): ?> class="last"<?php endif; ?><?php echo $_link->getLiParams() ?>><?php echo $_link->getBeforeText() ?><a href="<?php echo $_link->getUrl() ?>" title="<?php echo $_link->getTitle() ?>" <?php echo $_link->getAParams() ?>><?php echo $_link->getLabel() ?></a><?php echo $_link->getAfterText() ?></li>
            <?php endforeach; ?>
        </ul>
   </div>
<?php endif; ?>

 

NOTE: The if statement in the foreach loop has changed since “Home” will always be first, it wasn’t needed. Also note that the <li> for the “Home” link automatically gets the class “first”.

This allows for space between Home | My Account

分享到:
评论

相关推荐

    Maximo增加导航栏链接

    在Maximo系统中,自定义导航栏链接是一个常见的需求,以增强用户体验并提供便捷的访问路径。本话题将深入探讨如何在Maximo中增加导航栏链接,主要关注以下几个方面: 1. **查找header节点**: 首先,你需要在...

    html+css侧边伸缩导航栏

    在这个例子中,`&lt;div class="sidenav"&gt;` 定义了导航栏容器,每个链接或子菜单都包裹在 `&lt;a&gt;` 或嵌套 `&lt;div&gt;` 元素中。为了实现伸缩效果,我们通常会添加一个按钮来控制导航栏的展开和关闭,例如: ```html 展开/...

    css+div 导航栏

    在创建导航栏时,`div`可以被用来定义一个容器,包含所有的导航链接和其他元素。例如: ```html &lt;a href="#home"&gt;首页 关于我们 服务 联系我们 ``` 接着,我们引入CSS来样式化这个导航栏。`style.css`文件中...

    HTML各种导航栏例子

    在网页设计中,导航栏是不可或缺的一部分,它帮助用户在网站的不同页面之间轻松跳转。本篇将深入探讨HTML中的各种导航栏实例,旨在帮助你理解如何利用HTML来构建功能丰富、样式多样的导航结构。 一、基础HTML导航栏...

    Html5导航栏

    在HTML5中,创建导航栏变得更为简洁高效,这使得网站的用户体验得到显著提升。"Html5导航栏"这个工具正是基于这一概念,为用户提供了简单易用的顶部导航栏解决方案。 在HTML5中,我们不再需要依赖JavaScript或Flash...

    导航栏工具

    在网页设计中,导航栏是页面布局的重要组成部分,它为用户提供了一个直观的界面来浏览网站的不同部分。"导航栏工具"通常包含一系列用于创建高效、美观且用户友好的导航栏的资源,例如HTML/CSS代码示例、JavaScript...

    导航栏顶部固定及滚动检测

    根据这个距离,我们可以调整导航栏的样式,比如添加一个背景色或改变字体颜色,以突出其在页面中的存在感。 三、菜单位置跳转 为了实现菜单位置跳转,通常会在每个菜单项上添加一个锚点链接,链接的目标是页面内部...

    高亮显示的的jquery导航栏.

    而`images`目录则可能包含了导航栏中使用的任何图片资源,比如图标或者背景图像。 总的来说,创建一个高亮显示的jQuery导航栏涉及了HTML结构、CSS样式和JavaScript交互。通过合理地组合这些元素,可以构建出具有...

    DIV+CSS导航栏

    2. **浮动(Float)**:`float`属性常用于创建多列布局,但在导航栏中通常配合清除浮动使用,以避免元素溢出问题。 3. **盒模型(Box Model)**:理解盒模型是设计导航栏的基础,包括`width`、`height`、`padding`...

    带图标文字的底部导航栏实现

    在Android应用开发中,底部导航栏(Bottom Navigation Bar)是一种常见的用户界面元素,它允许用户在应用的几个主要功能之间快速切换。这个标题"带图标文字的底部导航栏实现"聚焦于如何在Android中创建一个既包含...

    简单的html javascript导航栏

    在网页设计中,导航栏是页面布局的重要组成部分,它帮助用户快速访问网站的不同部分。"简单的html javascript导航栏"这个主题旨在教你如何使用HTML和JavaScript创建一个基础但实用的导航栏。下面我们将深入探讨相关...

    Android 底部导航栏 (底部 Tab) 最佳实践

    首先,在布局文件中添加`BottomNavigationView`: ```xml android:id="@+id/bottom_navigation" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom...

    固定导航浮动在顶部效果html代码

    在网页设计中,固定导航(Fixed Navigation)是一种常见的布局技巧,它使得导航栏在用户滚动页面时始终保持在屏幕顶部,从而提高用户体验,使用户能够快速访问各个页面链接。本项目提供的"固定导航浮动在顶部效果...

    bootstrap实现响应式自适应导航栏,并实现平滑滚动

    当用户点击导航栏中的链接时,页面会平滑地滚动到相应的位置,而不是立即跳转。这可以通过监听`click`事件并使用jQuery的`animate`方法来实现。在`&lt;body&gt;`标签的最后添加以下JavaScript代码: ```html $(document)...

    利用javacript编写的导航栏。

    通常,导航栏由`&lt;nav&gt;`元素包裹,包含一系列的链接,这些链接可以是`&lt;a&gt;`元素,放在`&lt;ul&gt;`无序列表或`&lt;ol&gt;`有序列表中。例如: ```html &lt;li&gt;&lt;a href="#home"&gt;首页&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#about"&gt;关于我们&lt;/a&gt;...

    实现的导航固定效果

    在网页设计中,导航栏是页面布局的重要组成部分,它通常包含网站的主要链接,方便用户快速访问各个页面。"实现的导航固定效果"是指当用户滚动页面时,导航栏始终保持在屏幕顶部,这样无论用户浏览到页面的哪个位置,...

    响应式导航栏css样式,附源码

    在CSS中,我们可以利用Flexbox或Grid布局来创建导航栏。这里我们将关注Flexbox,因为它提供了更简单的对齐和布局控制。在style.css文件中,你可能会找到类似以下的代码: ```css .navbar { display: flex; ...

    完全用CSS实现的中英文双语导航菜单

    在网页设计中,实现中英文双语导航菜单是一项常见的需求,尤其对于具有国际化的网站来说,提供多语言支持能大大提高用户体验。本篇将详细介绍如何使用纯CSS(Cascading Style Sheets)来创建这样的功能,使得用户在...

    各种网页 导航栏代码.docx

    在网页设计中,导航栏是一个至关重要的组成部分。它不仅提供了网站内部页面之间的链接,还为用户提供了一个直观的路径来浏览整个网站。一个好的导航栏设计能够极大地提升用户体验,同时也有助于提高网站的可访问性和...

    jQuery mobile滑动式的标题导航

    若需要禁用此功能,可在链接中添加`data-ajax="false"`: ```html 不使用Ajax加载 ``` ### 总结 jQuery Mobile 的滑动式标题导航为移动Web应用提供了丰富的交互体验。通过合理的HTML布局、CSS样式和JavaScript...

Global site tag (gtag.js) - Google Analytics