Joomla:菜单项指向同一页面中的不同位置 [英] Joomla: menu items point to different positions in the same page

查看:115
本文介绍了Joomla:菜单项指向同一页面中的不同位置的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想在侧边栏中创建一个菜单,每个项目都将通过在页面内上下滚动而指向当前页面的一部分.我可以使用任何模块吗?我正在使用3.0,并且可以访问所有文件

I want to create a menu in sidebar, each item will lead to a section in the current page by scrolling up and down within the page. Is there any module that I can use? I am using 3.0 and I have access to all the files

谢谢

推荐答案

Joomla定位菜单

案例1 :您可以通过FTP访问模板文件.

Case 1 : you have access to your template files via FTP.

在模板的根目录下编辑模板文件(index.php),并为要滚动到的每个部分添加ID. 例子:

Edit your template file (index.php) at root directory of your template and put ID's for each section you want to scroll to. example :

<div id="section1">
... YOUR CODE ...
</div>

情况2 :您无权通过FTP访问模板文件.

Case 2 : You don't have access to your template file via FTP.

转到模板管理器: 1.扩展程序/模板管理器. 2.单击屏幕右侧的模板名称(在模板下方而不是样式下方). 3.单击编辑主页模板". 4.在此处编辑index.php文件.

Go to the template manager : 1. extensions/template manager. 2. click on your template name on the right of your screen (under template not under style). 3. click on "Edit main page template". 4. edit your index.php file here.

找到您要引导的部分并为其指定ID.

Find the sections you want to lead to and give them an ID.

  1. 照常创建菜单(菜单/菜单管理器/添加新菜单)
  2. 创建菜单链接.

这就是窍门:

对于菜单项类型,选择: 系统链接/外部网址. 在链接"字段中输入

for the menu item type choose: system links/external url. In the "link" field write

#your ID

给出菜单标题.保存并发布您的菜单. 现在,当您单击菜单链接时,它应将页面滚动到右侧.如果滚动不够平滑,则可以使用jquery.

give a menu title. Save and publish your menu. Now when you click on your menu link it should scroll your page to the right section. If the scroll isn't smooth enough for you you can use jquery.

示例:

var $root = $('html, body');
$('**YOUR IDS HERE**').click(function() {
    var href = $.attr(this, 'href');
    $root.animate({
        scrollTop: $(href).offset().top
    }, 2000, function () {
        window.location.hash = href;
    });
    return false;
});

这篇关于Joomla:菜单项指向同一页面中的不同位置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆