Meniu saltaret

In jos

Meniu saltaret

Mesaj Scris de Ciocănel la data de Joi Iul 26, 2012 6:16 pm

Buna ziua astazi o sa va prezint un cod care se numeste Meniul saltaret , este foarte amuzant chiar si dupa nume o sa va prezint o demonstratie !
Demnostratie : http://crazyart.forumotion.com/h10-saltaret
Cod CSS :
Cod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><script type="text/javascript">// Mouseover/ Click sound effect- by JavaScript Kit (www.javascriptkit.com)// Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code//** Usage: Instantiate script by calling: var uniquevar=createsoundbite("soundfile1", "fallbackfile2", "fallebacksound3", etc)//** Call: uniquevar.playclip() to play soundvar html5_audiotypes={ //define list of audio file extensions and their associated audio types. Add to it if your specified audio file isn't on this list:"mp3": "audio/mpeg","mp4": "audio/mp4","ogg": "audio/ogg","wav": "audio/wav"}function createsoundbite(sound){var html5audio=document.createElement('audio')if (html5audio.canPlayType){ //check support for HTML5 audiofor (var i=0; i<arguments.length; i++){var sourceel=document.createElement('source')sourceel.setAttribute('src', arguments[i])if (arguments[i].match(/\.(\w+)$/i))sourceel.setAttribute('type', html5_audiotypes[RegExp.$1])html5audio.appendChild(sourceel)}html5audio.load()html5audio.playclip=function(){html5audio.pause()html5audio.currentTime=0html5audio.play()}return html5audio}else{return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}}}}//Initialize two sound clips with 1 fallback file each:var mouseoversound=createsoundbite("http://www.javascriptkit.com/script/script2/click.ogg", "http://www.javascriptkit.com/script/script2/click.mp3")var clicksound=createsoundbite("http://www.javascriptkit.com/script/script2/whistle.ogg", "http://www.javascriptkit.com/script/script2/whistle.mp3")</script><script type="text/javascript" src="http://www.webdesignerwall.com/demo/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){$(".btn-slide").click(function(){$("#panel").slideToggle("slow");$(this).toggleClass("active"); return false;});});</script><style>a:focus {outline: none;}#panel {background: #f2f2f2;border: 2px solid #d8d8d8;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;-moz-box-shadow: 0 0 5px #888;-webkit-box-shadow: 0 0 5px#888;box-shadow: 0 0 5px #888;display: none;margin-top: 53px;margin-bottom: 5px;border-collapse:separate;border-spacing: 5px 5px;opacity: 0.9;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; // first!filter: alpha(opacity=90);// second!}#panel2 {opacity: 0.9;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; // first!filter: alpha(opacity=90);// second!background: white;border: 1px solid #d8d8d8;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;margin-left: 5px;margin-right: 5px;margin-top: 5px;margin-bottom: 5px;padding: 5px;width: 915px;text-align: middle;vertical-align: middle;display:table-cell; text-align: middle;}.slide {margin-top: 0px;}.btn-slide {}.active {}</style><style>.navigation{position:relative;margin:0 auto;width:905px;}ul.menu{list-style:none;font-family:"Verdana",sans-serif;border-top:1px solid #bebebe;margin:0px;padding:0px;float:left;}ul.menu li{float:left;}ul.menu li a{text-decoration:none;background: #DCEFFA;padding:15px 0px;width:128px;color:#333333;float:left;text-align:center;border-right:1px solid #a1a1a1;font-weight:bold;font-size:13px;text-shadow: 0 1px 1px #fff;-moz-text-shadow: 0 1px 1px #fff;-webkit-text-shadow: 0 1px 1px #fff;border-bottom: 1px solid #a1a1a1;-moz-box-shadow: 0 0 5px #888;-webkit-box-shadow: 0 0 5px#888;box-shadow: 0 0 5px #888;}ul.menu li a.hover{color: green;}ul.menu li a.first{border-radius: 0px 0px 0px 3px;-moz-border-radius: 0px 0px 0px 3px;-webkit-border-radius: 0px 0px 0px 3px;border-left: 1px solid #a1a1a1;}ul.menu li a.last{border-radius: 0px 0px 3px 0px;-moz-border-radius: 0px 0px 3px 0px;-webkit-border-radius: 0px 0px 3px 0px;border-right: 1px solid #a1a1a1;}ul.menu li span{background-repeat:no-repeat;background-color:transparent;width:64px;height:64px;position:absolute;z-index:-1;top:80px;cursor:pointer;}ul.menu li span.home{background-image:url(http://i42.servimg.com/u/f42/15/32/16/91/home-i13.png);left:33px; /*128/2 - 32(half of icon) +1 of border*/}ul.menu li span.refresh{background-image:url(http://i42.servimg.com/u/f42/15/32/16/91/window10.png);left:163px;}ul.menu li span.membri{background-image:url(http://i42.servimg.com/u/f42/15/32/16/91/user-g10.png);left:293px;}ul.menu li span.cautare{background-image:url(http://i42.servimg.com/u/f42/15/32/16/91/search13.png);left:423px; /* plus 128 + 2px of border*/}ul.menu li span.profil{background-image:url(http://i42.servimg.com/u/f42/15/32/16/91/user-i12.png);left:553px;}ul.menu li span.pm{background-image:url(http://i42.servimg.com/u/f42/15/32/16/91/messag10.png);left:683px;}ul.menu li span.deconectare{background-image:url(http://i42.servimg.com/u/f42/15/32/16/91/close-10.png);left:813px;}ul.menu li span.faq{background-image:url(http://i42.servimg.com/u/f42/15/32/16/91/help-i10.png);left:553px;}ul.menu li span.login{background-image:url(http://i42.servimg.com/u/f42/15/32/16/91/key-ic11.png);left:813px;}ul.menu li span.register{background-image:url(http://i42.servimg.com/u/f42/15/32/16/91/log-ou10.png);left:683px;}</style></head><script type="text/javascript">// Mouseover/ Click sound effect- by JavaScript Kit (www.javascriptkit.com)// Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code//** Usage: Instantiate script by calling: var uniquevar=createsoundbite("soundfile1", "fallbackfile2", "fallebacksound3", etc)//** Call: uniquevar.playclip() to play soundvar html5_audiotypes={ //define list of audio file extensions and their associated audio types. Add to it if your specified audio file isn't on this list:"mp3": "audio/mpeg","mp4": "audio/mp4","ogg": "audio/ogg","wav": "audio/wav"}function createsoundbite(sound){var html5audio=document.createElement('audio')if (html5audio.canPlayType){ //check support for HTML5 audiofor (var i=0; i<arguments.length; i++){var sourceel=document.createElement('source')sourceel.setAttribute('src', arguments[i])if (arguments[i].match(/\.(\w+)$/i))sourceel.setAttribute('type', html5_audiotypes[RegExp.$1])html5audio.appendChild(sourceel)}html5audio.load()html5audio.playclip=function(){html5audio.pause()html5audio.currentTime=0html5audio.play()}return html5audio}else{return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}}}}//Initialize two sound clips with 1 fallback file each:var mouseoversound=createsoundbite("http://www.javascriptkit.com/script/script2/click.ogg", "http://www.javascriptkit.com/script/script2/click.mp3")var clicksound=createsoundbite("http://www.javascriptkit.com/script/script2/whistle.ogg", "http://www.javascriptkit.com/script/script2/whistle.mp3")</script><body><script type="text/javascript">function show_hide(id, show) {if (el = document.getElementById(id)) {if (null==show) show = el.style.display=='none';el.style.display = (show ? '' : 'none');}}</script><style type="text/css">tbl { display: none }</style><div class="navigation" id="tbl"><ul class="menu" id="menu"><script>// Mouseover/ Click sound effect- by JavaScript Kit (www.javascriptkit.com)// Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code//** Usage: Instantiate script by calling: var uniquevar=createsoundbite("soundfile1", "fallbackfile2", "fallebacksound3", etc)//** Call: uniquevar.playclip() to play soundvar html5_audiotypes={ //define list of audio file extensions and their associated audio types. Add to it if your specified audio file isn't on this list:"mp3": "audio/mpeg","mp4": "audio/mp4","ogg": "audio/ogg","wav": "audio/wav"}function createsoundbite(sound){var html5audio=document.createElement('audio')if (html5audio.canPlayType){ //check support for HTML5 audiofor (var i=0; i<arguments.length; i++){var sourceel=document.createElement('source')sourceel.setAttribute('src', arguments[i])if (arguments[i].match(/\.(\w+)$/i))sourceel.setAttribute('type', html5_audiotypes[RegExp.$1])html5audio.appendChild(sourceel)}html5audio.load()html5audio.playclip=function(){html5audio.pause()html5audio.currentTime=0html5audio.play()}return html5audio}else{return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}}}}//Initialize two sound clips with 1 fallback file each:var mouseoversound=createsoundbite("http://www.javascriptkit.com/script/script2/click.ogg", "http://www.javascriptkit.com/script/script2/click.mp3")var clicksound=createsoundbite("http://www.javascriptkit.com/script/script2/whistle.ogg", "http://www.javascriptkit.com/script/script2/whistle.mp3")</script><li><span class="home"></span><a href="/forum" class="first" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">Acasa</a></li><li><span class="refresh"></span><a href="javascript:location.reload(true)" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">Refresh</a></li><li><span class="membri"></span><a href="/memberlist" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">Membri</a></li><li><span class="cautare"></span><a href="/search" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">Cautare</a></li><li><span class="faq"></span><a href="/faq" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">FAQ</a></li><li><span class="register"></span><a href="/register" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">Inregistrare</a></li><li><p class="slide"><span class="login"></span><a href="#" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()" class="btn-slide" style="border-radius: 0px 0px 3px 0px; -moz-border-radius: 0px 0px 3px 0px; -webkit-border-radius: 0px 0px 3px 0px; border-right: 1px solid #a1a1a1;">Conectare ?</a></p></li><div id="panel"><div id="panel2"><div align="right" style="float: right;"><img src="http://i42.servimg.com/u/f42/15/32/16/91/user-i13.png"></div><div><form  action="login.forum?connexion" method="post" ><label for="log"><b><font style="font-size: 12px;"> Nume de utilizator:</font> </b></label><input style="color: orange; background: #f2f2f2; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;" type="text" name="username" id="log" value="" size="23" /><label for="pwd"><b><font style="font-size: 12px;">  Parola: </font></b></label><input style="color: orange; background: #f2f2f2; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;" type="password" name="password" id="pwd" size="23" />   <input style="background-color: #1CA4E8; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; color: white;" type="submit" name="login" value="Conectare" class="button_login" /><input type="hidden" name="redirect_to" value=""/></form><label for="rememberme"><input name="rememberme" id="rememberme" class="rememberme" type="checkbox" checked="checked" value="forever" /><font style="font-size: 12px;">Tine-ma minte!</font></label><div style="float: right; margin-right: -24px;" align"right"> <a style="color: grey; font-weight: 700; font-size: 12px; font-family: arial; text-decoration: none; margin-left: 13px;" href="/profile.forum?mode=sendpassword">Mi-am uitat parola.&nbsp;</a></div></div></div></div></ul></div><script type="text/javascript" src="http://www.tympanus.net/Tutorials/FancyAppleStyleNavigation/jquery-1.3.2.js"></script><script type="text/javascript">$(function() {var d=1000;$('#menu span').each(function(){$(this).stop().animate({'top':'-17px'},d+=250);});$('#menu > li').hover(function () {var $this = $(this);$('a',$this).addClass('hover');$('span',$this).stop().animate({'top':'40px'},300).css({'zIndex':'10'});},function () {var $this = $(this);$('a',$this).removeClass('hover');$('span',$this).stop().animate({'top':'-17px'},800).css({'zIndex':'-1'});});});</script><script>// Mouseover/ Click sound effect- by JavaScript Kit (www.javascriptkit.com)// Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code//** Usage: Instantiate script by calling: var uniquevar=createsoundbite("soundfile1", "fallbackfile2", "fallebacksound3", etc)//** Call: uniquevar.playclip() to play soundvar html5_audiotypes={ //define list of audio file extensions and their associated audio types. Add to it if your specified audio file isn't on this list:"mp3": "audio/mpeg","mp4": "audio/mp4","ogg": "audio/ogg","wav": "audio/wav"}function createsoundbite(sound){var html5audio=document.createElement('audio')if (html5audio.canPlayType){ //check support for HTML5 audiofor (var i=0; i<arguments.length; i++){var sourceel=document.createElement('source')sourceel.setAttribute('src', arguments[i])if (arguments[i].match(/\.(\w+)$/i))sourceel.setAttribute('type', html5_audiotypes[RegExp.$1])html5audio.appendChild(sourceel)}html5audio.load()html5audio.playclip=function(){html5audio.pause()html5audio.currentTime=0html5audio.play()}return html5audio}else{return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}}}}//Initialize two sound clips with 1 fallback file each:var mouseoversound=createsoundbite("http://www.javascriptkit.com/script/script2/click.ogg", "http://www.javascriptkit.com/script/script2/click.mp3")var clicksound=createsoundbite("http://www.javascriptkit.com/script/script2/whistle.ogg", "http://www.javascriptkit.com/script/script2/whistle.mp3")</script></body></html>
Acest cod poate fi bagat in : PA => AFISARE => PAGINA DE START => GENERALITATI



avatar
Ciocănel
Membru Coding-Help

Numarul Mesajelor : 206
Reputatie de puncte : 5894
Inscris din : 19/07/2012
Varsta : 20
Localizare : Durham, North Carolina

Vezi profilul utilizatorului http://crazyart.forumotion.com

Sus In jos

Sus

- Subiecte similare

 
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum