jquery - 更改页面滚动上的事件菜单项

标签 jquery css wordpress menu

我在单页 Wordpress 站点中使用此脚本的略微修改版本: Change Active Menu Item on Page Scroll?

我只更改了菜单 UL id、topMenuHeight 和滚动持续时间。出于某种原因,前两项工作正常 - 从 about 滚动到 services 工作,但在那之后,什么都没有。我正在向控制台输出“id”var,它总是显示服务。不太清楚发生了什么。

http://inspirawebdesign.us/

最佳答案

就我个人而言,对于必须更改菜单顺序背后的原因,我没有一个直接的答案,但如果您稍微更改 CSS 的设计方式,它可以解决您的问题。

如前所述,您需要确保“li”链接全部按常规顺序列出。

从这一点开始,如果您修复了一些 CSS,您可以对其进行操作以使其看起来相同。

如果您将第 27-28 行更改为以下内容,则在您的 CSS 中:

#menu-main-menu {padding:30px 50px 0 0; float: right}
#menu-main-menu li {float: left; list-style: none outside none; margin-left: 30px; text-transform: uppercase;}

基本上,不是将 #menu-main-menu li 设置为向右浮动,而是将菜单更改为向右浮动,将菜单更改为向左浮动,以将其设置为正确的顺序。

在我添加的#menu-main-menu 里面

float:right;

在#menu-main-menu li 内部我将 float:right 更改为

float:left;

如果您想在此处查看代码,请访问:http://jsfiddle.net/GpjMc/1/


您也可以让它显示为内联而不是 float:left。无论哪种格式最适合您。

#menu-main-menu {padding:30px 50px 0 0; float: right}
#menu-main-menu li {display: inline; list-style: none outside none; margin-left: 30px; text-transform: uppercase;}

关于jquery - 更改页面滚动上的事件菜单项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15166882/

相关文章:

php - 如何在 Wordpress 中使用 register_nav_menus?

css - wordpress 博客上的简单 float 问题

jquery - 视觉 Composer 挑战

javascript - 位置固定不适用于粘性菜单

html - 如何减小 Bootstrap 菜单上的下拉菜单大小?

javascript - 使用小屏幕时强制在按钮文本内换行

css - HTML/CSS 选择选项悬停 (React)

php - 如何最小化jQuery游戏中的mysql连接和ajax调用(ping函数)?

jquery - 使用 Jquery 在 jsp 页面中选中复选框

jquery - 使用 Select2 4.0 和 Bootstrap 3+ 对 jQuery 验证进行样式化