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 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)
};
-
如何用element-ui的el-menu组件动态实现多级菜单？ 1）创建menuTree.vue组件 <!--menuTree.vue--> <template> <div class="gtd-menu-tree"> <template v-for="(item, index) in data"> <el-submenu :key="index" v-if="item.
-
使用element-plus 的菜单组件打开外部网址 1 使用数组动态生成的菜单，外部链接的对象结构如下 { id: 12, path: "https://",//要打开的网址 meta: { title: "菜单名称", icon: "icon-menu-buy", linkIcon:'icon-menu-buy-link' },
-
1、只进行跳转（无需传参） <el-menu :default-active="$router.path" //注意点 router //注意点 class="el-menu-demo" mode="horizontal" > <el-menu-item "index='/yzfMap'>地图页面</el-menu-item> </el-munu> 2、跳转并传
-
这用于创建自由路径。 语法 (Syntax) 以下是添加路径的简单语法。 xtype: 'draw', type: 'path' 例子 (Example) 以下是一个显示用法的简单示例。 <!DOCTYPE html> <html> <head> <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/c
-
import "path" path实现了对斜杠分隔的路径的实用操作函数。 Variables func IsAbs(path string) bool func Split(path string) (dir, file string) func Join(elem ...string) string func Dir(path string) string func Base(path str
-
:path is a pseudo-class selector written in jquery. It automatically filters out href attributes that matches the window location and it's ancestors. Use it to style or modify active states in navigat
-
Utility method Converts path coordinates into absolute values Parameters pathstringpath string Returns: array path string
-
Utility method Converts path coordinates into relative values Parameters pathstringpath string Returns: array path string
-
Utility method Returns the bounding box of a given path Parameters pathstringpath string Returns: object bounding box { x: numberx coordinate of the left top point of the box, y: numbery coordinate of