jQuery+Superfish制作下拉菜单

superfish制作下拉菜单真的很方便而好很好用,而且还可以通过Superfish提供的参数来控制下拉菜单的不同效果,而且他没有层级限制,换句话说可以通过Superfish来写你想要的层级菜单。

官方帮助文档:

http://users.tpg.com.au/j_birch/plugins/superfish/#getting-started

  1. Begin with a working pure CSS dropdown menu based on nested unordered lists. For each li:hover selector in your CSS, add an equivalent li.sfHover selector. Use display:none rather than left:-9999em to hide submenus. To make this step easy, there are cross-browser CSS files for a variety of menu types available in the download section of this site.

    <link href="superfish.css" rel="stylesheet" media="screen">
  2. Link to the superfish.js file (after including jQuery) using a script tag in the head of your document.
    <script src="jQuery.js"></script>
    <script src="superfish.js"></script>
  3. Call superfish() on the containing ul element.
    <script>
    
    	jQuery(document).ready(function() {
    		jQuery(‘ul.sf-menu‘).superfish();
    	});
    
    </script>

    There are many options available to customise your menu. You can find out about them in the Options tab of this site.

这是国内整理文件。

http://blog.chinaunix.net/uid-26615074-id-3078698.html

时间: 2024-12-04 11:59:06

jQuery+Superfish制作下拉菜单的相关文章

利用CSS制作下拉菜单

利用CSS制作下拉菜单 1.定义一个div,给div一个id或class,给div一个样式. eg:<div id="menu"></div> /*css #menu{ width:1024px; //给div定义一个宽度 height:40px; //给div定义一个高度 margin:0 auto; //让div居中显示 background-color:#eee; //给div一个背景颜色 } */ 2.制作下拉菜单所需的无序列表(ul). eg:<

9.2 制作下拉菜单(1)

一.菜单的HTML结构 下面就来定义菜单的HTML结梅.思路是把整个菜单分为4组,每一组在平常状态时,只显示一级菜单项,当鼠标指针经过时,显示相应的子菜单.首先用ul和li定义出外层结构,然后在每个li项目中,使用dI定义一个菜单项,一级菜单文字定义为dt.子菜单的文字定义为dd.代码如下. 折叠展开XML/HTML 代码复制内容到剪贴板 <body> <ul id="menu"> <li> <dl> <dt><a hr

制作下拉菜单(PopupList)

怎样判断是否应当使用下拉菜单 下拉菜单,就是将一系列的选项隐藏,通过单击某一个控件将会弹出一个包含这些选项的列表,在其中选择想要的选项.这样做不但可以节省屏幕空间,也可以让用户在进行选择时更加方便快捷. 下拉菜单本质上还是一个单选框,与Toggle的功能有一些类似,对于下拉菜单玩家必须选择一个选项(有一个默认的初始选项),在同一时间也只能选择一个选项(单选性质).在游戏开发过程中,如果碰到了以下特点的需求,就可以考虑用下拉菜单了. (1)有一系列选项需要玩家做出选择,这些选项是有限多的. (2)

JQuery设置获取下拉菜单选项的值 多实例

分享下JQuery如何设置获取下拉菜单某个选项的值,多种方法,值得收藏. JQuery获取和设置Select选项 获取Select :获取select 选中的 text :$(“#ddlRegType”).find(“option:selected”).text();获取select选中的 value:$(“#ddlRegType “).val();获取select选中的索引:$(“#ddlRegType “).get(0).selectedIndex;设置select:设置select 选中的

如何为EXCEL单元格制作下拉菜单

如何为EXCEL中的某列制作下拉菜单 下面用两种方法介绍下拉菜单的实现: 第一种方法比较简单,如果下拉菜单更改的不频繁,可以采用:第二种方法更适合菜单更改频繁的情况. 注意:如果点击单元格时右侧没有出现下拉的按钮,可能是格式丢失,可以通过复制上面单元格的方法来修复. 如何制作下拉菜单(以下内容以EXCEL2007为准,版本不同可能造成操作步骤不同) A. 先做好一个表格,如下图: B. 选择需要制作下拉菜单的列中的第一行(如性别列中的第一行,非标题行),点击菜单中[数据]-[数据有效性]-[数据

9.3 制作下拉菜单(2)

一.对子菜单项(dd)进行设置 设置子菜单项的样式分为3步. ① 首先对每个子菜单项,也就是dd元素进行常规设置,包括文字颜色.背景色等,代码如下. 折叠展开CSS 代码复制内容到剪贴板 /* 设置菜单项的dd */ #menu li dd { margin:0; padding:0; color: #fff; background: #47a; } ② 为了使最下面的dd的下端和dI的下侧padding之间有一条暗红色分割线,设置1像素的下边框,代码如下.它在视觉上与上面的分割线相呼应,同时也

jQuery宽屏下拉菜单导航 子菜单可自定义

jQuery是一款流行已久的Javascript框架,确实很好用.今天我们要介绍一款用jQuery实现的下拉菜单导航插件,下拉菜单的外观是仿腾讯云官网菜单的.鼠标滑过主菜单时,即可展开二级下拉子菜单.值得注意的是,这款jQuery下拉菜单的子菜单内容可以自定义,因此也非常灵活. 访问地址:http://www.xuecss3.com/jquery-10-757-1.html 另外分享一个FQ软件:下载地址  http://www.xuecss3.com/qianduan-9-374-1.html

分别用CSS\JavaScript\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-

基于jquery网站左侧下拉菜单

网站左侧下拉菜单jQuery代码.这是一款蓝色风格的适合做后台下拉菜单代码.效果图如下: 在线预览   源码下载 实现的代码: <div class="container"> <div class="leftsidebar_box"> <div class="line"></div> <dl class="system_log"> <dt onClick=&qu