js 菜单

thinktothings

浏览: 784694 次
性别:
来自: 北京

最近访客更多访客>>

rocex

Janne

hekui1016

choulisa

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

官网:http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm#

Author: Dynamic Drive | July 17th, 11'

Updated: Dec 17th, 10" (v1.5): Updated menu shadow to use CSS3 box shadows when the browser is FF3.5+, IE9+, Opera9.5+, or Safari3+/Chrome. Only .js file changed.

Description: Smooth Navigation Menu is a multi level, CSS list based menu powered using jQuery that makes website navigation a smooth affair. And that's a good thing given the important role of this element in any site. The menu's contents can either be from direct markup on the page, or an external file and fetched via Ajax instead. And thanks to jQuery, a configurable, sleek "slide plus fade in" transition is applied during the unveiling of the sub menus. The menu supports both the horizontal and vertical (sidebar) orientation.

Some noteworthy features- You can specify a delay before the sub menus appear and disappear when the mouse rolls over and out of them, respectively. The sub menus reposition themselves if too close to the window's right edges. And last but not least, the depth of the accompanying shadow can be customized, or removed altogether. Smooth we say!

Directions

Step 1: Insert the following code into the <head> section of your page:

Select All

<!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" lang="en" xml:lang="en">
<link rel="stylesheet" type="text/css" href="ddsmoothmenu.css" />
<link rel="stylesheet" type="text/css" href="ddsmoothmenu-v.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="ddsmoothmenu.js">
/***********************************************
* Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<script type="text/javascript">
ddsmoothmenu.init({
	mainmenuid: "smoothmenu1", //menu DIV id
	orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
	classname: 'ddsmoothmenu', //class added to menu's outer DIV
	//customtheme: ["#1c5a80", "#18374a"],
	contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
ddsmoothmenu.init({
	mainmenuid: "smoothmenu2", //Menu DIV id
	orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
	classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
	//customtheme: ["#804000", "#482400"],
	contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
</script>

The above code references a few external files, which by default you should upload to the same directory as the page itself (right click each file and select "Save As"):

Step 2: Add the below menu code to the BODY section of your page. It contains the markup for 1 horizontal menu and 1 vertical menu:

Select All
<h2>Example 1</h2> <div id="smoothmenu1" class="ddsmoothmenu"> <ul> <li><a href="http://www.dynamicdrive.com">Item 1</a></li> <li><a href="#">Folder 0</a> <ul> <li><a href="#">Sub Item 1.1</a></li> <li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> <li><a href="#">Sub Item 1.4</a></li> <li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> <li><a href="#">Sub Item 1.4</a></li> </ul> </li> <li><a href="#">Folder 1</a> <ul> <li><a href="#">Sub Item 1.1</a></li> <li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> <li><a href="#">Sub Item 1.4</a></li> <li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> <li><a href="#">Sub Item 1.4</a></li> </ul> </li> <li><a href="#">Item 3</a></li> <li><a href="#">Folder 2</a> <ul> <li><a href="#">Sub Item 2.1</a></li> <li><a href="#">Folder 2.1</a> <ul> <li><a href="#">Sub Item 2.1.1</a></li> <li><a href="#">Sub Item 2.1.2</a></li> <li><a href="#">Folder 3.1.1</a> <ul> <li><a href="#">Sub Item 3.1.1.1</a></li> <li><a href="#">Sub Item 3.1.1.2</a></li> <li><a href="#">Sub Item 3.1.1.3</a></li> <li><a href="#">Sub Item 3.1.1.4</a></li> <li><a href="#">Sub Item 3.1.1.5</a></li> </ul> </li> <li><a href="#">Sub Item 2.1.4</a></li> </ul> </li> </ul> </li> <li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li> </ul> <br style="clear: left" /> </div> <h2 style="margin-top:200px">Example 2</h2> <div id="smoothmenu2" class="ddsmoothmenu-v"> <ul> <li><a href="http://www.dynamicdrive.com">Item 1</a></li> <li><a href="#">Folder 0</a> <ul> <li><a href="#">Sub Item 1.1</a></li> <li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> <li><a href="#">Sub Item 1.4</a></li> <li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> <li><a href="#">Sub Item 1.4</a></li> </ul> </li> <li><a href="#">Folder 1</a> <ul> <li><a href="#">Sub Item 1.1</a></li> <li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> <li><a href="#">Sub Item 1.4</a></li> <li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> <li><a href="#">Sub Item 1.4</a></li> </ul> </li> <li><a href="#">Item 3</a></li> <li><a href="#">Folder 2</a> <ul> <li><a href="#">Sub Item 2.1</a></li> <li><a href="#">Folder 2.1</a> <ul> <li><a href="#">Sub Item 2.1.1</a></li> <li><a href="#">Sub Item 2.1.2</a></li> <li><a href="#">Folder 3.1.1</a> <ul> <li><a href="#">Sub Item 3.1.1.1</a></li> <li><a href="#">Sub Item 3.1.1.2</a></li> <li><a href="#">Sub Item 3.1.1.3</a></li> <li><a href="#">Sub Item 3.1.1.4</a></li> <li><a href="#">Sub Item 3.1.1.5</a></li> </ul> </li> <li><a href="#">Sub Item 2.1.4</a></li> </ul> </li> </ul> </li> <li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li> </ul> <br style="clear: left" /> </div>

Each menu should consist of an outer DIV and a valid UL list contained inside it.

If you wish the menu content to reside in an external file on your server and dynamically added to your page(s), read the section "Putting the Menu contents in an external file" below.

Well, that's it for installation.

`ddsmoothmenu.init()` and Menu content structure

Setting up a Smooth Navigational Menu on your page involves calling ddsmoothmenu.init() inside the HEAD section of your page:

ddsmoothmenu.init({
mainmenuid: "smoothmenu1", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
//customtheme: ["#1c5a80", "#18374a"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

where "smoothmenu1" corresponds to the menu content's outermost DIV on the page. Here's a description of each option:

Attribute	Description
`mainmenuid`	The ID of the menu's outermost DIV. If the menu contents are fetched via Ajax, then this ID should correspond to the outermost DIV that's within the external file.
`orientation`	Sets the orientation of the menu. Enter the value "h" or "v" for a horizontal or vertical menu, respectively. Note that the "`classname`" setting below must also be set according to the "`orientation`" setting.
`classname`	Sets the CSS class name that gets applied to the outermost DIV of the menu, effectively styling it. Based on the "`orientation`" setting above, you want to enter the CSS class that correctly styles the menu By default, "`ddsmoothmenu`" creates a horizontal menu bar, while "`ddsmoothmenu-v`" creates a vertical one. Take a look inside ddsmoothmenu.css and ddsmoothmenu-v.css.
`customtheme`	In general, customizing the menu's style and background colors is done by editing the two CSS files of the script. However, you can also modify the menu's background and hover background color- on a per page or per menu basis easily, by taking advantage of the "`customtheme`" setting. To do so, uncomment (remove the `//` prefix) from this setting and declare two CSS background values, one for the default state, the other, when the mouse rolls over the menu items: customtheme: ["#1c5a80", "#18374a"], //override default menu CSS background values? Uncomment: ["normal_background", "hover_background"] This property is useful for quickly testing out color combinations without having to edit "ddsmoothmenu.css" each time.
`contentsource`	Enter "`markup`" if your menu contents are directly inline on the page, or `["container_id", "path_to_menu_file"]` For more info on the later option, see "Putting the Menu contents in an external file and fetched using Ajax" below.

Menu content structure

As far as the HTML markup of each menu, it should consist of an outer DIV plus a valid UL list inside it, such as:

<div id="smoothmenu1">
<ul>
<li><a href="http://www.dynamicdrive.com">Item 1</a></li>
<li><a href="#">Folder 0</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
</ul>
</li>
</ul>
</div>

Make sure the UL list is valid You can use W3C's validation service to quickly check your HTML list for incorrectly nested or unclosed tags.

Putting the Menu contents in an external file and fetched using Ajax

Instead of the menu's content being direct markup on the page, you can instead put that HTML in an external file on your server and have the menu dynamically added to the BODY of your page using Ajax. The above menu is embedded this way. The process for this is simple enough:

Move the entire menu's HTML markup- including the outermost DIV container- to an external file on your server. For example: "smoothmenu.htm"
On your page(s) themselves where you want the menu to be dynamically added, add an empty DIV container with a unique ID of its own in the BODY section of the page:

<div id="smoothcontainer">
<noscript>
<a href="link to site map for search engines and user with JS disabled">Site map</a>
</noscript>
</div>

This container's contents will be replaced by the menu contents defined in your external file when ddsmoothmenu.init() is run. You can include any HTML within this empty container that you may want shown to search engines or users with JavaScript disabled, as it will be replaced when the script is run.
Finally, you need to edit ddsmoothmenu.init()'s "contentsource" setting to the appropriate setting :

ddsmoothmenu.init({
mainmenuid: "smoothmenu-ajax",
//customtheme: ["#1c5a80", "#18374a"], //override default menu CSS background values? Uncomment: ["normal_background", "hover_background"]
contentsource: ["smoothcontainer", "smoothmenu.htm"] //"markup" or ["container_id", "path_to_menu_file"]
})

The path to the external file, in this case "smoothmenu.htm", should be a relative path to it based on the current page's position within your site.

Styling the menu item the user is currently at

When the user rolls over a menu item (LI element) that contains a sub menu (UL element), the script dynamically adds a CSS class of ".selected" to the former's inner A element. This allows you to style the current active menu item differently from the rest. Inside "ddsmoothmenu.css", the relevant CSS you'll want to tweak is:

.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: black;
color: white;
}

Global menu settings

Finally inside ddsmoothmenu.js there are a few global settings you can modify, such as setting the paths to the arrow images, speed of animation, and whether to disable shadows:

arrowimages: {down:['downarrowclass', 'http://www.cssdrive.com/lib/down.gif', 23], right:['rightarrowclass', 'right.gif']},
transition: {overtime:300, outtime:300}, //duration of slide in/ out animation, in milliseconds
shadow: {enable:true, offsetx:5, offsety:5}, //enable shadow?
showhidedelay: {showdelay: 100, hidedelay: 200}, //set delay in milliseconds before sub menus appear and disappear, respectively

The last line above lets you specify the delay before the sub menus appear and disappear when the mouse rolls over and out of them, respectively.

ddsmoothmenu.zip (31.8 KB)
下载次数: 1

分享到：

struts2 jsp中取 action中的值 | 验证码

2012-09-12 09:54
浏览 1137
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js 菜单

`ddsmoothmenu.init()` and Menu content structure

Menu content structure

Putting the Menu contents in an external file and fetched using Ajax

Styling the menu item the user is currently at

Global menu settings

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js 菜单

ddsmoothmenu.init() and Menu content structure

Menu content structure

Putting the Menu contents in an external file and fetched using Ajax

Styling the menu item the user is currently at

Global menu settings

评论

发表评论

相关推荐

js 替换字符串

跟着滚动条动

js字符串换为json对象

js设置父 iframe的高度

js 不为空 验证

frame 重新加载

js 文本框只能输入整数

js 复选框选中 struts taglib

Jquery清空文本框

JS键码

JS关闭新打开的页面时，重新加载父页面

jquery获得浏览器请求参数值

JS超链接的应用

最近访客更多访客>>

`ddsmoothmenu.init()` and Menu content structure

js 不为空验证