SufarStaR Mesaje : 126
Subiect: CSS Dock Menu Joi Mai 06, 2010 10:59 pm SubtitluComentariu Descriere Descriere : Este un meniu CSS foarte simplu de apaptat oricaei pagii Web . Meniul ae un design care cred ca merge oricarei pagini web . pentru a adapta meniu CSS la pagina voastra Html trebuie sa urmati urmatori opasi .
Metoda 1 : Copiate aceste 3 linkuri in pagina voastra Web - Cod:
-
<link rel="stylesheet" href="http://pmsc.free.fr/gb/CSS/1056222958.css" type="text/css" /> <script type="text/javascript" src="http://pmsc.free.fr/gb/J/1056223857.js"></script> <script type="text/javascript" src="http://pmsc.free.fr/gb/J/1056223836.js"></script>
Acestea sunt linkurile catre CSS si Javascript . Daca doriti sa le uploadati intr-un cont propiu downloadati de aici arhiva cu toate documentele necesare . download de aici
Cand vreti sa puneti meniul puneti codul de mai jos pentru meniu . Meniul de sus - Cod:
-
<!--top dock --> <div class="dock" id="dock"> <div class="dock-container"> <a class="dock-item" href="#"><img src="http://img710.imageshack.us/img710/5043/homeqs.png" alt="home" /><span>Home</span></a> <a class="dock-item" href="#"><img src="http://img27.imageshack.us/img27/7020/emaile.png" alt="contact" /><span>Contact</span></a> <a class="dock-item" href="#"><img src="http://img534.imageshack.us/img534/9425/portfolio.png" alt="portfolio" /><span>Portfolio</span></a> <a class="dock-item" href="#"><img src="http://img689.imageshack.us/img689/7899/musicfe.png" alt="music" /><span>Music</span></a> <a class="dock-item" href="#"><img src="http://img687.imageshack.us/img687/4338/videog.png" alt="video" /><span>Video</span></a> <a class="dock-item" href="#"><img src="http://img99.imageshack.us/img99/7475/historyk.png" alt="history" /><span>History</span></a> <a class="dock-item" href="#"><img src="http://img402.imageshack.us/img402/9836/calendary.png" alt="calendar" /><span>Calendar</span></a> <a class="dock-item" href="#"><img src="http://img718.imageshack.us/img718/3409/rssvq.png" alt="rss" /><span>RSS</span></a>
</div> </div>
Meniul de jos - Cod:
-
<!--bottom dock --> <div class="dock" id="dock2"> <div class="dock-container2"> <a class="dock-item2" href="#"><span>Home</span><img src="http://img710.imageshack.us/img710/5043/homeqs.png" alt="home" /></a> <a class="dock-item2" href="#"><span>Contact</span><img src="http://img27.imageshack.us/img27/7020/emaile.png" alt="contact" /></a> <a class="dock-item2" href="#"><span>Portfolio</span><img src="http://img534.imageshack.us/img534/9425/portfolio.png" alt="portfolio" /></a> <a class="dock-item2" href="#"><span>Music</span><img src="http://img689.imageshack.us/img689/7899/musicfe.png" alt="music" /></a> <a class="dock-item2" href="#"><span>Video</span><img src="http://img687.imageshack.us/img687/4338/videog.png" alt="video" /></a> <a class="dock-item2" href="#"><span>History</span><img src="http://img99.imageshack.us/img99/7475/historyk.png" alt="history" /></a> <a class="dock-item2" href="#"><span>Calendar</span><img src="http://img402.imageshack.us/img402/9836/calendary.png" alt="calendar" /></a>
</a> <a class="dock-item2" href="#"><span>RSS</span><img src="http://img718.imageshack.us/img718/3409/rssvq.png" alt="rss" /></a> </div> </div>
Metoda 2 : Daca nu doriti sa aveti batai de cap sa uploadati sa modificati voi . copiati codul de mai jos in pagina Web . - Cod:
-
<!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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>CSS Dock Menu</title> <link rel="stylesheet" href="http://pmsc.free.fr/gb/CSS/1056222958.css" type="text/css" /> <script type="text/javascript" src="http://pmsc.free.fr/gb/J/1056223857.js"></script> <script type="text/javascript" src="http://pmsc.free.fr/gb/J/1056223836.js"></script>
<!--[if lt IE 7]> <style type="text/css"> .dock img { behavior: url(iepngfix.htc) } </style> <![endif]-->
</head>
<body> <!--top dock --> <div class="dock" id="dock"> <div class="dock-container"> <a class="dock-item" href="#"><img src="http://img710.imageshack.us/img710/5043/homeqs.png" alt="home" /><span>Home</span></a> <a class="dock-item" href="#"><img src="http://img27.imageshack.us/img27/7020/emaile.png" alt="contact" /><span>Contact</span></a> <a class="dock-item" href="#"><img src="http://img534.imageshack.us/img534/9425/portfolio.png" alt="portfolio" /><span>Portfolio</span></a> <a class="dock-item" href="#"><img src="http://img689.imageshack.us/img689/7899/musicfe.png" alt="music" /><span>Music</span></a> <a class="dock-item" href="#"><img src="http://img687.imageshack.us/img687/4338/videog.png" alt="video" /><span>Video</span></a> <a class="dock-item" href="#"><img src="http://img99.imageshack.us/img99/7475/historyk.png" alt="history" /><span>History</span></a> <a class="dock-item" href="#"><img src="http://img402.imageshack.us/img402/9836/calendary.png" alt="calendar" /><span>Calendar</span></a> <a class="dock-item" href="#"><img src="http://img718.imageshack.us/img718/3409/rssvq.png" alt="rss" /><span>RSS</span></a>
</div> </div>
<!--bottom dock --> <div class="dock" id="dock2"> <div class="dock-container2"> <a class="dock-item2" href="#"><span>Home</span><img src="http://img710.imageshack.us/img710/5043/homeqs.png" alt="home" /></a> <a class="dock-item2" href="#"><span>Contact</span><img src="http://img27.imageshack.us/img27/7020/emaile.png" alt="contact" /></a> <a class="dock-item2" href="#"><span>Portfolio</span><img src="http://img534.imageshack.us/img534/9425/portfolio.png" alt="portfolio" /></a> <a class="dock-item2" href="#"><span>Music</span><img src="http://img689.imageshack.us/img689/7899/musicfe.png" alt="music" /></a> <a class="dock-item2" href="#"><span>Video</span><img src="http://img687.imageshack.us/img687/4338/videog.png" alt="video" /></a> <a class="dock-item2" href="#"><span>History</span><img src="http://img99.imageshack.us/img99/7475/historyk.png" alt="history" /></a> <a class="dock-item2" href="#"><span>Calendar</span><img src="http://img402.imageshack.us/img402/9836/calendary.png" alt="calendar" /></a>
</a> <a class="dock-item2" href="#"><span>RSS</span><img src="http://img718.imageshack.us/img718/3409/rssvq.png" alt="rss" /></a> </div> </div>
<!--dock menu JS options --> <script type="text/javascript"> $(document).ready( function() { $('#dock').Fisheye( { maxWidth: 50, items: 'a', itemsText: 'span', container: '.dock-container', itemWidth: 40, proximity: 90, halign : 'center' } ) $('#dock2').Fisheye( { maxWidth: 60, items: 'a', itemsText: 'span', container: '.dock-container2', itemWidth: 40, proximity: 80, alignment : 'left', valign: 'bottom', halign : 'center' } ) } );
</script> </body> </html>
Ps : Sper ca vam fost de folos . Cu Stima si respect stafful GoldenBv Scris de... |
| |