[发明专利]网页顶部导航菜单的显示方法及系统

说明书

本发明涉及计算机技术领域，本发明旨在解决现有顶部导航菜单的显示方式令用户操作繁琐的问题，提出一种网页顶部导航菜单的显示方法，包括以下步骤：对导航菜单的每个菜单项进行监听，所述导航菜单的宽度大于显示界面的宽度；当监听到某一菜单项被选中后，根据该菜单项对应的序号参数水平滚动导航菜单，使该菜单项在显示界面左右居中，并将所述序号参数传入跳转菜单；跳转菜单根据传入的序号参数跳转至该菜单项对应的页面。用户无需手动滑动导航菜单，显示界面即可自动显示选中菜单项左右相邻隐藏的菜单项，减少了用户操作，提升了用户体验，适用于智能手机的网页导航菜单显示。

技术领域

本发明涉及计算机技术领域，具体来说涉及一种导航菜单的显示方法及系统。

背景技术

导航菜单是指位于页面顶部或者侧边区域的，在页眉横幅图片上边或下边的一排水平菜单项，它起着链接站点或者软件内的各个页面的作用。网站使用导航菜单是为了让访问者更清晰明朗的找到所需要的资源区域，寻找资源。

在手机网站开发当中，一般将网页的导航菜单设置于显示界面的顶部，随着网站迭代更新，增加的菜单项越来越多，在手机显示页面的顶部网站导航菜单中无法显示所有的菜单项。为了便于用户找到所需资源对应的菜单项，通常隐藏导航菜单中的部分菜单项，并将顶部导航菜单设置成可滑动的，即使用户选中与隐藏的菜单项相邻的在显示界面显示的菜单项，用户仍然需要手动滑动顶部导航菜单，来使手机的显示界面显示隐藏的菜单项，这种方式操作繁琐。

发明内容

本发明旨在解决现有顶部导航菜单的显示方式令用户操作繁琐的问题，提出一种网页顶部导航菜单的显示方法及系统。

本发明解决上述技术问题所采用的技术方案是：网页顶部导航菜单的显示方法，包括以下步骤：

步骤1.对导航菜单的每个菜单项进行监听，所述导航菜单的宽度大于显示界面的宽度；

步骤2.当监听到某一菜单项被选中后，根据该菜单项对应的序号参数水平滚动导航菜单，使该菜单项在显示界面左右居中，并将所述序号参数传入跳转菜单；

步骤3.跳转菜单根据传入的序号参数跳转至该菜单项对应的页面。

作为进一步优化，所述步骤2还包括：当监听到某一菜单项被选中后，设置该菜单项为高亮。

作为进一步优化，步骤2中，所述根据该菜单项对应的序号参数水平滚动导航菜单包括：

获取显示界面中心位置的第一横坐标，根据该菜单项对应的序号参数获取该菜单项中心位置的第二横坐标，根据第一横坐标与第二横坐标的差值水平滚动导航菜单，使第二横坐标与第一横坐标重合。

作为进一步优化，所述根据第一横坐标与第二横坐标的差值水平滚动导航菜单具体为：根据第一横坐标和第二横坐标的差值获得滚动坐标的横坐标，滚动坐标的纵坐标为0，将所述滚动坐标传入调用的JS的基础滚动API进行导航菜单的自动水平滚动。

作为进一步优化，所述步骤2还包括：获取导航菜单的最大横坐标和最小横坐标，若导航菜单的最大横坐标位于显示界面内，则不进行导航菜单的向左滚动，若导航菜单的最小横坐标位于显示界面内，则不进行导航菜单的向右滚动。

作为进一步优化，，还包括：设置导航菜单的滚动画面播放时间，根据所述滚动画面播放时间水平滚动导航菜单。

另一个方面，本发明还提出一种网页顶部导航菜单的显示系统，包括：

监听单元，用于对导航菜单的每个菜单项进行监听，所述导航菜单的宽度大于显示界面的宽度；

滚动单元，用于当监听到某一菜单项被选中后，根据该菜单项对应的序号参数水平滚动导航菜单，使该菜单项在显示界面左右居中，并将所述序号参数传入跳转菜单；

跳转菜单，用于根据传入的序号参数跳转至该菜单项对应的页面。