Ana Menü
AnaSayfa
Hakkımızda
Arama
Z.Defteri
Aktiviteler
Top List
BDA
Link Listesi
Bana Ulaşın
Site Arşivi
CSS
Tasarımlar
Menüler
Kodlar
Bedava-Sitem
Paylaşımlar
Tasarımlar
Html Kodları
Dersler
PC
Pc Tarihi
Pc Kısayollar
Pc Parçaları
Pc Sistemleri
Pc Programları
PhotoShop
PhotoShop Nedir?
Photoshop Brushes
PhotoShop Styles
PhotoShop Gardient
PhotoShop Araç Kutusu
PhotoShop Kısayolları
PhotoShop Genel
VİP
Giriş
Market
Vip Bilgi
Fiyatlar
Üyeler
Ekstralar
Forum
Sohbet
Destek Ol
OgenTR
Ana sayfa
Hakkimizda
defter
bda
Top liste
tasarim1
Forum
CssTasarimlar
Css Menuler
Css Kodlar
Arama
Sohbet
Destek Ol
Html Kodlar
Giris
Uyeler
Vip Bilgi
Fiyatlar
iletisim
ps nedir
ps brush
ps styles
ps gardient
ps kisayol
ps genel
bs paylasimlar
Snap
kod deneme editoru
ps arac
pc tarihi
pc kisayollari
pc parcalari
pc sistem
pc program
dersler
yatay menu
dikey menu
404error 1
aramamotoru
bannerarkaplan
konu tanitim barlari
duyurukutulari
2
msn avatar
msn nick
msn kirpma
msn ifade
jumbo ifade
klasik ifade
cilgin ifade
puskullu ifade
su ifade
Link listesi
muzik calar
level game
StarWp
BilgiAracCubugu
Cs1.6Cfg
reklamackapa
support tr
forum giris kodu
merkezanadolulisesi
facebook duvar temizle
koddenemeeditoru
musicplayer
Yeni sayfanın başlığı
like
Coca Cola Kırmızı Kasa Kodu Satın Al
yatay menu
Kodları İlk Önce Not Defterine Kopyalayınız
Animated Menu
<!--- KAYNAK: http://www.catlak-site55.tr.gg ---> -----------------------------------------------------------------Tasarım Üstüne------------------------------------------------------------- <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script> <script src="http://catlaksite.iwoly.com/jquery.easing.1.3.js" type="text/javascript"></script> <script src="http://catlaksite.iwoly.com/animated-menu.js" type="text/javascript"></script> -------------------------------------------------------------Tasarım Üstü Bitiş--------------------------------------------------------------------------- ----------------------------------------------------Menüyü Göstermek İstediginiz Yer---------------------------------------------------------- <ul> <li class="green"> <p><a href="#">MENÜ ADI</a></p> <p class="subtext">Açıklama</p> </li> <li class="yellow"> <p><a href="#">MENÜ ADI</a></p> <p class="subtext">Açıklama</p> </li> <li class="red"> <p><a href="#">MENÜ ADI</a></p> <p class="subtext">Açıklama</p> </li> <li class="blue"> <p><a href="#">MENÜ ADI</a></p> <p class="subtext">Açıklama</p> </li> <li class="purple"> <p><a href="#">MENÜ ADI</a></p> <p class="subtext">Açıklama</p> </li> </ul> --------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş-------------------------------------------------- -----------------------------------------------------------------Css Kodu-------------------------------------------------------------------------------- ul{ margin:0; padding:0; } li{ width:100px; height:50px; float:left; color:#191919; text-align:center; overflow:hidden; } a{ color:#FFF; text-decoration:none; } p{ padding:0px 5px; } .subtext{ padding-top:15px; } .green{background:#6AA63B url('https://img.webme.com/pic/c/catlak-site55/green-item-bg.jpg') top left no-repeat;} .yellow{background:#FBC700 url('https://img.webme.com/pic/c/catlak-site55/yellow-item-bg.jpg') top left no-repeat;} .red{background:#D52100 url('https://img.webme.com/pic/c/catlak-site55/red-item-bg.jpg') top left no-repeat;} .purple{background:#5122B4 url('https://img.webme.com/pic/c/catlak-site55/purple-item-bg.jpg') top left no-repeat;} .blue{background:#0292C0 url('https://img.webme.com/pic/c/catlak-site55/blue-item-bg.jpg') top left no-repeat;} ----------------------------------------------------------------Css Kodu Bitiş----------------------------------------------------------- Eger Css Tasarım Kullanmıyorsanız Css Kodunu <style type="text/css"> Buraya Css Kodu </style> Tagı Arasına Koyup Tasarıma Ekleyin.....
Fixed Menü
<!--- KAYNAK: http://www.catlak-site55.tr.gg ---> -----------------------------------------------------------------Tasarım Üstüne------------------------------------------------------------- <script type="text/javascript" src="http://catlaksite.iwoly.com/jquery-1.3.2.js"></script> <script type="text/javascript"> $(function() { var d=300; $('#navigation a').each(function(){ $(this).stop().animate({ 'marginTop':'-80px' },d+=150); }); $('#navigation > li').hover( function () { $('a',$(this)).stop().animate({ 'marginTop':'-2px' },200); }, function () { $('a',$(this)).stop().animate({ 'marginTop':'-80px' },200); } ); }); </script> -------------------------------------------------------------Tasarım Üstü Bitiş--------------------------------------------------------------------------- ----------------------------------------------------Menüyü Göstermek İstediginiz Yer---------------------------------------------------------- <ul id="navigation"> <li class="h"><a href=""><span>MENÜ ADI</span></a></li> <li class="a"><a href=""><span>MENÜ ADI</span></a></li> <li class="s"><a href=""><span>MENÜ ADI</span></a></li> <li class="p"><a href=""><span>MENÜ ADI</span></a></li> <li class="r"><a href=""><span>MENÜ ADI</span></a></li> <li class="c"><a href=""><span>MENÜ ADI</span></a></li> </ul> --------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş-------------------------------------------------- -----------------------------------------------------------------Css Kodu-------------------------------------------------------------------------------- ul#navigation { position: fixed; margin: 0px; padding: 0px; top: 0px; list-style: none; z-index:999999; width:721px; } ul#navigation li { width: 103px; display:inline; float:left; } ul#navigation li a { display: block; float:left; margin-top: -2px; width: 100px; height: 25px; background-color:#E7F2F9; background-repeat:no-repeat; background-position:50% 10px; border:1px solid #BDDCEF; -moz-border-radius:0px 0px 10px 10px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -khtml-border-bottom-right-radius: 10px; -khtml-border-bottom-left-radius: 10px; text-decoration:none; text-align:center; padding-top:80px; opacity: 0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); } ul#navigation li a:hover{ background-color:#CAE3F2; } ul#navigation li a span{ letter-spacing:2px; font-size:11px; color:#60ACD8; text-shadow: 0 -1px 1px #fff; } ul#navigation .h a{ background-image: url(https://img.webme.com/pic/c/catlak-site55/home.png); } ul#navigation .a a { background-image: url(https://img.webme.com/pic/c/catlak-site55/card.png); } ul#navigation .s a { background-image: url(https://img.webme.com/pic/c/catlak-site55/search.png); } ul#navigation .r a { background-image: url(https://img.webme.com/pic/c/catlak-site55/rss.png); } ul#navigation .p a { background-image: url(https://img.webme.com/pic/c/catlak-site55/card.png); } ul#navigation .c a { background-image: url(https://img.webme.com/pic/c/catlak-site55/maiil.png); } ----------------------------------------------------------------Css Kodu Bitiş----------------------------------------------------------- Eger Css Tasarım Kullanmıyorsanız Css Kodunu <style type="text/css"> Buraya Css Kodu </style> Tagı Arasına Koyup Tasarıma Ekleyin.....
Up and Down Menu
<!--- KAYNAK: http://www.catlak-site55.tr.gg ---> -----------------------------------------------------------------Tasarım Üstüne------------------------------------------------------------- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://catlaksite.iwoly.com/script.js"></script> -------------------------------------------------------------Tasarım Üstü Bitiş--------------------------------------------------------------------------- ----------------------------------------------------Menüyü Göstermek İstediginiz Yer---------------------------------------------------------- --------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş-------------------------------------------------- <ul id="navigationMenu"> <li><a href="#" class="normalMenu">MENÜ ADI</a></li> <li><a href="#" class="normalMenu">MENÜ ADI</a></li> <li><a href="#" class="normalMenu">MENÜ ADI</a></li> <li><a href="#" class="normalMenu">MENÜ ADI</a></li> <li><a href="#" class="normalMenu">MENÜ ADI</a></li> <li><a href="#" class="normalMenu">MENÜ ADI</a></li> </ul> </div> -----------------------------------------------------------------Css Kodu-------------------------------------------------------------------------------- ul{ height:30px; font-family:Arial, Helvetica, sans-serif; font-size:12px; } ul li{ border:1px solid #444444; display:inline-block; float:left; height:25px; list-style-type:none; overflow:hidden; } ul li a, ul li a:hover, ul li a:visited{ text-decoration:none; } .normalMenu, .normalMenu:visited, .hoverMenu, .hoverMenu:visited, .selectedMenu,.selectedMenu:visited { outline:none; padding:5px 10px; display:block; } .hoverMenu,.hoverMenu:visited, .selectedMenu,.selectedMenu:visited { margin-top:-25px; background:url(https://img.webme.com/pic/c/catlak-site55/grey_bg.gif) repeat-x #eeeeee; color:#444444; } .selectedMenu,.selectedMenu:visited { margin:0; } .normalMenu, .normalMenu:visited{ color:white; background:url(https://img.webme.com/pic/c/catlak-site55/dark_bg.gif) repeat-x #444444; } ----------------------------------------------------------------Css Kodu Bitiş----------------------------------------------------------- Eger Css Tasarım Kullanmıyorsanız Css Kodunu <style type="text/css"> Buraya Css Kodu </style> Tagı Arasına Koyup Tasarıma Ekleyin.....
Top Down Menü
<!--- KAYNAK: http://www.catlak-site55.tr.gg ---> -----------------------------------------------------------------Tasarım Üstüne------------------------------------------------------------- <script type="text/javascript" src="http://catlaksite.iwoly.com/jquery-1.2.6.min.js"></script> <script type="text/javascript" src="http://catlaksite.iwoly.com/bgpos.js"></script> <script type="text/javascript"> $(function(){ $('#a a') .css( {backgroundPosition: "-20px 35px"} ) .mouseover(function(){ $(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500}) }) .mouseout(function(){ $(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){ $(this).css({backgroundPosition: "-20px 35px"}) }}) }) $('#b a') .css( {backgroundPosition: "0 0"} ) .mouseover(function(){ $(this).stop().animate({backgroundPosition:"(-150px 0)"}, {duration:500}) }) .mouseout(function(){ $(this).stop().animate({backgroundPosition:"(-300px 0)"}, {duration:200, complete:function(){ $(this).css({backgroundPosition: "0 0"}) }}) }) $('#c a') .css( {backgroundPosition: "0 0"} ) .mouseover(function(){ $(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500}) }) .mouseout(function(){ $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500}) }) $('#d a') .css( {backgroundPosition: "0 0"} ) .mouseover(function(){ $(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500}) }) .mouseout(function(){ $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500}) }) }); </script> -------------------------------------------------------------Tasarım Üstü Bitiş--------------------------------------------------------------------------- ----------------------------------------------------Menüyü Göstermek İstediginiz Yer---------------------------------------------------------- <ul id="a"> <li><a href="LiNK">MENÜ ADI</a></li> <li><a href="LiNK">MENÜ ADI</a></li> <li><a href="LiNK">MENÜ ADI</a></li> <li><a href="LiNK">MENÜ ADI</a></li> <li><a href="LiNK">MENÜ ADI</a></li> </ul> --------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş-------------------------------------------------- -----------------------------------------------------------------Css Kodu-------------------------------------------------------------------------------- h2 {clear:both;padding-top:20px;} ul {list-style:none;margin:0;padding:0;} li {float:left;width:100px;margin:0;padding:0;text-align:center;} li a {display:block;padding:5px 10px;height:100%;color:#FFF;text-decoration:none;border-right:1px solid #FFF;} li a {background:url(https://img.webme.com/pic/c/catlak-site55/sc2.jpg) repeat 0 0;} li a:hover, li a:focus, li a:active {background-position:-150px 0;} #a a {background:url(https://img.webme.com/pic/c/catlak-site55/sc.jpg) repeat -20px 35px;} ----------------------------------------------------------------Css Kodu Bitiş----------------------------------------------------------- Eger Css Tasarım Kullanmıyorsanız Css Kodunu <style type="text/css"> Buraya Css Kodu </style> Tagı Arasına Koyup Tasarıma Ekleyin.....
Right-Left Menü
<!--- KAYNAK: http://www.catlak-site55.tr.gg ---> -----------------------------------------------------------------Tasarım Üstüne------------------------------------------------------------- <script type="text/javascript" src="http://catlaksite.iwoly.com/jquery-1.2.6.min.js"></script> <script type="text/javascript" src="http://catlaksite.iwoly.com/bgpos.js"></script> <script type="text/javascript"> $(function(){ $('#a a') .css( {backgroundPosition: "-20px 35px"} ) .mouseover(function(){ $(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500}) }) .mouseout(function(){ $(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){ $(this).css({backgroundPosition: "-20px 35px"}) }}) }) $('#b a') .css( {backgroundPosition: "0 0"} ) .mouseover(function(){ $(this).stop().animate({backgroundPosition:"(-150px 0)"}, {duration:500}) }) .mouseout(function(){ $(this).stop().animate({backgroundPosition:"(-300px 0)"}, {duration:200, complete:function(){ $(this).css({backgroundPosition: "0 0"}) }}) }) $('#c a') .css( {backgroundPosition: "0 0"} ) .mouseover(function(){ $(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500}) }) .mouseout(function(){ $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500}) }) $('#d a') .css( {backgroundPosition: "0 0"} ) .mouseover(function(){ $(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500}) }) .mouseout(function(){ $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500}) }) }); </script> -------------------------------------------------------------Tasarım Üstü Bitiş--------------------------------------------------------------------------- ----------------------------------------------------Menüyü Göstermek İstediginiz Yer---------------------------------------------------------- <ul id="b"> <li><a href="LiNK">MENÜ ADI</a></li> <li><a href="LiNK">MENÜ ADI</a></li> <li><a href="LiNK">MENÜ ADI</a></li> <li><a href="LiNK">MENÜ ADI</a></li> <li><a href="LiNK">MENÜ ADI</a></li> </ul> --------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş-------------------------------------------------- -----------------------------------------------------------------Css Kodu-------------------------------------------------------------------------------- h2 {clear:both;padding-top:20px;} ul {list-style:none;margin:0;padding:0;} li {float:left;width:100px;margin:0;padding:0;text-align:center;} li a {display:block;padding:5px 10px;height:100%;color:#FFF;text-decoration:none;border-right:1px solid #FFF;} li a {background:url(https://img.webme.com/pic/c/catlak-site55/ds.jpg) repeat 0 0;} li a:hover, li a:focus, li a:active {background-position:-150px 0;} #b a {background:url(https://img.webme.com/pic/c/catlak-site55/ds2.jpg) repeat 0 0;} ----------------------------------------------------------------Css Kodu Bitiş----------------------------------------------------------- Eger Css Tasarım Kullanmıyorsanız Css Kodunu <style type="text/css"> Buraya Css Kodu </style> Tagı Arasına Koyup Tasarıma Ekleyin.....
Flowing Menu
<!--- KAYNAK: http://www.catlak-site55.tr.gg ---> -----------------------------------------------------------------Tasarım Üstüne------------------------------------------------------------- <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script> <script src="http://catlaksite.iwoly.com/jquery.easing.1.3.js" type="text/javascript"></script> <script src="http://catlaksite.iwoly.com/animated-menu.js" type="text/javascript"></script> -------------------------------------------------------------Tasarım Üstü Bitiş--------------------------------------------------------------------------- ----------------------------------------------------Menüyü Göstermek İstediginiz Yer---------------------------------------------------------- <ul> <li class="green"> <p><a href="#">MENÜ ADI</a></p> <p class="subtext">Açıklama</p> </li> <li class="yellow"> <p><a href="#">MENÜ ADI</a></p> <p class="subtext">Açıklama</p> </li> <li class="red"> <p><a href="#">MENÜ ADI</a></p> <p class="subtext">Açıklama</p> </li> <li class="blue"> <p><a href="#">MENÜ ADI</a></p> <p class="subtext">Açıklama</p> </li> <li class="purple"> <p><a href="#">MENÜ ADI</a></p> <p class="subtext">Açıklama</p> </li> </ul> --------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş-------------------------------------------------- -----------------------------------------------------------------Css Kodu-------------------------------------------------------------------------------- ul{ margin:0; padding:0; } li{ width:100px; height:50px; float:left; color:#191919; text-align:center; overflow:hidden; } a{ color:#FFF; text-decoration:none; } p{ padding:0px 5px; } .subtext{ padding-top:15px; } .green{background:#6AA63B url('https://img.webme.com/pic/c/catlak-site55/green-item-bg.jpg') top left no-repeat;} .yellow{background:#FBC700 url('https://img.webme.com/pic/c/catlak-site55/yellow-item-bg.jpg') top left no-repeat;} .red{background:#D52100 url('https://img.webme.com/pic/c/catlak-site55/red-item-bg.jpg') top left no-repeat;} .purple{background:#5122B4 url('https://img.webme.com/pic/c/catlak-site55/purple-item-bg.jpg') top left no-repeat;} .blue{background:#0292C0 url('https://img.webme.com/pic/c/catlak-site55/blue-item-bg.jpg') top left no-repeat;} ----------------------------------------------------------------Css Kodu Bitiş----------------------------------------------------------- Eger Css Tasarım Kullanmıyorsanız Css Kodunu <style type="text/css"> Buraya Css Kodu </style> Tagı Arasına Koyup Tasarıma Ekleyin.....
Drop Down Menu
<!--- KAYNAK: http://www.catlak-site55.tr.gg ---> -----------------------------------------------------------------Tasarım Üstüne------------------------------------------------------------- <script type="text/javascript" src="http://catlaksite.iwoly.com/latest.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav $("ul.topnav li span").click(function() { //When trigger is clicked... //Following events are applied to the subnav itself (moving subnav up and down) $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click $(this).parent().hover(function() { }, function(){ $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up }); //Following events are applied to the trigger (Hover events for the trigger) }).hover(function() { $(this).addClass("subhover"); //On hover over, add class "subhover" }, function(){ //On Hover Out $(this).removeClass("subhover"); //On hover out, remove class "subhover" }); }); </script> -------------------------------------------------------------Tasarım Üstü Bitiş--------------------------------------------------------------------------- ----------------------------------------------------Menüyü Göstermek İstediginiz Yer---------------------------------------------------------- <ul class="topnav"> <li><a href="Link">Menü Adı</a></li> <li> <a href="Link">Menü Adı</a> <ul class="subnav"> <li><a href="Link">Alt Sayfa Adı</a></li> <li><a href="Link">Alt Sayfa Adı</a></li> <li><a href="Link">Alt Sayfa Adı</a></li> <li><a href="Link">Alt Sayfa Adı</a></li> <li><a href="Link">Alt Sayfa Adı</a></li> </ul> </li> <li> <a href="Link">Menü Adı</a> <ul class="subnav"> <li><a href="Link">Alt Sayfa Adı</a></li> <li><a href="Link">Alt Sayfa Adı</a></li> <li><a href="Link">Alt Sayfa Adı</a></li> <li><a href="Link">Alt Sayfa Adı</a></li> </ul> </li> <li><a href="Link">Menü Adı</a></li> <li><a href="Link">Menü Adı</a></li> <li><a href="Link">Menü Adı</a></li> <li><a href="Link">Menü Adı</a></li> </ul> </div> --------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş-------------------------------------------------- -----------------------------------------------------------------Css Kodu-------------------------------------------------------------------------------- #header .disclaimer a { color: #ccc;} ul.topnav { list-style: none; padding: 0 20px; margin: 0; float: left; width: 920px; background: #222; font-size: 1.2em; background: url(http://www.sohtanaka.com/web-design/examples/drop-down-menu/topnav_bg.gif) repeat-x; } ul.topnav li { float: left; margin: 0; padding: 0 15px 0 0; position: relative; /*--Declare X and Y axis base--*/ } ul.topnav li a{ padding: 10px 5px; color: #fff; display: block; text-decoration: none; float: left; } ul.topnav li a:hover{ background: url(https://img.webme.com/pic/c/catlak-site55/topnav_hover.gif) no-repeat center top; } ul.topnav li span { /*--Drop down trigger styles--*/ width: 17px; height: 35px; float: left; background: url(https://img.webme.com/pic/c/catlak-site55/subnav_btn.gif) no-repeat center top; } ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/ ul.topnav li ul.subnav { list-style: none; position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/ left: 0; top: 35px; background: #333; margin: 0; padding: 0; display: none; float: left; width: 170px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; border: 1px solid #111; } ul.topnav li ul.subnav li{ margin: 0; padding: 0; border-top: 1px solid #252525; /*--Create bevel effect--*/ border-bottom: 1px solid #444; /*--Create bevel effect--*/ clear: both; width: 170px; } html ul.topnav li ul.subnav li a { float: left; width: 145px; background: #333 url(https://img.webme.com/pic/c/catlak-site55/dropdown_linkbg.gif) no-repeat 10px center; padding-left: 20px; } html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/ background: #222 url(https://img.webme.com/pic/c/catlak-site55/dropdown_linkbg.gif) no-repeat 10px center; } #header img { margin: 20px 0 10px; } ----------------------------------------------------------------Css Kodu Bitiş----------------------------------------------------------- Eger Css Tasarım Kullanmıyorsanız Css Kodunu <style type="text/css"> Buraya Css Kodu </style> Tagı Arasına Koyup Tasarıma Ekleyin.....
Dock Menu
<!--- KAYNAK: http://www.catlak-site55.tr.gg ---> -----------------------------------------------------------------Tasarım Üstüne------------------------------------------------------------- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://catlaksite.iwoly.com/fisheye-iutil.min.js"></script> <script type="text/javascript" src="http://catlaksite.iwoly.com/dock-example1.js"></script> -------------------------------------------------------------Tasarım Üstü Bitiş--------------------------------------------------------------------------- ----------------------------------------------------MenüyüGöstermek İstediginiz Yer---------------------------------------------------------- <div id="dock"> <div class="dock-container"> <a class="dock-item" href="index.html"><span>Example 1</span><img src="http://catlaksite.iwoly.com/images/home.png" alt="home" /></a> <a class="dock-item" href="example2.html"><span>Example 2</span><img src="http://catlaksite.iwoly.com/images/email.png" alt="contact" /></a> <a class="dock-item" href="example3.html"><span>Example 3</span><img src="http://catlaksite.iwoly.com/images/portfolio.png" alt="portfolio" /></a> <a class="dock-item" href="all-examples.html"><span>All Examples</span><img src="http://catlaksite.iwoly.com/images/music.png" alt="music" /></a> <a class="dock-item" href="#"><span>Video</span><img src="http://catlaksite.iwoly.com/images/video.png" alt="video" /></a> <a class="dock-item" href="#"><span>History</span><img src="http://catlaksite.iwoly.com/images/history.png" alt="history" /></a> <a class="dock-item" href="#"><span>Calendar</span><img src="http://catlaksite.iwoly.com/images/calendar.png" alt="calendar" /></a> <a class="dock-item" href="#"><span>Links</span><img src="http://catlaksite.iwoly.com/images/link.png" alt="links" /></a> <a class="dock-item" href="#"><span>RSS</span><img src="http://catlaksite.iwoly.com/images/rss.png" alt="rss" /></a> <a class="dock-item" href="#"><span>RSS2</span><img src="http://catlaksite.iwoly.com/images/rss2.png" alt="rss" /></a> </div><!-- end div .dock-container --> </div><!-- end div .dock #dock --> --------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş-------------------------------------------------- -----------------------------------------------------------------Css Kodu-------------------------------------------------------------------------------- #dock { top: 0; left: 100px; } a.dock-item { position: relative; float: left; margin-right: 10px; } .dock-item span { display: block; } .stack { top: 0; } .stack ul li { position: relative; } .dock-container { position: relative; top: 50px; height: 50px; padding-left: 20px; } a.dock-item { display: block; width: 50px; position: absolute; bottom: 0; text-align: center; text-decoration: none; color: #333; } .dock-item span { display: none; padding-left: 20px; } .dock-item img { border: 0; margin: 5px 10px 0px; width: 100%; } ----------------------------------------------------------------Css Kodu Bitiş----------------------------------------------------------- Eger Css Tasarım Kullanmıyorsanız Css Kodunu <style type="text/css"> Buraya Css Kodu </style> Tagı Arasına Koyup Tasarıma Ekleyin.....
Rocking Rolling Menu
<!--- KAYNAK: http://www.catlak-site55.tr.gg ---> -----------------------------------------------------------------Tasarım Üstüne------------------------------------------------------------- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="http://catlaksite.iwoly.com/jquery-css-transform.js" type="text/javascript"></script> <script src="http://catlaksite.iwoly.com/jquery-animate-css-rotate-scale.js" type="text/javascript"></script> <script> $('.item').hover( function(){ var $this = $(this); expand($this); }, function(){ var $this = $(this); collapse($this); } ); function expand($elem){ var angle = 0; var t = setInterval(function () { if(angle == 1440){ clearInterval(t); return; } angle += 40; $('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0); },10); $elem.stop().animate({width:'268px'}, 1000) .find('.item_content').fadeIn(400,function(){ $(this).find('p').stop(true,true).fadeIn(600); }); } function collapse($elem){ var angle = 1440; var t = setInterval(function () { if(angle == 0){ clearInterval(t); return; } angle -= 40; $('.link',$elem).stop().animate({rotate: '+=40deg'}, 0); },10); $elem.stop().animate({width:'52px'}, 1000) .find('.item_content').stop(true,true).fadeOut().find('p').stop(true,true).fadeOut(); } </script> -------------------------------------------------------------Tasarım Üstü Bitiş--------------------------------------------------------------------------- ----------------------------------------------------Menüyü Göstermek İstediginiz Yer---------------------------------------------------------- <div class="menu"> <div class="item"> <a class="link icon_mail"></a> <div class="item_content"> <h2>Contact us</h2> <p> <a href="LiNK">eMail</a> <a href="LiNK>Twitter</a> <a href="LiNK">Facebook</a> </p> </div> </div> <div class="item"> <a class="link icon_help"></a> <div class="item_content"> <h2>Help</h2> <p> <a href="#">FAQ</a> <a href="#">Live Support</a> <a href="#">Tickets</a> </p> </div> </div> <div class="item"> <a class="link icon_find"></a> <div class="item_content"> <h2>Search</h2> <p> <input type="text"></input> <a href="">Go</a> </p> </div> </div> <div class="item"> <a class="link icon_photos"></a> <div class="item_content"> <h2>Image Gallery</h2> <p> <a href="#">Categories</a> <a href="#">Archives</a> <a href="#">Featured</a> </p> </div> </div> <div class="item"> <a class="link icon_home"></a> <div class="item_content"> <h2>Start from here</h2> <p> <a href="LiNK">Services</a> <a href="LiNK">Portfolio</a> <a href="LiNK">Pricing</a> </p> </div> </div> </div> --------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş-------------------------------------------------- -----------------------------------------------------------------Css Kodu-------------------------------------------------------------------------------- *{ margin:0; padding:0; background:#f9f9f9; } .menu{ width:800px; height:52px; position:relative; top:0px; left:0px; font-family: "Trebuchet MS", sans-serif; font-size: 16px; font-style: normal; font-weight: bold; text-transform: uppercase; } .item{ position:relative; background-color:#f0f0f0; float:right; width:52px; margin:0px 5px; height:52px; border:2px solid #ddd; -moz-border-radius:30px; -webkit-border-radius:30px; border-radius:30px; -moz-box-shadow:1px 1px 3px #555; -webkit-box-shadow:1px 1px 3px #555; box-shadow:1px 1px 3px #555; cursor:pointer; overflow:hidden; } .link{ left:2px; top:2px; position:absolute; width:48px; height:48px; } .icon_home{ background:transparent url(https://img.webme.com/pic/c/catlak-site55/homeee.png) no-repeat top left; } .icon_mail{ background:transparent url(https://img.webme.com/pic/c/catlak-site55/maiel.png) no-repeat top left; } .icon_help{ background:transparent url(https://img.webme.com/pic/c/catlak-site55/helpp.png) no-repeat top left; } .icon_find{ background:transparent url(https://img.webme.com/pic/c/catlak-site55/find.png) no-repeat top left; } .icon_photos{ background:transparent url(https://img.webme.com/pic/c/catlak-site55/photoss.png) no-repeat top left; } .item_content{ position:absolute; height:52px; width:220px; overflow:hidden; left:56px; top:7px; background:transparent; display:none; } .item_content h2{ color:#aaa; text-shadow: 1px 1px 1px #fff; background-color:transparent; font-size:14px; } .item_content a{ background-color:transparent; float:left; margin-right:7px; margin-top:3px; color:#bbb; text-shadow: 1px 1px 1px #fff; text-decoration:none; font-size:12px; } .item_content a:hover{ color:#0b965b; } .item_content p { background-color:transparent; display:none; } .item_content p input{ border:1px solid #ccc; padding:1px; width:155px; float:left; margin-right:5px; } ----------------------------------------------------------------Css Kodu Bitiş----------------------------------------------------------- Eger Css Tasarım Kullanmıyorsanız Css Kodunu <style type="text/css"> Buraya Css Kodu </style> Tagı Arasına Koyup Tasarıma Ekleyin.....
Kwicks Menu
<!--- KAYNAK: http://www.catlak-site55.tr.gg ---> -----------------------------------------------------------------Tasarım Üstüne------------------------------------------------------------- <script type='text/javascript' src='http://catlaksite.iwoly.com/jquery-1.2.6.min.js'></script> <script type='text/javascript' src='http://catlaksite.iwoly.com/kwicks.js'></script> <script type='text/javascript' src='http://catlaksite.iwoly.com/custom.js'></script> -------------------------------------------------------------Tasarım Üstü Bitiş--------------------------------------------------------------------------- ----------------------------------------------------Menüyü Göstermek İstediginiz Yer---------------------------------------------------------- <ul class="kwicks"> <li id="kwick1"><a href="#">Home</a></li> <li id="kwick2"><a href="#">Contact</a></li> <li id="kwick3"><a href="#">Downloads</a></li> <li id="kwick4"><a href="#">Search</a></li> </ul> --------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş-------------------------------------------------- -----------------------------------------------------------------Css Kodu-------------------------------------------------------------------------------- body{ font-size:0.85em; font-family:Verdana, Arial, Helvetica, sans-serif; } .kwicks { list-style: none; position: relative; margin: 0; padding: 0; background-image:url(https://img.webme.com/pic/c/catlak-site55/no_flicker.jpg); /*some browsers are to slow when aligning the menu items via jQuery and so the background shines through, this prevents this flickering*/ } .kwicks li{ display: block; overflow: hidden; padding: 0; cursor: pointer; float: left; width: 125px; height: 40px; margin-right: 0px; background-image:url(https://img.webme.com/pic/c/catlak-site55/kwicks_sprite.jpg); background-repeat:no-repeat; } .kwicks a{ display:block; height:40px; text-indent:-9999px; outline:none; } #kwick1 { background-position:0px 0px; } #kwick2 { background-position:-200px 0px; } #kwick3 { background-position:-400px 0px; } #kwick4 { background-position:-600px 0px; } #kwick1.active, #kwick1:hover { background-position: 0 bottom; } #kwick2.active, #kwick2:hover{ background-position: -200px bottom; } #kwick3.active, #kwick3:hover { background-position: -400px bottom; } #kwick4.active, #kwick4:hover { background-position: -600px bottom; } #kwick1 a{ background-image:url(https://img.webme.com/pic/c/catlak-site55/end.jpg); background-repeat:no-repeat; background-position: left 0px; } #kwick1 a:hover{ background-position: left -80px; } #kwick4 a{ background-image:url(https://img.webme.com/pic/c/catlak-site55/end.jpg); background-repeat:no-repeat; background-position: right -40px; } #kwick4 a:hover{ background-position: right -120px; } ----------------------------------------------------------------Css Kodu Bitiş----------------------------------------------------------- Eger Css Tasarım Kullanmıyorsanız Css Kodunu <style type="text/css"> Buraya Css Kodu </style> Tagı Arasına Koyup Tasarıma Ekleyin.....
Titreşimli Menu
<!--- KAYNAK: http://www.catlak-site55.tr.gg ---> -----------------------------------------------------------------Tasarım Üstüne------------------------------------------------------------- <script type="text/javascript" src="http://catlaksite.iwoly.com/library.js"></script> <script type="text/javascript" src="http://catlaksite.iwoly.com/ini.js"></script> <script type="text/javascript" src="http://catlaksite.iwoly.com/jQuery.menuEffect.min.js"></script> -------------------------------------------------------------Tasarım Üstü Bitiş--------------------------------------------------------------------------- ----------------------------------------------------Menüyü Göstermek İstediginiz Yer---------------------------------------------------------- <div class="menu" id="menu6"> <ul id="main"> <li> <a href="#">MENÜ ADI</a> </li> <li > <a href="#">MENÜ ADI</a> </li> <li > <a href="#">MENÜ ADI</a> </li> <li > <a href="#">MENÜ ADI</a> </li> <li > <a href="#">MENÜ ADI</a> </li> </ul> </div> --------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş-------------------------------------------------- -----------------------------------------------------------------Css Kodu-------------------------------------------------------------------------------- /* Menu */ .menu{ margin: 0 auto; text-align: center; display:block; width: 600px; height: 60px; } .menu a{ text-decoration:none; list-style:none; color: #FFF; } .menu ul{margin:0px 0 0 0;padding:0px 0px 0px 0px;list-style:none;line-height:normal;} .menu li{float:left;margin:0px 0px 0px 1px;} .menu a{display:block;width:auto;height:28px;padding:8px 20px 0px 20px;background:red; } .menu a:hover {display:block;width:auto;height:28px;padding:8px 20px 0px 20px;background:lime;color: black; } ----------------------------------------------------------------Css Kodu Bitiş----------------------------------------------------------- Eger Css Tasarım Kullanmıyorsanız Css Kodunu <style type="text/css"> Buraya Css Kodu </style> Tagı Arasına Koyup Tasarıma Ekleyin.....
Renk Degiştiren Menu
<!--- KAYNAK: http://www.catlak-site55.tr.gg ---> -----------------------------------------------------------------Tasarım Üstüne------------------------------------------------------------- <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="http://catlaksite.iwoly.com/jquery.color.js"></script> <script type="text/javascript"> // Background color animation $(document).ready(function(){ $(".first a").hover(function() { $(this).stop().animate({ backgroundColor: "#00aadd" }, 600); },function() { $(this).stop().animate({ backgroundColor: "#303030" }, 400); }); // font color animation $(".second a").stop().hover(function() { $(this).stop().animate({ color: "#00eeff" }, 400); },function() { $(this).animate({ color: "#FFFFFF" }, 500); }); // Fun with Color. Differnt font color each time hover // Original code can be found http://davidwalsh.name/jquery-random-color-animate original = $('.third a').css('background-color'); $('.third a').hover(function() { //mouseover var col = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')'; $(this).stop().animate({'backgroundColor': col}, 1000); },function() { //mouseout $(this).stop().animate({'backgroundColor': original},500); }); // Hover Color Does not change back to original $('.fourth a').hover(function() { //mouseover var col = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')'; $(this).animate({'backgroundColor': col},500); },function() { //mouseout $(this).animate({'backgroundColor': col},500); }); }); </script> -------------------------------------------------------------Tasarım Üstü Bitiş--------------------------------------------------------------------------- ----------------------------------------------------Menüyü Göstermek İstediginiz Yer---------------------------------------------------------- <div id="menu" class="fourth"> <ul> <li> <a href="#">MENU ADI</a></li> <li> <a href="#"> MENU ADI</a></li> <li> <a href="#"> MENU ADI</a></li> <li> <a href="#">MENU ADI</a></li> <li> <a href="#">MENU ADI</a></li> </ul> </div> --------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş-------------------------------------------------- -----------------------------------------------------------------Css Kodu-------------------------------------------------------------------------------- #menu{ margin:0 auto; width:600px; height:40px; } #menu ul { margin:0; list-style-type:none; } #menu ul li{ float:left; padding-left:5px; } .fourth a { font: 20px , Georgia; font-style:italic !important; color:#fff; text-decoration:none; background-color:#cc0022; padding:5px; } ----------------------------------------------------------------Css Kodu Bitiş----------------------------------------------------------- Eger Css Tasarım Kullanmıyorsanız Css Kodunu <style type="text/css"> Buraya Css Kodu </style> Tagı Arasına Koyup Tasarıma Ekleyin.....
Fancy Apple Menu
<!--- KAYNAK: http://www.catlak-site55.tr.gg ---> -----------------------------------------------------------------Tasarım Üstüne------------------------------------------------------------- <script type="text/javascript" src="http://catlaksite.iwoly.com/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> -------------------------------------------------------------Tasarım Üstü Bitiş--------------------------------------------------------------------------- ----------------------------------------------------Menüyü Göstermek İstediginiz Yer---------------------------------------------------------- <div class="navigation"> <ul class="menu" id="menu"> <li><span class="ipod"></span><a href="" class="first">Players</a></li> <li><span class="video_camera"></span><a href="">Cameras</a></li> <li><span class="television"></span><a href="">TVs</a></li> <li><span class="monitor"></span><a href="">Screens</a></li> <li><span class="toolbox"></span><a href="">Tools</a></li> <li><span class="telephone"></span><a href="">Phones</a></li> <li><span class="print"></span><a href="" class="last">Printers</a></li> </ul> </div> --------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş-------------------------------------------------- -----------------------------------------------------------------Css Kodu-------------------------------------------------------------------------------- body{ margin:0px; padding:0px; background-color:#f0f0f0; font-family:Arial; } .navigation{ position:relative; margin:0 auto; width:915px; } 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:#7E7E7E url(https://img.webme.com/pic/c/catlak-site55/bgmenu.png) repeat-x top left; padding:15px 0px; width:128px; color:#333333; float:left; text-shadow: 0 1px 1px #fff; text-align:center; border-right:1px solid #a1a1a1; border-left:1px solid #e8e8e8; font-weight:bold; font-size:13px; -moz-box-shadow: 0 1px 3px #555; -webkit-box-shadow: 0 1px 3px #555; } ul.menu li a.hover{ background-image:none; color:#fff; text-shadow: 0 -1px 1px #000; } ul.menu li a.first{ -moz-border-radius:0px 0px 0px 10px; -webkit-border-bottom-left-radius: 10px; border-left:none; } ul.menu li a.last{ -moz-border-radius:0px 0px 10px 0px; -webkit-border-bottom-right-radius: 10px; } ul.menu li span{ width:64px; height:64px; background-repeat:no-repeat; background-color:transparent; position:absolute; z-index:-1; top:80px; cursor:pointer; } ul.menu li span.ipod{ background-image:url(https://img.webme.com/pic/c/catlak-site55/ipodd.png); left:33px; /*128/2 - 32(half of icon) +1 of border*/ } ul.menu li span.video_camera{ background-image:url(https://img.webme.com/pic/c/catlak-site55/video_cameraa.png); left:163px; /* plus 128 + 2px of border*/ } ul.menu li span.television{ background-image:url(https://img.webme.com/pic/c/catlak-site55/televisionn.png); left:293px; } ul.menu li span.monitor{ background-image:url(https://img.webme.com/pic/c/catlak-site55/monitorr.png); left:423px; } ul.menu li span.toolbox{ background-image:url(https://img.webme.com/pic/c/catlak-site55/toolboxx.png); left:553px; } ul.menu li span.telephone{ background-image:url(https://img.webme.com/pic/c/catlak-site55/telephonee.png); left:683px; } ul.menu li span.print{ background-image:url(https://img.webme.com/pic/c/catlak-site55/printt.png); left:813px; } ----------------------------------------------------------------Css Kodu Bitiş----------------------------------------------------------- Eger Css Tasarım Kullanmıyorsanız Css Kodunu <style type="text/css"> Buraya Css Kodu </style> Tagı Arasına Koyup Tasarıma Ekleyin.....
Fancy Top Menu
<!--- KAYNAK: http://www.catlak-site55.tr.gg ---> -----------------------------------------------------------------Tasarım Üstüne------------------------------------------------------------- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js" type="text/javascript"></script> <script type="text/javascript" src="http://catlaksite.iwoly.com/scripts.js"></script> -------------------------------------------------------------Tasarım Üstü Bitiş--------------------------------------------------------------------------- ----------------------------------------------------Menüyü Göstermek İstediginiz Yer---------------------------------------------------------- <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a> <ul> <li><a href="#">About Us</a></li> <li><a href="#">About Them</a></li> <li><a href="#">About You</a> <ul> <li><a href="#">More About Us</a></li> <li><a href="#">More About Them</a></li> <li><a href="#">More About You</a></li> </ul> </li> </ul> </li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a> <ul> <li><a href="#">International</a></li> <li><a href="#">Corporate</a> <ul> <li><a href="#">International</a></li> <li><a href="#">Corporate</a></li> <li><a href="#">American Offices</a></li> </ul> </li> <li><a href="#">American Offices</a></li> </ul> </li> <li><a href="#">Mission Statement</a></li> </ul> --------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş-------------------------------------------------- -----------------------------------------------------------------Css Kodu-------------------------------------------------------------------------------- /* MENU */ #nav { background: #e5e5e5; float: left; margin: 0; padding: 0; border: 1px solid white; border-bottom: none; } #nav li a, #nav li { float: left; } #nav li { list-style: none; position: relative; } #nav li a { padding: 1em 2em; text-decoration: none; color: white; background: #292929; background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px); background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929)); border-right: 1px solid #3c3c3c; border-left: 1px solid #292929; border-bottom: 1px solid #232323; border-top: 1px solid #545454; } #nav li a:hover { background: #2a0d65; background: -moz-linear-gradient(top, #11032e, #2a0d65); background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65)); } /* Submenu */ .hasChildren { position: absolute; width: 5px; height: 5px; background: black; right : 0; bottom: 0; } #nav li ul { display: none; position: absolute; left: 0; top: 100%; padding: 0; margin: 0; } #nav li:hover > ul { display: block; } #nav li ul li, #nav li ul li a { float: none; } #nav li ul li { _display: inline; /* for IE6 */ } #nav li ul li a { width: 150px; display: block; } /* SUBSUB Menu */ #nav li ul li ul { display: none; } #nav li ul li:hover ul { left: 100%; top: 0; } #nav li ul ----------------------------------------------------------------Css Kodu Bitiş----------------------------------------------------------- Eger Css Tasarım Kullanmıyorsanız Css Kodunu <style type="text/css"> Buraya Css Kodu </style> Tagı Arasına Koyup Tasarıma Ekleyin.....
GarageDoor Menu
<!--- KAYNAK: http://www.catlak-site55.tr.gg ---> -----------------------------------------------------------------Tasarım Üstüne------------------------------------------------------------- <script src="http://catlaksite.iwoly.com/modernizr-1.5.min.js"></script> </head> <script> var jQueryScriptOutputted = false; function initJQuery() { if (typeof(jQuery) == 'undefined') { if (!jQueryScriptOutputted) { jQueryScriptOutputted = true; // Primitive way of loading scripts (no library yet) document.write("<scr" + "ipt src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></scr" + "ipt>"); } setTimeout("initJQuery()", 50); } else { // jQuery way of loading scripts $.getScript('http://catlaksite.iwoly.com/jquery.backgroundPosition.js', function() { // Just for demo $("h2").text('This Browser is using a jQuery fallback for this effect.'); // Set CSS in Firefox (Required to use the backgroundPosition js) $('#shutter1').css({backgroundPosition: '0px 0px'}); $('#shutter2').css({backgroundPosition: '0px 0px'}); $('#shutter3').css({backgroundPosition: '0px 0px'}); $('#shutter4').css({backgroundPosition: '0px 0px'}); // Animate the Shutter $("#garagedoor a").hover(function() { $(this).parent().stop().animate({backgroundPosition: '(0px -100px)'}, 500); }, function() { $(this).parent().stop().animate({backgroundPosition: '(0px 0px)'}, 500); }); }); } } if (!Modernizr.csstransitions) { initJQuery(); } </script> -------------------------------------------------------------Tasarım Üstü Bitiş--------------------------------------------------------------------------- ----------------------------------------------------Menüyü Göstermek İstediginiz Yer---------------------------------------------------------- <ul id="garagedoor"> <li id="shutter1"><a href="#1">Link 1</a></li> <li id="shutter2"><a href="#2">Link 2</a></li> <li id="shutter3"><a href="#3">Link 3</a></li> <li id="shutter4"><a href="#4">Link 4</a></li> </ul> --------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş-------------------------------------------------- -----------------------------------------------------------------Css Kodu-------------------------------------------------------------------------------- * { margin: 0; padding: 0; } body { background:#c1c1c1; } a { outline: 0; } h1 { text-align: center; margin: 0 auto; font: bold 32px Helvetica, Arial, Sans-Serif; margin: 70px auto 10px; letter-spacing: -1px; } h2 { text-align: center; padding: 5px; margin: 10px; background: #fff2b6; color: #398138; } #garagedoor { margin: 10px auto; list-style: none; background: url(http://catlaksite.iwoly.com/images/menu-bg.jpg) no-repeat; width: 800px; overflow: auto; } #garagedoor li { width: 200px; height: 100px; display: block; float: left; } /* Modernizer Enabled */ .csstransitions #garagedoor li { -webkit-transition: background-position 0.6s ease; -moz-transition: background-position 0.6s ease; -o-transition-property: background-position 0.6s ease; } .csstransitions #garagedoor li:hover { background-position: 0 -100px !important; } #garagedoor li#shutter1 { background: url(http://catlaksite.iwoly.com/images/shutter-africanplains.jpg) 0 0 no-repeat; } #garagedoor li#shutter2 { background: url(http://catlaksite.iwoly.com/images/shutter-reptiles.jpg) 0 0 no-repeat; } #garagedoor li#shutter3 { background: url(http://catlaksite.iwoly.com/images/shutter-aviary.jpg) 0 0 no-repeat; } #garagedoor li#shutter4 { background: url(http://catlaksite.iwoly.com/images/shutter-arcticzone.jpg) 0 0 no-repeat; } #garagedoor a { width: 200px; height: 100px; display: block; background: url(http://catlaksite.iwoly.com/images/window.png) no-repeat bottom center; text-indent: -9999px; } ----------------------------------------------------------------Css Kodu Bitiş----------------------------------------------------------- Eger Css Tasarım Kullanmıyorsanız Css Kodunu <style type="text/css"> Buraya Css Kodu </style> Tagı Arasına Koyup Tasarıma Ekleyin.....
Menü Sahibi Catlak-Site55
Reklam
Son Eklenen Konular
Eklenecek
Eklenecek
Eklenecek
Eklenecek
Eklenecek
Eklenecek
Facebook
Dostlarım
Bu web sitesi ücretsiz olarak
Bedava-Sitem.com
ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol