HTML KODLARI | JAVA KODLARI | PHOTOSHOP | MESENGER |Tr.Gg | ViDEOLU DERSLER | HTML | JAVA | CSS | Tr.Gg

11

   Menülerin Düzenlenmesi Hazırlanması Bana Aittir Hiç Bir Şekilde Paylaşım Amaçlı Kullanılamaz...Bu Paylaşım Zaman Zaman Güncellenip Farklı Ve Güzel Gördügüm Menüleri Eklemeye Devam Edecegim...

Aç-Kapa Menü <!--- KAYNAK: http://www.catlak-site55.tr.gg ---> -----------------------------------------------------------------Tasarım Üstüne------------------------------------------------------------- -------------------------------------------------------------Tasarım Üstü Bitiş--------------------------------------------------------------------------- ----------------------------------------------------Menüyü Göstermek İstediginiz Yer---------------------------------------------------------- <div class="box"> <ul id="tabMenu"> <li class="posts selected"></li> <li class="comments"></li> <li class="category"></li> <li class="famous"></li> <li class="random"></li> </ul> <div class="boxTop"></div> <div class="boxBody"> <div id="posts" class="show"> <ul> <li><a href="LİNK">Sayfa Adı</a></li> <li><a href="LİNK">Sayfa Adı</a></li> <li><a href="LİNK">Sayfa Adı</a></li> <li><a href="LİNK">Sayfa Adı</a></li> <li><a href="LİNK">Sayfa Adı</a></li> <li><a href="LİNK">Sayfa Adı</a></li> <li><a href="LİNK">Sayfa Adı</a></li> <li><a href="LİNK">Sayfa Adı</a></li> <li><a href="LİNK">Sayfa Adı</a></li> <li><a href="LİNK">Sayfa Adı</a></li> <li><a href="LİNK">Sayfa Adı</a></li> </ul> </div> <div id="category"> <ul> <li><a href="LİNK">Sayfa Adı</a></li> <li><a href="LİNK">Sayfa Adı</a></li> <li><a href="LİNK">Sayfa Adı</a></li> <li><a href="LİNK">Sayfa Adı</a></li> </ul> </div> <div id="category"> <ul> <li><a href="LİNK">Sayfa Adı</a></li> <li><a href="LİNK">Sayfa Adı</a></li> <li><a href="LİNK">Sayfa Adı</a></li> <li><a href="LİNK">Sayfa Adı</a></li> <li><a href="LİNK">Sayfa Adı</a></li> <li><a href="LİNK">Sayfa Adı</a></li> <li><a href="LİNK">Sayfa Adı</a></li> <li><a href="LİNK">Sayfa Adı</a></li> <li><a href="LİNK">Sayfa Adı</a></li> <li><a href="LİNK">Sayfa Adı</a></li> <li><a href="LİNK">Sayfa Adı</a></li> </ul> </div> <div id="famous"> <ul> <li>Simple JQuery Modal Window Tutorial.</li> <li>Create a Simple CSS + Javascript Tooltip with jQuery.</li> <li>Navigation List menu + Jquery Animate Effect Tutorial.</li> <li class="last">Exclusive RSS Icons from Queness.</li> </ul> </div> <div id="random"> <ul> <li>50 Monochromatic Website Designs.</li> <li>Breadcrumbs In Web Design: Examples And Best Practices.</li> <li>Simple JQuery Modal Window Tutorial.</li> <li>Navigation List menu + Jquery Animate Effect Tutorial.</li> <li>Create a Simple CSS + Javascript Tooltip with jQuery.</li> <li>Exclusive RSS Icons from Queness.</li> <li>New Smashing Freebies For Designers and Bloggers.</li> <li class="last">Food Plates and Creative Dishware Designs.</li> </ul> </div> </div> <div class="boxBottom"></div> </div> --------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş-------------------------------------------------- -----------------------------------------------------------------Css Kodu-------------------------------------------------------------------------------- body{font-family:arial;font-size:10px;color:#ccc;} a {color:#ccc;text-decoration:none;} a:hover {color:#ccc;text-decoration:none} #tabMenu {margin:0;padding:0 0 0 15px;list-style:none;} #tabMenu li {float:left;height:32px;width:39px;cursor:pointer;cursor:hand} li.comments {background:url(http://catlaksite.iwoly.com/images/tabComment.gif) no-repeat 0 -32px;} li.posts {background:url(http://catlaksite.iwoly.com/images/tabStar.gif) no-repeat 0 -32px;} li.category {background:url(http://catlaksite.iwoly.com/images/tabFolder.gif) no-repeat 0 -32px;} li.famous {background:url(http://catlaksite.iwoly.com/images/tabHeart.gif) no-repeat 0 -32px;} li.random {background:url(http://catlaksite.iwoly.com/images/tabRandom.gif) no-repeat 0 -32px;} li.mouseover {background-position:0 0;} li.mouseout {background-position:0 -32px;} li.selected {background-position:0 0;} .box {width:227px} .boxTop {background:url(http://catlaksite.iwoly.com/images/boxTop.gif) no-repeat;height:11px;clear:both} *html .boxTop {margin-bottom:-2px;} .boxBody {background-color:#282828;} .boxBottom {background:url(http://catlaksite.iwoly.com/images/boxBottom.gif) no-repeat;height:11px;} .boxBody div {display:none;} .boxBody div.show {display:block;} .boxBody #category a {display:block;} .boxBody div ul {margin:0 10px 0 25px;padding:0;width:190px;list-style-image:url(http://catlaksite.iwoly.com/images/arrow.gif)} *html .boxBody div ul {margin-left:10px;padding-left:15px;} .boxBody div li {border-bottom:1px dotted #8e8e8e; padding:4px 0;cursor:hand;cursor:pointer;} .boxBody div ul li.last {border-bottom:none} .boxBody div li span {font-size:8px;font-style:italic; color:#888;} ----------------------------------------------------------------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.....	Post Slide 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.4.2/jquery.min.js"></script> <script> $(function() { /** * the list of posts */ var $list = $('#rp_list ul'); /** * number of related posts */ var elems_cnt = $list.children().length; /** * show the first set of posts. * 200 is the initial left margin for the list elements */ load(200); function load(initial){ $list.find('li').hide().andSelf().find('div').css('margin-left',-initial+'px'); var loaded = 0; //show 5 random posts from all the ones in the list. //Make sure not to repeat while(loaded < 5){ var r = Math.floor(Math.random()*elems_cnt); var $elem = $list.find('li:nth-child('+ (r+1) +')'); if($elem.is(':visible')) continue; else $elem.show(); ++loaded; } //animate them var d = 200; $list.find('li:visible div').each(function(){ $(this).stop().animate({ 'marginLeft':'-50px' },d += 100); }); } /** * hovering over the list elements makes them slide out */ $list.find('li:visible').live('mouseenter',function () { $(this).find('div').stop().animate({ 'marginLeft':'-220px' },200); }).live('mouseleave',function () { $(this).find('div').stop().animate({ 'marginLeft':'-50px' },200); }); /** * when clicking the shuffle button, * show 5 random posts */ $('#rp_shuffle').unbind('click') .bind('click',shuffle) .stop() .animate({'margin-left':'-18px'},700); function shuffle(){ $list.find('li:visible div').stop().animate({ 'marginLeft':'60px' },200,function(){ load(-60); }); } }); </script> -------------------------------------------------------------Tasarım Üstü Bitiş--------------------------------------------------------------------------- ----------------------------------------------------Menüyü Göstermek İstediginiz Yer---------------------------------------------------------- div id="rp_list" class="rp_list"> <ul> <li> <div> <img src="https://img.webme.com/pic/c/catlak-site55/grsll2.png" alt=""/> <span class="rp_title">BURAYA YAZI YAZ</span> <span class="rp_links"> <a href="BURAYA LİNK">indir</a> <a href="BURAYA LİNK">Demo</a> </span> </div> </li> <li> <div> <img src="https://img.webme.com/pic/c/catlak-site55/grsll.png" alt=""/> <span class="rp_title">BURAYA YAZI YAZ</span> <span class="rp_links"> <a href="BURAYA LİNK">indir</a> <a href="BURAYA LİNK">Demo</a> </span> </div> </li> <li> <div> <img src="https://img.webme.com/pic/c/catlak-site55/grsll2.png" alt=""/> <span class="rp_title">BURAYA YAZI YAZ</span> <span class="rp_links"> <a href="BURAYA LİNK">indir</a> <a href="BURAYA LİNK">Demo</a> </span> </div> </li> <li> <div> <img src="https://img.webme.com/pic/c/catlak-site55/grsll.png" alt=""/> <span class="rp_title">BURAYA YAZI YAZ</span> <span class="rp_links"> <a href="BURAYA LİNK">indir</a> <a href="BURAYA LİNK">Demo</a> </span> </div> </li> <li> <div> <img src="https://img.webme.com/pic/c/catlak-site55/grsll.png" alt=""/> <span class="rp_title">BURAYA YAZI YAZ</span> <span class="rp_links"> <a href="BURAYA LİNK">indir</a> <a href="BURAYA LİNK">Demo</a> </span> </div> </li> <li> <div> <img src="https://img.webme.com/pic/c/catlak-site55/grsll.png" alt=""/> <span class="rp_title">BURAYA YAZI YAZ</span> <span class="rp_links"> <a href="BURAYA LİNK">indir</a> <a href="BURAYA LİNK">Demo</a> </span> </div> </li> <li> <div> <img src="https://img.webme.com/pic/c/catlak-site55/grsll.png" alt=""/> <span class="rp_title">BURAYA YAZI YAZ</span> <span class="rp_links"> <a href="BURAYA LİNK">indir</a> <a href="BURAYA LİNK">Demo</a> </span> </div> </li> <li> <div> <img src="https://img.webme.com/pic/c/catlak-site55/grsll.png" alt=""/> <span class="rp_title">Awesome Mobile Image Gallery Web App</span> <span class="rp_links"> <a href="http://tympanus.net/codrops/2010/05/27/awesome-mobile-image-gallery-web-app/">Article</a> <a href="http://tympanus.net/Tutorials/WonderwallMobileGallery/">Demo</a> </span> </div> </li> <li> <div> <img src="https://img.webme.com/pic/c/catlak-site55/grsll.png" alt=""/> <span class="rp_title">BURAYA YAZI YAZ</span> <span class="rp_links"> <a href="BURAYA LİNK">indir</a> <a href="BURAYA LİNK">Demo</a> </span> </div> </li> <li> <div> <img src="https://img.webme.com/pic/c/catlak-site55/grsll2.png" alt=""/> <span class="rp_title">BURAYA YAZI YAZ</span> <span class="rp_links"> <a href="BURAYA LİNK">indir</a> <a href="BURAYA LİNK">Demo</a> </span> </div> </li> <li> <div> <img src="https://img.webme.com/pic/c/catlak-site55/grsll2.png" alt=""/> <span class="rp_title">BURAYA YAZI YAZ</span> <span class="rp_links"> <a href="BURAYA LİNK">indir</a> <a href="BURAYA LİNK">Demo</a> </span> </div> </li> <li> <div> <img src="https://img.webme.com/pic/c/catlak-site55/grsll2.png" alt=""/> <span class="rp_title">BURAYA YAZI YAZ</span> <span class="rp_links"> <a href="BURAYA LİNK">indir</a> <a href="BURAYA LİNK">Demo</a> </span> </div> </li> <li> <div> <img src="https://img.webme.com/pic/c/catlak-site55/grsll2.png" alt=""/> <span class="rp_title">BURAYA YAZI YAZ</span> <span class="rp_links"> <a href="BURAYA LİNK">indir</a> <a href="BURAYA LİNK">Demo</a> </span> </div> </li> <li> <div> <img src="https://img.webme.com/pic/c/catlak-site55/grsll.png" alt=""/> <span class="rp_title">BURAYA YAZI YAZ</span> <span class="rp_links"> <a href="BURAYA LİNK">indir</a> <a href="BURAYA LİNK">Demo</a> </span> </div> </li> <li> <div> <img src="https://img.webme.com/pic/c/catlak-site55/grsll.png" alt=""/> <span class="rp_title">BURAYA YAZI YAZ</span> <span class="rp_links"> <a href="BURAYA LİNK">indir</a> <a href="BURAYA LİNK">Demo</a> </span> </div> </li> <li> <div> <img src="https://img.webme.com/pic/c/catlak-site55/grsll2.png" alt=""/> <span class="rp_title">BURAYA YAZI YAZ</span> <span class="rp_links"> <a href="BURAYA LİNK">indir</a> <a href="BURAYA LİNK">Demo</a> </span> </div> </li> <li> <div> <img src="https://img.webme.com/pic/c/catlak-site55/grsll.png" alt=""/> <span class="rp_title">BURAYA YAZI YAZ</span> <span class="rp_links"> <a href="BURAYA LİNK">indir</a> <a href="BURAYA LİNK">Demo</a> </span> </div> </li> <li> <div> <img src="https://img.webme.com/pic/c/catlak-site55/grsll2.png" alt=""/> <span class="rp_title">BURAYA YAZI YAZ</span> <span class="rp_links"> <a href="BURAYA LİNK">indir</a> <a href="BURAYA LİNK">Demo</a> </span> </div> </li> <li> <div> <img src="https://img.webme.com/pic/c/catlak-site55/grsll.png" alt=""/> <span class="rp_title">BURAYA YAZI YAZ</span> <span class="rp_links"> <a href="BURAYA LİNK">indir</a> <a href="BURAYA LİNK">Demo</a> </span> </div> </li> <li> <div> <img src="https://img.webme.com/pic/c/catlak-site55/grsll.png" alt=""/> <span class="rp_title">BURAYA YAZI YAZ</span> <span class="rp_links"> <a href="BURAYA LİNK">indir</a> <a href="BURAYA LİNK">Demo</a> </span> </div> </li> </ul> <span id="rp_shuffle" class="rp_shuffle"> </span> </div> --------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş-------------------------------------------------- -----------------------------------------------------------------Css Kodu-------------------------------------------------------------------------------- .rp_list { font-family:Verdana, Helvetica, sans-serif; position:fixed; right:-220px; top:40px; margin:0; padding:0; } span.rp_shuffle{ background:#222 url(https://img.webme.com/pic/c/catlak-site55/shuffle.png) no-repeat 10px 50%; width:28px; height:14px; display:block; margin:10px 0px 0px 20px; cursor:pointer; padding:4px; border:1px solid #000; -moz-border-radius:5px 0px 0px 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-top-left-radius: 5px; } .rp_list ul{ margin:0; padding:0; list-style:none; } .rp_list ul li{ width: 240px; margin-bottom:5px; display:none; } .rp_list ul li div{ display: block; line-height:15px; width: 240px; height: 80px; background:#333; border:1px solid #000; -moz-border-radius:5px 0px 0px 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-top-left-radius: 5px; } .rp_list ul li div img{ width:70px; border:none; float:left; margin:4px 10px 0px 4px; border:1px solid #111; -moz-box-shadow:1px 1px 3px #000; -webkit-box-shadow:1px 1px 3px #000; box-shadow:1px 1px 3px #000; } span.rp_title{ font-size:11px; color:#ddd; height:46px; margin:4px 0px 0px 20px; display:block; text-shadow:1px 1px 1px #000; padding-top:3px; background:#222; -moz-box-shadow:0px 0px 5px #000 inset; -webkit-box-shadow:0px 0px 5px #000 inset; box-shadow:0px 0px 5px #000 inset; } span.rp_links{ width:195px; height:8px; padding-top:2px; display:block; margin-left:42px; } span.rp_links a{ background: #222 url(https://img.webme.com/pic/c/catlak-site55/bgbutton.png) repeat-x; padding: 2px 18px; font-size:10px; color: #fff; text-decoration: none; line-height: 1; -moz-box-shadow: 0 1px 3px #000; -webkit-box-shadow: 0 1px 3px #000; box-shadow:0 1px 3px #000; text-shadow: 0 -1px 1px #222; cursor: pointer; outline:none; } span.rp_links a:hover{ background-color:#000; color:#fff; } ----------------------------------------------------------------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.....	Slide Out 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() { $('#navigation a').stop().animate({'marginLeft':'-85px'},1000); $('#navigation > li').hover( function () { $('a',$(this)).stop().animate({'marginLeft':'-2px'},200); }, function () { $('a',$(this)).stop().animate({'marginLeft':'-85px'},200); } ); }); </script> -------------------------------------------------------------Tasarım Üstü Bitiş--------------------------------------------------------------------------- ----------------------------------------------------Menüyü Göstermek İstediginiz Yer---------------------------------------------------------- <ul id="navigation"> <li class="home"><a href="Buraya Link" title="Home"></a></li> <li class="about"><a href="Buraya Link" title="About"></a></li> <li class="search"><a href="Buraya Link" title="Search"></a></li> <li class="photos"><a href="Buraya Link" title="Photos"></a></li> <li class="rssfeed"><a href="Buraya Link" title="Rss Feed"></a></li> <li class="contact"><a href="" title="Contact"></a></li> </ul> </div> --------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş-------------------------------------------------- -----------------------------------------------------------------Css Kodu-------------------------------------------------------------------------------- ul#navigation { position: fixed; margin: 0px; padding: 0px; top: 10px; left: 0px; list-style: none; z-index:9999; } ul#navigation li { width: 100px; } ul#navigation li a { display: block; margin-left: -2px; width: 100px; height: 70px; background-color:#CFCFCF; background-repeat:no-repeat; background-position:center center; border:1px solid #AFAFAF; -moz-border-radius:0px 10px 10px 0px; -webkit-border-bottom-right-radius: 10px; -webkit-border-top-right-radius: 10px; -khtml-border-bottom-right-radius: 10px; -khtml-border-top-right-radius: 10px; /*-moz-box-shadow: 0px 4px 3px #000; -webkit-box-shadow: 0px 4px 3px #000; */ opacity: 0.6; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60); } ul#navigation .home a{ background-image: url(https://img.webme.com/pic/c/catlak-site55/home.png); } ul#navigation .about a { background-image: url(https://img.webme.com/pic/c/catlak-site55/card.png); } ul#navigation .search a { background-image: url(https://img.webme.com/pic/c/catlak-site55/search.png); } ul#navigation .rssfeed a { background-image: url(https://img.webme.com/pic/c/catlak-site55/rss.png); } ul#navigation .photos a { background-image: url(https://img.webme.com/pic/c/catlak-site55/camera.png); } ul#navigation .contact 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.....
Sliding Menu <!--- KAYNAK: http://www.catlak-site55.tr.gg ---> -----------------------------------------------------------------Tasarım Üstüne------------------------------------------------------------- <script type="text/javascript" src="http://catlaksite.iwoly.com/catlakyesil.js"></script> <script type="text/javascript" src="http://catlaksite.iwoly.com/catlakyesil2.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#nav a') .css( {backgroundPosition: "6px 6px"} ) .mouseover(function(){ $(this).stop() .animate( {backgroundPosition:"(-25px 6px)"}, {duration:200}) .animate( {backgroundPosition:"(-25px -23px)"}, {duration:5}) .animate( {backgroundPosition:"(6px -23px)"}, {duration:200}) }) .mouseout(function(){ $(this).stop() .animate( {backgroundPosition:"(-25px -23px)"}, {duration:200}) .animate( {backgroundPosition:"(-25px 6px)"}, {duration:5}) .animate( {backgroundPosition:"(6px 6px)"}, {duration:200}) }) }); </script> -------------------------------------------------------------Tasarım Üstü Bitiş--------------------------------------------------------------------------- ----------------------------------------------------Menüyü Göstermek İstediginiz Yer---------------------------------------------------------- <div id="nav-wrapper"> <ul id="nav"> <li><a href="Link">Ana Sayfa</a></li> <li><a href="Link">Z.Defteri</a></li> <li><a href="Link">Forum</a></li> <li><a href="Link">Html Kodları</a></li> <li><a href="Link">Topliste</a></li> <li><a href="Link">Photoshop</a></li> <li><a href="Link">İletişim</a></li> </ul> </div> --------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş-------------------------------------------------- #nav-wrapper { padding: 10px; width: 200px; background: #FFF; margin: 0 auto; border: 10px solid #FFF; -moz-border-radius: 10px; -webkit-border-radius: 10px; } ul#nav { border-top: 1px solid #dfdfdf; } ul#nav li { display: inline; } ul#nav li a { display: block; padding: 5px 10px 5px 27px; color: #556565; text-decoration: none; border-bottom: 1px solid #dfdfdf; background: url(https://img.webme.com/pic/c/catlak-site55/nav-bg.gif) no-repeat 6px 6px; } ol, ul { list-style: none; margin: 0; padding: 0; } ul#nav li a:hover { color: #2b5f1a; background-color: #e5f3d7; } -----------------------------------------------------------------Css Kodu-------------------------------------------------------------------------------- ----------------------------------------------------------------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.....	Flyout Menu <!--- KAYNAK: http://www.catlak-site55.tr.gg ---> -----------------------------------------------------------------Tasarım Üstüne------------------------------------------------------------- <script type="text/javascript" src="http://catlaksite.iwoly.com/flyout.js"></script> -------------------------------------------------------------Tasarım Üstü Bitiş--------------------------------------------------------------------------- ----------------------------------------------------Menüyü Göstermek İstediginiz Yer---------------------------------------------------------- <dl class="dropdown"> <dt id="one-ddheader" class="upperdd" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">SAYFA ADI</dt> <dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)"> <ul> <li><a href="#" class="underline">ALT SAYFA ADI</a></li> <li><a href="#" class="underline">ALT SAYFA ADI</a></li> <li><a href="#">ALT SAYFA ADI</a></li> </ul> </dd> </dl> <dl class="dropdown"> <dt id="two-ddheader" class="upperdd" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)">SAYFA ADI</dt> <dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)"> <ul> <li><a href="#" class="underline">ALT SAYFA ADI</a></li> <li><a href="#" class="underline">ALT SAYFA ADI</a></li> <li><a href="#" class="underline">ALT SAYFA ADI</a></li> <li><a href="#" class="underline">ALT SAYFA ADI</a></li> <li><a href="#">ALT SAYFA ADI</a></li> </ul> </dd> </dl> <dl class="dropdown"> <dt id="three-ddheader" class="upperdd">SAYFA ADI</dt> </dl> <dl class="dropdown"> <dt id="four-ddheader" onmouseover="ddMenu('four',1)" onmouseout="ddMenu('four',-1)">SAYFA ADI</dt> <dd id="four-ddcontent" onmouseover="cancelHide('four')" onmouseout="ddMenu('four',-1)"> <ul> <li><a href="#" class="underline">ALT SAYFA ADI</a></li> <li><a href="#">ALT SAYFA ADI</a></li> </ul> </dd> </dl> </div> --------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş-------------------------------------------------- -----------------------------------------------------------------Css Kodu-------------------------------------------------------------------------------- * {padding:0; margin:0} .dropdown {display:block; position:relative} .dropdown dt {width:188px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; cursor:pointer; background:url(images/header.gif)} .dropdown .upperdd {border-bottom:none} .dropdown dt:hover {background:url(images/header_over.gif)} .dropdown dd {position:absolute; top:0; overflow:hidden; width:208px; display:none; background:#fff; opacity:0} .dropdown ul {width:204px; border:2px solid #9ac1c9; list-style:none} .dropdown li {display:inline} .dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#333; text-decoration:none; background:#eaf0f2; width:194px} .dropdown a:hover {background:#d9e1e4; color:#000} .dropdown .underline {border-bottom:1px solid #b9d6dc} ----------------------------------------------------------------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.....	Slide Menu <!--- KAYNAK: http://www.catlak-site55.tr.gg ---> -----------------------------------------------------------------Tasarım Üstüne------------------------------------------------------------- <script src="http://catlaksite.iwoly.com/mn-jquery.js"></script> <script src="http://catlaksite.iwoly.com/mn-jquery.slidemenu.js"></script> <script language="javascript"> $(function() { $(".list").slideMenu(); }); </script> -------------------------------------------------------------Tasarım Üstü Bitiş--------------------------------------------------------------------------- ----------------------------------------------------Menüyü Göstermek İstediginiz Yer---------------------------------------------------------- <ul class="list"> <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> <li><a href="#">MENU ADI</a></li> <li><a href="#">MENU ADI</a></li> </ul> --------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş-------------------------------------------------- -----------------------------------------------------------------Css Kodu-------------------------------------------------------------------------------- * {margin: 0; padding: 0;} body { margin: 0; padding: 0; font-family : verdana; font-size : 12px; } .list{ margin:20 auto; overflow:hidden; width:200px; background : #1F6A98; } #active{ border-top: 1px solid #399CD7; border-right: 1px solid #399CD7; border-bottom: 1px solid #247CB0; border-left: 1px solid #247CB0; cursor : pointer; color : #F5F5F5; display : block; width : 100%; background : #1B5B83; } .list li a{ list-style:none; border-top: 1px solid #2C94D1; border-right: 1px solid #2C94D1; border-bottom: 1px solid #247CB0; border-left: 1px solid #247CB0; padding : 5px; margin : 2px; cursor : pointer; color : #C5C5CB; font-weight : bold; text-decoration : none; } .list li a{ color : #C5C5CB; display : block; 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.....
Sol Açılır Menu <!--- KAYNAK: http://www.catlak-site55.tr.gg ---> -----------------------------------------------------------------Tasarım Üstüne------------------------------------------------------------- <script language=javascript> NS6 = (document.getElementById&&!document.all) IE = (document.all) NS = (navigator.appName=="Netscape" && navigator.appVersion.charAt(0)=="4") moving=setTimeout('null',1); lastY = 0; function moveOut() { if ((NS6 && parseInt(ssm.left)<0)||(IE && ssm.style.pixelLeft<0)||(NS && document.ssm.left<0)) { clearTimeout(moving);moving = setTimeout('moveOut()', slideSpeed) if (NS6){ ssm.left = parseInt(ssm.left)+10+"px"; } if (IE){ ssm.style.pixelLeft += 10; } if (NS){ document.ssm.left += 10; } } else { clearTimeout(moving); moving=setTimeout('null',1); } } function moveBack(){ clearTimeout(moving); moving = setTimeout('moveBack1()', waitTime); } function moveBack1() { if ((NS6 && parseInt(ssm.left)>(-menuWidth))||(IE && ssm.style.pixelLeft>(-menuWidth))||(NS && document.ssm.left>(-menuWidth))) { clearTimeout(moving);moving = setTimeout('moveBack1()', slideSpeed); if (NS6){ ssm.left = parseInt(ssm.left)-10+"px"; } if (IE){ ssm.style.pixelLeft -= 10; } if (NS){ document.ssm.left -= 10; } } else { clearTimeout(moving);moving=setTimeout('null',1) } } function makeStatic() { if (NS6) { winY = window.pageYOffset; } if (IE) { winY = document.body.scrollTop;var NM=document.all('ssm').style } if (NS){ winY = window.pageYOffset;var NM=document.ssm } if (NS6||IE||NS){ if (winY!=lastY&&winY>YOffset-staticYOffset){ smooth = .2 * (winY - lastY - YOffset + staticYOffset); } else if(YOffset-staticYOffset+lastY>YOffset-staticYOffset) { smooth = .2 * (winY - lastY); } else { smooth=0 } if(smooth > 0) smooth = Math.ceil(smooth); else smooth = Math.floor(smooth); if (NS6) ssm.top=parseInt(ssm.top)+smooth+"px" if (IE) NM.pixelTop+=smooth; if (NS) NM.top+=smooth; lastY = lastY+smooth; setTimeout('makeStatic()', 1) } } function initSlide() { if (NS6){ ssm=document.getElementById("ssm").style ssm.visibility="visible"; ssm.left = -menuWidth + "px"; ; } else if (IE) { ssm.style.visibility = "visible" ssm.style.pixelLeft = -menuWidth; } else if (NS) { document.ssm.left = -menuWidth; document.ssm.visibility = "show" } if (menuIsStatic=="no") makeStatic(); } function startMenu(menuHeader, barText) { if (IE||NS6) { document.write('<div id="ssm" style="visibility:hidden;position : absolute ;left : 0px ;top : '+YOffset+' ;Z-Index : 20;width:1px" onmouseover="moveOut()" onmouseout="moveBack()">') } if (NS) { document.write('<span class="tablea" layer visibility="hide" top="'+YOffset+'" name="ssm" left="0" onmouseover="moveOut()" onmouseout="moveBack()">') } if (NS6){ document.write('<table border="0" cellpadding="0" cellspacing="0" width="'+(menuWidth+barWidth+2)+'" span class="tablea"><tr><td>') } tempBar="" for (i=0;i<barText.length;i++) { tempBar+=barText.substring(i, i+1)+"<br>" } document.write('<table cellpadding="0" cellspacing="2" width="'+(menuWidth+barWidth+2)+'" border="0" class="tableinborder"><tr><td class="tabletitle" width="'+(menuWidth-1)+'" height="6" align="center" valign="center"> <span class="smallfont"><b>'+menuHeader+'</b></span></td><td align="center" rowspan="100" width="'+barWidth+'" span class="tableb" valign="center"><p align="center"><span class="smallfont"><b>'+tempBar+'</b></span></p></td></tr>') } function addItem(text, link, target) { if ( !target ) { target = '_self'; } else { target = '_blank'; } document.write('<tr>'); document.write('<td span class="tablea" width="'+(menuWidth-1)+'">'); document.write('<ilayer><layer width="100%" align="center">'); document.write('<div align="center">'); document.write('<a href="'+link+'" class="ssmItems" target='+target+'>'); document.write('<span class="smallfont"> '+text+'</span></div></a>'); document.write('</layer></ilayer></td></tr>'); } function addHdr(text) { document.write('<tr><td span class="tabletitle" height="6" align="center" valign="center" width="'+(menuWidth-1)+'"> '); document.write('<span class="smallfont"><b>'+text+'</b></span></td></tr>') } function endMenu() { document.write('</table>') if (NS6){document.write('</td></tr></table>')} if (IE||NS6) {document.write('</div>')} if (NS) {document.write('</layer>')} if (NS6||IE||NS) setTimeout('initSlide();', 100) } //--> YOffset=20; // no quotes!! staticYOffset=20; // no quotes!! slideSpeed=20 // no quotes!! barWidth=20; // no quotes!! waitTime=1000; // no quotes!! this sets the time the menu stays out for after the mouse goes off it. menuWidth=100; // Must be a multiple of 10! no quotes!! menuIsStatic="no"; linkTarget="_self"; startMenu("Sol Menu","Menu") addItem("Güncel","http://www.catlak-site55.tr.gg"); addItem("Spor","http://www.catlak-site55.tr.gg"); addItem("Cep Telefonu","http://www.catlak-site55.tr.gg"); addItem("Programlar","http://www.catlak-site55.tr.gg"); addItem("MP3","http://www.catlak-site55.tr.gg"); addItem("Sohbet","http://www.catlak-site55.tr.gg"); addItem("Oyunlar","http://www.catlak-site55.tr.gg"); addItem("CSS Tasarım","http://www.catlak-site55.tr.gg"); addItem("HTML Kodları","http://www.catlak-site55.tr.gg"); addHdr("http://www.catlak-site55.tr.gg"); endMenu() </script> -------------------------------------------------------------Tasarım Üstü Bitiş--------------------------------------------------------------------------- ----------------------------------------------------Menüyü Göstermek İstediginiz Yer---------------------------------------------------------- --------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş-------------------------------------------------- -----------------------------------------------------------------Css Kodu-------------------------------------------------------------------------------- body { color: #aaff0d; background-color: #; font-family: tahoma,helvetica; ); } body a:link, body a:visited, body a:active { color: #; text-decoration: none; } body a:hover { color: ; text-decoration: underline; background-image: none; POSITION: relative; TOP: 1.0px; LEFT: 1.0px; } .mainpage { background-color: #ffffff; } .tableoutborder { background-color: #ffffff; } .tableinborder { background-color: #ffffff; } .threadline { color: #ffffff; background-color: #ffffff; height: 1px; border: 0; } .tabletitle { color: #000000; background-color: #11181F; background-image: url(images/esoes_LED/cellpic.gif); } .tabletitle_fc { color: #FFFFFF; } .inposttable { background-color: #253140; } .tabletitle a:link, .tabletitle a:visited, .tabletitle a:active { color: #FFFFFF; text-decoration: none; } .tabletitle a:hover { color: #BAC3CC; text-decoration: underline; background-image: url('images/esoes_Led/linkback.gif'); POSITION: relative; TOP: 1.0px; LEFT: 1.0px; } .smallfont { font-size: 10px; font-family: tahoma,helvetica; color: #aaff0d; } .normalfont { font-size: 14px; font-family: tahoma,helvetica; color: #FFFFFF; } .tablecat { color: #FFFFFF; background-color: #303F53; background-image: url(images/esoes_LED/catpic.gif); } .tablecat_fc { color: #FFFFFF; } .tablecat a:link, .tablecat a:visited, .tablecat a:active { color: #FFFFFF; text-decoration: none; } .tablecat a:hover { color: #BAC3CC; text-decoration: underline; background-image: url('images/esoes_Led/linkback.gif'); POSITION: relative; TOP: 1.0px; LEFT: 1.0px; } .tableb { color: #FFFFFF; background-color: #253140; } .tableb_fc { color: #FFFFFF; } .tableb a:link, .tableb a:visited, .tableb a:active { color: #FFFFFF; text-decoration: none; } .tableb a:hover { color: #BAC3CC; text-decoration: underline; background-image: url('images/esoes_Led/linkback.gif'); POSITION: relative; TOP: 1.0px; LEFT: 1.0px; } .tablea { color: #FFFFFF; background-color: #222D3A; } .tablea_fc { color: #FFFFFF; } .tablea a:link, .tablea a:visited, .tablea a:active { color: #37a6dd; text-decoration: none; } .tablea a:hover { color: #aaff0d; text-decoration: underline; background-image: url('images/esoes_Led/linkback.gif'); POSITION: relative; TOP: 1.0px; LEFT: 1.0px; } .prefix { color: #FFFFFF; } .time { color: #FFFFFF; } .highlight { color: #FFFFFF; } select { font-size: 11px; font-family: tahoma,helvetica; color: #FFFFFF; background-color: #2D3C4D; } textarea { font-size: 11px; font-family: tahoma,helvetica; color: #FFFFFF; background-color: #2D3C4D; } .input { font-size: 11px; font-family: tahoma,helvetica; color: #FFFFFF; background-color: #2D3C4D; } .publicevent { color: #FFFFFF; } .privateevent { color: #FFFFFF; } .hoverMenu { display: none; position: absolute; z-index: 10; padding: 5px; border: 1px solid #000000; color: #FFFFFF; background-color: #222D3A; } .hoverMenu ul { list-style-type: none; margin: 0; padding: 0; } .hoverMenu ul li { text-align: left; padding: 0; } a:hover{background-image:url('images/esoes_LED/linkback.gif');} A:hover { POSITION: relative; TOP: 1.0px; LEFT: 1.0px; } form { padding:0px; margin:0px; } pre { padding:0px; margin:0px; font-family: Courier new; font-size: 11px; } ----------------------------------------------------------------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.....	Düzenleniyor Siz Reklama Tıklamaya Devam:)	Düzenleniyor Siz Reklama Tıklamaya Devam:)