forked from UIZE/UIZE-JavaScript-Framework
-
Notifications
You must be signed in to change notification settings - Fork 0
/
javascript-menu-examples.html
88 lines (73 loc) · 4.5 KB
/
javascript-menu-examples.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!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>
<title>JavaScript Menu Examples | UIZE JavaScript Framework</title>
<meta name="keywords" content="UIZE JavaScript Framework"/>
<meta name="description" content="The UIZE JavaScript Framework includes scores of excellent examples to get you started. This index lists 7 JavaScript menu examples."/>
<link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
<link rel="stylesheet" href="css/page.css"/>
<link rel="stylesheet" href="css/page.simpledoc.css"/>
<link rel="stylesheet" href="css/page.index.css"/>
</head>
<body>
<script type="text/javascript" src="js/Uize.js"></script>
<h1 class="document-title">
<a id="page-homeLink" href="index.html" title="UIZE JavaScript Framework home"></a>
JavaScript Menu Examples
</h1>
<div class="main">
<div class="preamble">
The UIZE JavaScript Framework includes scores of excellent examples to get you started. This index lists 7 JavaScript menu examples.
<div class="tourPromo">
<div class="tourPromoHeading">TAKE A STEP-BY-STEP TOUR...</div>
<div class="tourPromoText">
You can take a step-by-step tour through the examples listed on this page. When you get into the tour, you can use the gigantic arrows that will appear on either side of the example pages to navigate from one page to the next (or back). You can also use the "thermometer" bar, that will appear right underneath the title bar of the example pages, to navigate to other pages in the tour. The highlighted segment of the thermometer shows you where you are in the tour.
</div>
<div>
<a href="javascript-feature-tours.html?tour=menu" class="buttonLink">START THE TOUR<span class="arrow"> </span></a>
<br style="line-height:6px;"/>
<br style="clear:right;"/>
</div>
</div>
</div>
<ul id="page-index">
<li>
<div class="itemTitle"><a href="examples/animated-buttons-with-box-shadow.html">Animated Buttons with Box Shadow</a><span class="arrow"> </span></div>
<div class="itemBody">See how to animate CSS3 box-shadow in order to make buttons leap out of the page when you mouse over them and bounce back when you mouse out of them.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/fade-css-style-across-nodes.html">Fade CSS Style Across Nodes</a><span class="arrow"> </span></div>
<div class="itemBody">See how CSS style properties can be faded across a series of nodes to create color gradient effects you wouldn't think possible without using images.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/hover-fader-color-effects.html">Hover Fader Color Effects</a><span class="arrow"> </span></div>
<div class="itemBody">Who needs boring menus when you can have stunning menu animations that will have your users mesmerized! You have to see these effects to believe them.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/hover-fader-stretching-menu.html">Hover Fader Stretching Menu</a><span class="arrow"> </span></div>
<div class="itemBody">Stretch the limits of what can be done with animated menus. Using JavaScript to animate CSS style properties can produce amazingly slick effects!</div>
</li>
<li>
<div class="itemTitle"><a href="examples/hover-fader-text-shadow-animation.html">Hover Fader Text Shadow Animation</a><span class="arrow"> </span></div>
<div class="itemBody">Animate the color, horizontal offset, vertical offset, and blur radius properties for any number of CSS3 text shadows to produce amazing menu effects.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/tree-list.html">Tree List From JSON</a><span class="arrow"> </span></div>
<div class="itemBody">See a demo of a JavaScript expandable / collapsible tree list widget, that can be easily built from a JSON object and can even be dynamically updated.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/tree-menu.html">Tree Menu From JSON</a><span class="arrow"> </span></div>
<div class="itemBody">See a demo of JavaScript menus, that can be easily built from a JSON object and can even be dynamically updated. These menus also support separators.</div>
</li>
</ul>
</div>
<script type="text/javascript">
Uize.module ({
required:[
'UizeDotCom.Page.Doc.library',
'UizeDotCom.Page.Index'
],
builder:function () {(window.page = new UizeDotCom.Page.Index).wireUi ()}
});
</script>
</body></html>