|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- saved from url=(0048)http://development.tobypitman.com/css/menu.html# --> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>CSS3 jQuery style menu</title> <style type="text/css"> * { margin:0; padding:0; } html {height: 100%;} body{ position: relative; height: 100%; background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff)); } .navbox { position: relative; float: left; } ul.nav { list-style: none; display: block; width: 200px; position: relative; top: 100px; left: 100px; padding: 60px 0 60px 0; background: url(shad2.png) no-repeat; -webkit-background-size: 50% 100%; } li { margin: 5px 0 0 0; } ul.nav li a { -webkit-transition: all 0.3s ease-out; background: #cbcbcb url(border.png) no-repeat; color: #174867; padding: 7px 15px 7px 15px; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; width: 100px; display: block; text-decoration: none; -webkit-box-shadow: 2px 2px 4px #888; } ul.nav li a:hover { background: #ebebeb url(border.png) no-repeat; color: #67a5cd; padding: 7px 15px 7px 30px; } </style> <script> function NascondiMostra(mioparametro) { var elem = document.getElementById(mioparametro); if (elem != null) { if (elem.style.display == "none") elem.style.display = "block"; else elem.style.display = "none"; } return false; } // --> </script> </head> <body> <div class="navbox" id="0"> <ul class="nav"> <li><a href="#" onclick='NascondiMostra(1);'>XHTML</a></li> <li><a href="./CSS3 jQuery style menu_files/CSS3 jQuery style menu.html">C++</a></li> <li><a href="./CSS3 jQuery style menu_files/CSS3 jQuery style menu.html">Mootools</a></li> <li><a href="./CSS3 jQuery style menu_files/CSS3 jQuery style menu.html">HTML5</a></li> <li><a href="./CSS3 jQuery style menu_files/CSS3 jQuery style menu.html">CSS</a></li> <li><a href="./CSS3 jQuery style menu_files/CSS3 jQuery style menu.html">jQuery</a></li> <li><a href="./CSS3 jQuery style menu_files/CSS3 jQuery style menu.html">Ajax</a></li> <li><a href="./CSS3 jQuery style menu_files/CSS3 jQuery style menu.html">PHP</a></li> <li><a href="./CSS3 jQuery style menu_files/CSS3 jQuery style menu.html">Perl</a></li> </ul> </div> <div class="navbox" id="1" style="display:none" > <ul class="nav"> <li><a href="#" onclick='NascondiMostra(2);'>XHTML</a></li> <li><a href="./CSS3 jQuery style menu_files/CSS3 jQuery style menu.html">HTML5</a></li> <li><a href="./CSS3 jQuery style menu_files/CSS3 jQuery style menu.html">CSS</a></li> <li><a href="./CSS3 jQuery style menu_files/CSS3 jQuery style menu.html">jQuery</a></li> <li><a href="./CSS3 jQuery style menu_files/CSS3 jQuery style menu.html">Ajax</a></li> <li><a href="./CSS3 jQuery style menu_files/CSS3 jQuery style menu.html">PHP</a></li> </ul> </div> <div class="navbox" id="2" style="display:none"> <ul class="nav"> <li><a href="#" onclick='NascondiMostra(1);'>XHTML</a></li> <li><a href="./CSS3 jQuery style menu_files/CSS3 jQuery style menu.html">HTML5</a></li> <li><a href="./CSS3 jQuery style menu_files/CSS3 jQuery style menu.html">CSS</a></li> </ul> </div> </body></html> |