JQuery and CSS3 to realize sliding navigation menu

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Preview:

There are colors available, please use the HTML5/CSS3 browser to access.

HTML source code:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>JQuery and CSS3 sliding navigation menu - Ke Leyi</title><base target="_blank" />
 6 <link type="text/css" rel="stylesheet" media="all" href="http://keleyi.com/keleyi/phtml/html5/15/css/keleyi.css" />
 7 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
 8 <script src="http://keleyi.com/keleyi/phtml/html5/15/js/keleyi.js" type="text/javascript"></script>
 9 </head>
10 <body>
11 <div id="wrapper">
12 <div class="header">
13 <h1><a href="http://keleyi.com"><img src="http://keleyi.com/keleyi/phtml/html5/15/images/logo-small.png" /></a>JQuery and CSS3 sliding navigation menu CSS3 Fancy Menu / keleyi Menu</h1>
14 <p>Please visit this page using a browser that supports HTML5/CSS3. A CSS3 Experiment by <a href="http://keleyi.com">insicdesigns</a></p>
15 </div>
16 <div class="keleyi" >
17 <ul>
18 <li class="active"><a href="http://keleyi.com/menu/net/" >.NET</a></li><li><a href="http://keleyi.com/menu/javascript/" >Javascript</a></li><li><a href="http://keleyi.com/menu/jquery/" >jQuery</a></li><li><a href="http://keleyi.com/menu/csharp/" >C#</a></li><li><a href="http://keleyi.com/menu/aspnet/" >ASP.NET</a></li><li><a href="http://keleyi.com/menu/mvc/" >MVC</a></li><li><a href="http://keleyi.com/menu/html5/" >HTML5</a></li>
19 <li><a href="http://keleyi.com/menu/webqd/" >The web front end</a></li><li><a href="http://keleyi.com/menu/cpp/" >C++</a></li>
20 <li><a href="http://keleyi.com/ziliao/js/zzbds.htm">JS regular expressions</a></li></ul>
21 <div class="floatr"></div>
22 </div>
23 <h2>Experimenting with colors <a href="http://keleyi.com/a/bjac/21poi7ce.htm">The original</a></h2>
24 <p>Gradients can only be seen on Webkit browser (Chrome, Safari).</p>
25 <div class="keleyi magenta">
26 <ul >
27 <li class="active"><a href="http://keleyi.com/">Home</a></li>
28 <li><a href="http://keleyi.com/about/">About</a></li>
29 <li><a href="http://keleyi.com/game/1/">Fishing</a></li>
30 <li><a href="http://keleyi.com/a/bjac/kjsrt3b0.htm">jQuery AJAX</a></li>
31 <li><a href="http://keleyi.com/a/bjac/182di68b.htm">Navigation style</a></li>
32 <li><a href="http://keleyi.com/a/bjac/mt97p5y9.htm">Side navigation</a></li>
33 <li><a href="http://keleyi.com/dev/3068696139522ae4.htm">The tree menu</a></li>
34 <li><a href="http://keleyi.com/game/4/">Beauty puzzle</a></li>
35 <li><a href="http://keleyi.com/keleyi/phtml/silverlight/">Guessing</a></li>
36 </ul>
37 <div class="floatr"></div>
38 </div>
39 <br />
40 <div class="keleyi cyan">
41 <ul >
42 <li class="active"><a href="http://keleyi.com/a/bjac/4pdfle7v.htm">Animation menu navigation</a></li><li><a href="http://keleyi.com/a/bjac/nk1dr8xn.htm">Window Gao Kuan</a></li>
43 <li><a href="http://keleyi.com/a/bjac/cx165ov3.htm">The use of jQuery</a></li><li><a href="http://keleyi.com/a/bjac/4saw3kmj.htm">The advantages and disadvantages of jQ</a></li>
44 <li><a href="http://keleyi.com/a/bjac/25mku22l.htm">JQuery introduction</a></li><li><a href="http://keleyi.com/a/bjac/6c5snbtc.htm">The div child element</a></li>
45 <li><a href="http://keleyi.com/a/bjac/8p1g5yeq.htm">JQ mouse position</a></li>
46 
47 </ul>
48 <div class="floatr"></div>
49 </div>
50 <br />
51 <div class="keleyi yellow">
52 <ul >
53 <li class="active"><a href="http://keleyi.cn">Three level menu</a></li><li><a href="http://keleyi.com/a/bjac/mnmpm4bv.htm">Picture lantern</a></li><li><a href="http://keleyi.com/a/bjac/90b914o0.htm">JQ Toggle</a></li>
54 <li><a href="http://keleyi.com/a/bjac/bg0m15bi.htm">The jQ method on()</a></li><li><a href="http://keleyi.com/a/bjac/scdm44l9.htm">The sidebar navigation</a></li><li><a href="http://keleyi.com/a/bjac/1ln3kvac.htm">JQ live()</a></li>
55 <li><a href="http://keleyi.com/a/bjac/n5kb0y0j.htm">JQ find()</a></li><li><a href="http://keleyi.com/a/bjac/4013kn5s.htm">JQuery on</a></li>
56 </ul>
57 <div class="floatr"></div>
58 </div>
59 <br />
60 <div class="keleyi orange">
61 <ul >
62 <li class="active"><a href="http://keleyi.com/a/bjac/mt97p5y9.htm">The side navigation</a></li><li><a href="http://keleyi.com/a/bjac/phhq4ecr.htm">The current time</a></li>
63 <li><a href="http://keleyi.com/a/bjac/1juhjegr.htm">Replace image</a></li><li><a href="http://keleyi.com/a/bjac/c6gu08gm.htm" title="JQuery friendly picture carousel (including the first and last)">Picture of the carousel</a></li><li><a href="http://keleyi.com/a/bjac/opnw2awa.htm">The appendTo method</a></li>
64 <li><a href="http://keleyi.com/a/bjac/0vpch15n.htm">JQ append</a></li><li><a href="http://keleyi.com/a/bjac/cfyxd60g.htm">JQ after</a></li>
65 <li><a href="http://keleyi.com/a/bjac/m9xwhxv2.htm">To determine whether the air</a></li>
66 </ul>
67 <div class="floatr"></div>
68 </div>
69 <br />
70 <div class="keleyi dark">
71 <ul >
72 <li class="active"><a href="http://keleyi.com/a/bjac/2oncd079.htm" title="The jQ function of after, append, appendTo difference">after,append</a></li><li><a href="http://keleyi.com/a/bjac/db2b8j9b.htm">JQUERY ajax</a></li>
73 <li><a href="http://keleyi.com/a/bjac/dbjlg7nf.htm" title="JQuery form validation plugin for jQuery.validity">Form validation plugin</a></li>
74 <li><a href="http://keleyi.com/a/bjac/otjlqc2l.htm">jquery ajax</a></li><li><a href="http://keleyi.com/a/bjac/3wdrld0b.htm">removeAttr</a></li>
75 <li><a href="http://keleyi.com/a/bjac/lx3u7na0.htm">The a chain is invalid</a></li><li><a href="http://keleyi.com/a/bjac/4prgqlce.htm">Short for ready</a></li>
76 </ul>
77 <div class="floatr"></div>
78 </div>
79 </div>
80 </body>
81 </html>

The original:

More menu:

The web front end summary

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Uriah at November 25, 2013 - 7:25 AM