- 浏览: 81790 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
shuishui8310:
开公司了?
Magento学习课程继续 -
yanggaojiao:
对不起,很久没上这里了,在CMS->Home->D ...
Magento在首页自定制Block的方法 -
beautiful_good:
hi,你好我用的是magento 1.4.2.0版本的,请问如 ...
Magento在首页自定制Block的方法 -
as3291363:
太慢了....
Magento 1.4.1.0 的CMS太酷了 -
richardlovejob:
这个分享是在太及时了,谢谢。
Magento Events分析和使用实例与技巧
本节不打算翻译,留给自己需要的时候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
发表评论
-
Magento Admin Form表单元素大全
2012-09-30 12:08 1037开发Magento后台的时候经常用到表单(Varien_Dat ... -
Magento A-Z和sitemap插件
2012-09-30 11:53 3745Iifire历经四个月多开发 ... -
Magento SQL绑定查询条件
2012-04-17 15:17 2641Magento从数据库中取数据时大多用的Collection, ... -
Magento站内信插件
2012-02-28 10:04 1482Magento Message Box即站内信组件,主要用于管 ... -
Magento內链外链插件
2012-02-21 10:26 1481给您的Magento网站添加关键词的链接,更多的内链和外链,更 ... -
Magento高级产品订阅
2012-02-21 08:54 2280基本功能介绍 产品订 ... -
Magento产品降价通知和到货通知插件
2012-02-09 16:04 01.客户可以在Magento前台页面订阅某个产品的降价通知(缺 ... -
Magento学习课程继续
2011-03-20 16:05 1492由于前一大段时间都比较忙,忽略了大家啦,好久没有更新内容了。打 ... -
Magento在首页自定制Block的方法
2010-09-19 14:27 2835Magento中想在首页显示一些自定制的BLock有很多中方法 ... -
magento获取相应的查询语句
2010-09-19 14:12 1084虽然Magento对数据库层封装得比较深,但是我们可以很轻松的 ... -
Magento 使用小技巧体现大智慧(Last things first)
2010-06-15 23:38 1290在我们的购物车Magento上线之前,有些小细节很容易被忽略。 ... -
从数据库设计看Magento系列教程(1)
2010-06-15 19:11 0TODO..... -
Magento Events分析和使用实例与技巧
2010-06-14 20:15 3403当你需要扩展Magento的核心的功能时有两个选择 重写( ... -
Magento CMS 应用实例
2010-06-14 19:03 4806下面是一些CMS的应用实例: 本文已移到 http:// ... -
Magento 1.4.1.0 的CMS太酷了
2010-06-14 02:49 1717哇,Magento 1.4.1.0版本已经出来了,今天安装使用 ... -
Magento SEO 使用技巧
2010-06-13 20:50 1121这些内容大致分为: HTML Head URL rewr ... -
Magento web services API 扩展
2010-06-13 11:52 3128<?xml version="1.0&qu ... -
Magento image 操作
2010-06-13 10:48 1321由于lib/Varien/Image.php 的 Varie ... -
Magento中直接使用SQL查询语句
2010-06-13 10:29 1803本文已移到:http://www.iifire.com ... -
Create Payment Method Module
2010-06-13 08:23 1186Javaeye的一些作者也有相 ...
相关推荐
在Maximo系统中,自定义导航栏链接是一个常见的需求,以增强用户体验并提供便捷的访问路径。本话题将深入探讨如何在Maximo中增加导航栏链接,主要关注以下几个方面: 1. **查找header节点**: 首先,你需要在...
在这个例子中,`<div class="sidenav">` 定义了导航栏容器,每个链接或子菜单都包裹在 `<a>` 或嵌套 `<div>` 元素中。为了实现伸缩效果,我们通常会添加一个按钮来控制导航栏的展开和关闭,例如: ```html 展开/...
在创建导航栏时,`div`可以被用来定义一个容器,包含所有的导航链接和其他元素。例如: ```html <a href="#home">首页 关于我们 服务 联系我们 ``` 接着,我们引入CSS来样式化这个导航栏。`style.css`文件中...
在网页设计中,导航栏是不可或缺的一部分,它帮助用户在网站的不同页面之间轻松跳转。本篇将深入探讨HTML中的各种导航栏实例,旨在帮助你理解如何利用HTML来构建功能丰富、样式多样的导航结构。 一、基础HTML导航栏...
在HTML5中,创建导航栏变得更为简洁高效,这使得网站的用户体验得到显著提升。"Html5导航栏"这个工具正是基于这一概念,为用户提供了简单易用的顶部导航栏解决方案。 在HTML5中,我们不再需要依赖JavaScript或Flash...
在网页设计中,导航栏是页面布局的重要组成部分,它为用户提供了一个直观的界面来浏览网站的不同部分。"导航栏工具"通常包含一系列用于创建高效、美观且用户友好的导航栏的资源,例如HTML/CSS代码示例、JavaScript...
根据这个距离,我们可以调整导航栏的样式,比如添加一个背景色或改变字体颜色,以突出其在页面中的存在感。 三、菜单位置跳转 为了实现菜单位置跳转,通常会在每个菜单项上添加一个锚点链接,链接的目标是页面内部...
而`images`目录则可能包含了导航栏中使用的任何图片资源,比如图标或者背景图像。 总的来说,创建一个高亮显示的jQuery导航栏涉及了HTML结构、CSS样式和JavaScript交互。通过合理地组合这些元素,可以构建出具有...
2. **浮动(Float)**:`float`属性常用于创建多列布局,但在导航栏中通常配合清除浮动使用,以避免元素溢出问题。 3. **盒模型(Box Model)**:理解盒模型是设计导航栏的基础,包括`width`、`height`、`padding`...
在Android应用开发中,底部导航栏(Bottom Navigation Bar)是一种常见的用户界面元素,它允许用户在应用的几个主要功能之间快速切换。这个标题"带图标文字的底部导航栏实现"聚焦于如何在Android中创建一个既包含...
在网页设计中,导航栏是页面布局的重要组成部分,它帮助用户快速访问网站的不同部分。"简单的html javascript导航栏"这个主题旨在教你如何使用HTML和JavaScript创建一个基础但实用的导航栏。下面我们将深入探讨相关...
首先,在布局文件中添加`BottomNavigationView`: ```xml android:id="@+id/bottom_navigation" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom...
在网页设计中,固定导航(Fixed Navigation)是一种常见的布局技巧,它使得导航栏在用户滚动页面时始终保持在屏幕顶部,从而提高用户体验,使用户能够快速访问各个页面链接。本项目提供的"固定导航浮动在顶部效果...
当用户点击导航栏中的链接时,页面会平滑地滚动到相应的位置,而不是立即跳转。这可以通过监听`click`事件并使用jQuery的`animate`方法来实现。在`<body>`标签的最后添加以下JavaScript代码: ```html $(document)...
通常,导航栏由`<nav>`元素包裹,包含一系列的链接,这些链接可以是`<a>`元素,放在`<ul>`无序列表或`<ol>`有序列表中。例如: ```html <li><a href="#home">首页</a></li> <li><a href="#about">关于我们</a>...
在网页设计中,导航栏是页面布局的重要组成部分,它通常包含网站的主要链接,方便用户快速访问各个页面。"实现的导航固定效果"是指当用户滚动页面时,导航栏始终保持在屏幕顶部,这样无论用户浏览到页面的哪个位置,...
在CSS中,我们可以利用Flexbox或Grid布局来创建导航栏。这里我们将关注Flexbox,因为它提供了更简单的对齐和布局控制。在style.css文件中,你可能会找到类似以下的代码: ```css .navbar { display: flex; ...
在网页设计中,实现中英文双语导航菜单是一项常见的需求,尤其对于具有国际化的网站来说,提供多语言支持能大大提高用户体验。本篇将详细介绍如何使用纯CSS(Cascading Style Sheets)来创建这样的功能,使得用户在...
在网页设计中,导航栏是一个至关重要的组成部分。它不仅提供了网站内部页面之间的链接,还为用户提供了一个直观的路径来浏览整个网站。一个好的导航栏设计能够极大地提升用户体验,同时也有助于提高网站的可访问性和...
若需要禁用此功能,可在链接中添加`data-ajax="false"`: ```html 不使用Ajax加载 ``` ### 总结 jQuery Mobile 的滑动式标题导航为移动Web应用提供了丰富的交互体验。通过合理的HTML布局、CSS样式和JavaScript...