Jquery控件superfish

<!DOCTYPE html>

<html>

<head>

<title>index.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="css/superfish.css" />

<link rel="stylesheet" href="css/superfish-navbar.css" />

<link rel="stylesheet" href="css/superfish-vertical.css" />

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

<script type="text/javascript" src="js/superfish.js"></script>

<script src="js/hoverIntent.js"></script>

<script type="text/javascript">

$(function() {

$("#example").superfish({

delay:       0,

animation:   {opacity:‘show‘,height:‘show‘},

speed:       ‘fast‘,

autoArrows:  true,

dropShadows: true

});

});

</script>

</head>

<body>

<ul class="sf-menu" id="example">

<li class="current">

<a href="#">menu item 1</a>

<ul>

<li>

<a href="#">menu item</a>

</li>

<li class="current">

<a href="#">long menu item sets sub width</a>

<ul>

<li class="current">

<a href="#">menu item</a>

<ul>

<li class="current"><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

</ul>

</li>

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

</ul>

</li>

<li>

<a href="#">menu item</a>

<ul>

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

</ul>

</li>

<li>

<a href="#">menu item</a>

<ul>

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

</ul>

</li>

</ul>

</li>

<li>

<a href="#">menu item 2</a>

</li>

<li>

<a href="#">menu item 3</a>

<ul>

<li>

<a href="#">menu item</a>

<ul>

<li><a href="#">short</a></li>

<li><a href="#">short</a></li>

<li><a href="#">short</a></li>

<li><a href="#">short</a></li>

<li><a href="#">short</a></li>

</ul>

</li>

<li>

<a href="#">menu item</a>

<ul>

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

</ul>

</li>

<li>

<a href="#">menu item</a>

<ul>

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

</ul>

</li>

<li>

<a href="#">menu item</a>

<ul>

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

</ul>

</li>

<li>

<a href="#">menu item</a>

<ul>

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>

</ul>

</li>

</ul>

</li>

<li>

<a href="#">menu item 4</a>

</li>

</ul>

</body>

</html>

Jquery控件superfish

时间： 2024-11-09 10:18:52

Jquery控件superfish的相关文章

jQuery控件简易日历表格

jQuery控件简易日历表格代码,jquery表格,jquery插件 ,jquery,日期,时间,日历表格,表格代码,jQuery控件简易日历表格代码是一款较为简单的显示日历的代码,兼容firefox,chrome,ie. 下载地址:http://www.huiyi8.com/sc/6362.html(转载请注明此处)

jQuery控件有所感悟

两种写法对比: 第一种: ;(function($){ $.fn.myplugin = function(op,params){ if (typeof op == 'string'){ return $.fn.myplugin.methods[op](this,params); } //默认参数 var settings = { "text" : "hehe", "color" : "red" } settings = $.e

jquery控件的学习

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

Tag It 一款 Jquery控件，当你在文本框中输入逗号时，自动帮你分隔开相关内容

Demo地址:http://webspirited.com/tagit/ 使用方法: 除了JQuery脚本外,下面的脚本也是必须的,这些脚本你都可以去GitHub下载:https://github.com/hailwood/jQuery-Tagit <link href="~/Content/jquery.tagit.css" rel="stylesheet" /><link href="~/Content/tagit.ui-zendes

jquery控件基本要点备份

(1)CDN Google CDN:<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> Microsoft CDN:<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script> 使用谷歌或微软的 jQue

jquery控件-实现自定义样式的弹出窗口和确认框（转）

[javascript] view plain copy (function () { $.MsgBox = { Alert: function (title, msg) { GenerateHtml("alert", title, msg); btnOk();  //alert只是弹出消息,因此没必要用到回调函数callback btnNo(); }, Confirm: function (title, msg, callback) { GenerateHtml("conf

Jquery控件jrumble

<!DOCTYPE HTML> <html> <head> <title>demo.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="css/style.css" /> <

精确到秒的JQuery日期控件

项目中需要用到精确到秒的日期控件,到网上搜了一下,发现有一个JQuery控件可以实现该功能---TimerPicker.但是官网上没有提供该控件的完整Demo,而且没有提供汉化包,所以自己汉化了一下,以供需要的朋友参考. 效果图如下: 首先在页面中引用一下库: <link type="text/css" href="css/jquery-ui-1.8.17.custom.css" rel="stylesheet" /> <lin

基于 jQuery 的专业 ASP.NET WebForms/MVC 控件库！

目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策略(MVC5+EF6) [第四篇]ASP.NET MVC快速入门之完整示例(MVC5+EF6) [番外篇]ASP.NET MVC快速入门之免费jQuery控件库(MVC5+EF6) 请关注三石的博客:http://cnblogs.com/sanshi 新建项目 打开VS2015,找到菜单项[文件->