Анимированный HTML, CSS JavaScript. Как я могу реализовать это

Я пытаюсь реализовать функцию веб-сайта, но я не знаю, как его создать. Я попытался взглянуть на источник и создать его, но я не могу. В основном на этом website есть небольшое красное «шаровое» меню внизу левой стороны, которое, когда вы нажимаете на него, открывает больше меню. Это очень интерактивно, и я хотел бы включить его в свой университетский проект. Я новичок в HTML, CSS и Javascript, так что это может быть глупый вопрос для вас, однако, это будет очень мило с вашей стороны, если вы можете мне помочь.Анимированный HTML, CSS JavaScript. Как я могу реализовать это

источник

2015-02-19 Daniel O Mensah

Это почти похоже на то, что вы хотите, чтобы мы сделали домашнее задание для вас! Я бы использовал jquery animate, но это личное предпочтение: http://api.jquery.com/animate/ – micwallace

Элемент реализуется с помощью iFrame, который вы можете увидеть как «микрофон на другую страницу». Оригинальный исходный код фрейма является следующее:

<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Share NIF</title> 
<link href="css/default.css" rel="stylesheet" type="text/css" /> 
<script src="js/jquery.js" type="text/javascript"></script> 
<script src="js/mobilyblocks.js" type="text/javascript"></script> 
<script src="js/init.js" type="text/javascript"></script> 
</head> 

<body style="overflow: hidden"> 

    <div id="content"> 
     <div class="socials"> 
      <ul class="reset"> 
       <li><a href="http://www.facebook.com/NarutoItalianForum" target="_blank" title="Facebook"><img src="img/socials/facebook.png" alt="Facebook" /></a></li> 
       <li><a href="http://twitter.com/NIFTeam" target="_blank" title="Twitter"><img src="img/socials/twitter.png" alt="Twitter" /></a></li> 
       <li><a href="http://it.netlog.com/NarutoItalianForum" target="_blank" title="Netlog"><img src="img/socials/netlog.png" alt="Netlog" /></a></li> 
       <li><a href="http://www.youtube.com/NIFTeam" target="_blank" title="You Tube"><img src="img/socials/youtube.png" alt="You Tube" /></a></li> 
       <li><a href="http://nifteam.altervista.org/" target="_blank" title="Sito"><img src="img/socials/msn.png" alt="Sito" /></a></li> 
       <li><a href="/cdn-cgi/l/email-protection#721c130007061d1b06131e1b131c141d00071f321a1d061f131b1e5c1b06" target="_blank" title="E-mail"><img src="img/socials/mail.png" alt="E-mail" /></a></li> 
      </ul>   
     </div>  
    </div> 

<script type="text/javascript"> 
/* <![CDATA[ */ 
(function(){try{var s,a,i,j,r,c,l=document.getElementsByTagName("a"),t=document.createElement("textarea");for(i=0;l.length-i;i++){try{a=l[i].getAttribute("href");if(a&&a.indexOf("/cdn-cgi/l/email-protection") > -1 && (a.length > 28)){s='';j=27+ 1 + a.indexOf("/cdn-cgi/l/email-protection");if (a.length > j) {r=parseInt(a.substr(j,2),16);for(j+=2;a.length>j&&a.substr(j,1)!='X';j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}j+=1;s+=a.substr(j,a.length-j);}t.innerHTML=s.replace(/</g,"&lt;").replace(/>/g,"&gt;");l[i].setAttribute("href","mailto:"+t.value);}}catch(e){}}}catch(e){}})(); 
/* ]]> */ 
</script> 
</body> 
</html>

Это default.css

Это jquery.js

Это mobilyblock.js

Это init.js

источник

2015-02-19 10:11:00 BeeBee