注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

一个简单的可跨屏的jquery导航菜单插件FooNav

菜单 fishcity 2477浏览

jquery导航菜单插件FooNav

FooNav是一个免费的jQuery插件,创建一个简单的菜单,以帮助用户快捷方便浏览你的网站内容。FooNav可自定义菜单链接或自动爬行你的页面标题建立一个自动菜单。FooNav有多个主题以匹配您的网站的外观,当然你也可以自定义CSS创建自己的主题。

特点

有许多不同的方式来改变行为的菜单,只显示一次用户滚动过去某个像素值来调整是否平滑滚动锚。

之前或之后插入自定义内容菜单

滚动X像素后显示

显示/隐藏的速度变化

启用/禁用自动跟踪锚的菜单

启用/禁用锚的平滑滚动

启用/禁用自动解析当前URL的散列值(锚)

启用/禁用自动显示的菜单在页面加载

之间切换一个简单的幻灯片或褪色的动画菜单

简单的API为开发人员使用

添加自定义按钮

jquery实例:FooNav使用方法

引入核心文件

<link href="css/foonav.min.css" rel="stylesheet" />
<script src="docs/js/jquery.min.js"></script>
<script src="js/foonav.min.js"></script>

写入JS初始化,使用jquery

jQuery(function(){
    				FooNav.init({
    					classes: 'fon-shadow',
    					items: '#content',
    					position: 'fon-top-right',
    					theme: 'fon-dark'
    				}).ready(function(nav){
    					nav.buttons.append('<span class="demo-arrow"></span>');
    				});
    			});

不使用jquery

FooNav.init({
	classes: 'fon-full-height fon-border fon-rounded fon-shadow', // Any additional classes to add to FooNav
	items: '#content', // The selector where FooNav looks for the header elements
	position: 'fon-top-right', // The position in the viewport
	theme: 'fon-light' // The theme to use
});

自定义菜单项

FooNav.init({
	items: [{
		href: 'http://fooplugins.github.io/foonav',
		text: 'Home'
	},{
		href: '#playground',
		text: 'Playground',
		children: [{
			href: 'http://fooplugins.github.io/foonav/docs/playground.html#options',
			text: 'Options'
		}]
	},{
		href: 'https://github.com/fooplugins/foonav',
		text: 'GitHub Repo'
	}]
});

选项

位置:position

Top Left

Top Right

Left Center

Right Center

Bottom Left

Bottom Right


主题:theme

Default

Blue

Dark

Green

Light


富UI 

Amethyst

Asbestos

Asphalt

Blue

Emerald

Orange

Pumpkin

Red

Silver

Turquoise

转载请注明:jQ酷 » 一个简单的可跨屏的jquery导航菜单插件FooNav

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。