Cx-Software | Güncel Program Sitesi - Jquery Yatay (Horizontal)Menüler

Diger Menuler Düzenleniyor Düzenlemesi Biten Menüyü Ekliyecegim Menülerin Düzenlenmesi Bana Aittir...Hiç bir Şekilde Sitenizde Paylaşım Amaçlı Kullanılamaz....

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.....
Hazırlanıyor Reklamlara Tıklamaya Devam:)	Hazırlanıyor Reklamlara Tıklamaya Devam:)	Hazırlanıyor Reklamlara Tıklamaya Devam:)

Paylaştıklarımız Payşalaşacaklarımızın Teminatıdır...