Path-Menu
- 授权协议: 未知
- 开发语言:
- 操作系统: 未知
- 软件首页: http://plugins.jquery.com/project/path-menu
软件介绍
Hierarchical, wrappable (when container width gets smaller than the menu length), mouse-hover and Tab-key driven menu bar. Originally created to represent a path to the selected item in a tree-view. A usage example:
<link target="_blank" rel="nofollow" href="jquery.path-menu.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery.metadata.js"></script> <!-- OPTIONAL -->
<script type="text/javascript" src="jquery.hoverIntent.js"></script> <!-- OPTIONAL -->
<script type="text/javascript" src="jquery.path-menu.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
// path-menu elements initialization after document's loaded
$('#Menu1').path_menu({animation_speed:0});
});
//-->
</script>
. . .
<div id='Menu1' class="{z_index:1500}">
<div><a title='Item 1' href='#'>Item 1</a></div>
<div><a title='Item 2' href='#'>Item 2</a>
<div class='{popup_max_height:50}' style="font-weight:bold">
<a title='Item 2.1' href='#'>Item 2.1</a>
<a title='Item 2.2' href='#'>Item 2.2</a>
<a title='Item 2.3' href='#'>Item 2.3</a>
<a title='Item 2.4' href='#'>Item 2.4</a>
<a title='Item 2.5' href='#'>Item 2.5</a>
<a title='Item 2.6' href='#'>Item 2.6</a>
<a title='Item 2.7' href='#'>Item 2.7</a>
</div>
</div>
. . .
<div><a title='Item 4' href='#'>Item 4</a>
<div>
<a title='Item 4.1' href='#'>Item 4.1</a>
<a title='Item 4.2' href='#'>Item 4.2</a>
<div><a title='Item 4.3' href='#'>Item 4.3</a>
<div>
<a title='Item 4.3.1' href='#'>Item 4.3.1</a>
<a title='Item 4.3.2' href='#'>Item 4.3.2</a>
. . .
<a title='Item 4.3.5' href='#'>Item 4.3.5</a>
<div><a title='Item 4.3.6' href='#'>Item 4.3.6</a>
<div>
<a title='Item 4.3.6.1' href='#'>Item 4.3.6.1</a>
<a title='Item 4.3.6.2' href='#'>Item 4.3.6.2</a>
. . .
<a title='Item 4.3.6.16' href='#'>Item 4.3.6.16</a>
</div>
</div>
<a title='Item 4.3.7' href='#'>Item 4.3.7</a>
. . .
<a title='Item 4.3.11' href='#'>Item 4.3.11</a>
<a title='Item 4.3.12' href='#'>Item 4.3.12</a>
</div>
</div>
<a title='Item 4.4' href='#'>Item 4.4</a>
<a title='Item 4.5' href='#'>Item 4.5</a>
</div>
</div>
</div>
. . .To make it look like a regular menu bar, the triangular images can be removed by removing the "background" CSS attribute from the "div.PathElementHover" and "div.PathElement" classes in the jquery.path-menu.css file. It can make use of the metadata (see the menu item 2 in the example) and hoverIntent plugins. The available options (can be changed directly, used as parameters (see the example) and as metadata for individual DIV elements) with their default values are as follows:
//
// plugin defaults
//
$.fn.path_menu.defaults = {
popup_max_height: 200, // popup maximum height in pixels
shadow_offset_x: 3, // right shadow width in pixels (IE only)
shadow_offset_y: 2, // bottom shadow height in pixels (IE only)
animation_speed: "fast", // popup displaying/hiding speed
z_index: 1000, // menu z-index (root div element only)
hoverIntent: false // "true" requires the hoverIntent plugin (root div element only)
};
形式感+：网页视觉设计创意拓展与快速表现
晋小彦 / 清华大学出版社 / 2014-1-1 / 59.00元
网页设计师从早年的综合性工作中分化出来，形成了相对独立的专业岗位，网页设计也不再是单纯的软件应用，它衍生出了许多独立的研究方向，当网站策划、交互体验都逐渐独立之后，形式感的突破和表现成为网页视觉设计的一项重要工作。随着时代的发展，网页设计更接近于一门艺术。网络带宽和硬件的发展为网页提供了使用更大图片、动画甚至视频的权利，而这些也为视觉设计师提供了更多表现的空间。另外多终端用户屏幕（主要是各种移动设......一起来看看 《形式感+：网页视觉设计创意拓展与快速表现》 这本书的介绍吧!
