OgenTR - dikey menu

dikey menu

Kodları İlk Önce Not Defterine Kopyalayın

Aç-Kapa Menü <!--- 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 type="text/javascript" src="http://catlaksite.iwoly.com/ddaccordion.js"> <script type="text/javascript" src="http://catlaksite.iwoly.com/hizli.js"></script> <SCRIPT type=text/javascript> ddaccordion.init({ headerclass: "submenuheader", //Shared CSS class name of headers group contentclass: "submenu", //Shared CSS class name of contents group revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover collapseprev: true, //Collapse previous content (so only one open at any time)? true/false defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed) animatedefault: false, //Should contents open by default be animated into view? persiststate: true, //persist state of opened contents within browser session? toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"] togglehtml: ["suffix", "<img src='https://img.webme.com/pic/c/catlak-site55/plus.gif' class='statusicon' />", "<img src='https://img.webme.com/pic/c/catlak-site55/minus.gif' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs) animatespeed: "normal", //speed of animation: "fast", "normal", or "slow" oninit:function(headers, expandedindices){ //custom code to run when headers have initalized //do nothing }, onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed //do nothing } }) </SCRIPT> -------------------------------------------------------------Tasarım Üstü Bitiş--------------------------------------------------------------------------- ----------------------------------------------------Menüyü Göstermek İstediginiz Yer---------------------------------------------------------- <div class="glossymenu"><a class="menuitem submenuheader" href="http://catlak-site55.tr.gg/#">ANA MENÜ</a> <div class="submenu"> <ul> <li><a href="BURAYA LİNK" ><b>SAYFA ADI</b></a></li> <li><a href="BURAYA LİNK" ><b>SAYFA ADI</b></a></li> <li><a href="BURAYA LİNK" ><b>SAYFA ADI</b></a></li> <li><a href="BURAYA LİNK" ><b>SAYFA ADI</b></a></li> <li><a href="BURAYA LİNK" ><b>SAYFA ADI</b></a></li> </ul> </div> <a class="menuitem submenuheader" href="#">BURAYA MENÜ ADI</a> <div class="submenu"><ul> <li><a href="BURAYA LİNK" ><b>SAYFA ADI</b></a></li> <li><a href="BURAYA LİNK" ><b>SAYFA ADI</b></a></li> <li><a href="BURAYA LİNK" ><b>SAYFA ADI</b></a></li> </ul> </div> <a class="menuitem submenuheader" href="#">BURAYA MENÜ ADI</a> <div class="submenu"><ul> <li><a href="BURAYA LİNK" ><b>SAYFA ADI</b></a></li> <li><a href="BURAYA LİNK" title="Fotoğraflar" ><b>SAYFA ADI</b></a></li> <li><a href="BURAYA LİNK" ><b>SAYFA ADI</b></a></li> </ul> </div> <a class="menuitem submenuheader" href="#">BURAYA MENÜ ADI</a> <div class="submenu"><ul> <li><a href="BURAYA LİNK" ><b>SAYFA ADI</b></a></li> <li><a href="BURAYA LİNK" ><b>SAYFA ADI</b></a></li> <li><a href="BURAYA LİNK" ><b>SAYFA ADI</b></a></li> </ul> </div> <a class="menuitem"href="BURAYA LİNK">SAYFA ADI</a> <a <a class="menuitem"href="BURAYA LİNK">SAYFA ADI</a> <a class="menuitem"href="BURAYA LİNK">SAYFA ADI</a> </div> --------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş-------------------------------------------------- -----------------------------------------------------------------Css Kodu-------------------------------------------------------------------------------- .glossymenu { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; WIDTH: 180px; PADDING-TOP: 0px; } .glossymenu A.menuitem { PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 10px; FONT-SIZE: 12px; BACKGROUND: url(https://img.webme.com/pic/c/catlak-site55/glossyback.jpg) black repeat-x left bottom; PADDING-BOTTOM: 5px; WIDTH: auto; COLOR: #000000; PADDING-TOP: 5px; POSITION: relative; TEXT-DECORATION: none } .glossymenu A.menuitem:visited { COLOR: #000000 } .glossymenu .menuitem:active { COLOR: #000000 } .glossymenu A.menuitem .statusicon { RIGHT: 5px; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; POSITION: absolute; TOP: 5px; BORDER-BOTTOM-STYLE: none } .glossymenu A.menuitem:hover { BACKGROUND-IMAGE: url(https://img.webme.com/pic/c/catlak-site55/glossyback2.jpg) } .glossymenu DIV.submenu { BACKGROUND: white } .glossymenu DIV.submenu UL { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none } .glossymenu DIV.submenu UL LI { BORDER-BOTTOM: #cccccc 1px solid } .glossymenu DIV.submenu UL LI A { PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 10px; FONT-SIZE: 11px; PADDING-BOTTOM: 7px; COLOR: black; PADDING-TOP: 7px; TEXT-DECORATION: none } .glossymenu DIV.submenu UL LI A:hover { BACKGROUND: #eeeeee; colorz: white } ----------------------------------------------------------------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.....	Aç-Kapa Menü2 <!--- 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 type="text/javascript" src="http://catlaksite.iwoly.com/ddaccordion.js"> /*********************************************** * Bu Menü Catlak-site55 Tarafından Düzenlenmiştir * ***********************************************/ </script><script type="text/javascript"> ddaccordion.init({ headerclass: "expandable", //Shared CSS class name of headers group that are expandable contentclass: "categoryitems", //Shared CSS class name of contents group revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover" mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover collapseprev: true, //Collapse previous content (so only one open at any time)? true/false defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed) animatedefault: false, //Should contents open by default be animated into view? persiststate: true, //persist state of opened contents within browser session? toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"] togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs) animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow" oninit:function(headers, expandedindices){ //custom code to run when headers have initalized //do nothing }, onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed //do nothing } }) </script> -------------------------------------------------------------Tasarım Üstü Bitiş--------------------------------------------------------------------------- ----------------------------------------------------Menüyü Göstermek İstediginiz Yer---------------------------------------------------------- <div class="arrowlistmenu"> <h3 class="menuheader expandable">BURAYA MENÜ ADI</h3> <ul class="categoryitems"> <li><a href="LİNK">Buraya Sayfa Adı</a></li> <li><a href="LİNK">Buraya Sayfa Adı</a></li> <li><a href="LİNK">Buraya Sayfa Adı</a></li> <li><a href="LİNK">Buraya Sayfa Adı</a></li> <li><a href="LİNK">Buraya Sayfa Adı</a></li> <li><a href="LİNK">Buraya Sayfa Adı</a></li> </ul> <h3 class="menuheader expandable">BURAYA MENÜ ADI</h3> <ul class="categoryitems"> <li><a href="LİNK">Buraya Sayfa Adı</a></li> <li><a href="LİNK">Buraya Sayfa Adı</a></li> <li><a href="LİNK">Buraya Sayfa Adı</a></li> <li><a href="LİNK">Buraya Sayfa Adı</a></li> <li><a href="LİNK">Buraya Sayfa Adı</a></li> <li><a href="LİNK">Buraya Sayfa Adı</a></li> </ul> <h3 class="menuheader expandable">BURAYA MENÜ ADI</h3> <ul class="categoryitems"> <li><a href="LİNK">Buraya Sayfa Adı</a></li> <li><a href="LİNK">Buraya Sayfa Adı</a></li> <li><a href="LİNK">Buraya Sayfa Adı</a></li> <li><a href="LİNK">Buraya Sayfa Adı</a></li> <li><a href="LİNK">Buraya Sayfa Adı</a></li> <li><a href="LİNK">Buraya Sayfa Adı</a></li> </ul> </div> --------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş-------------------------------------------------- -----------------------------------------------------------------Css Kodu-------------------------------------------------------------------------------- .arrowlistmenu{ width: 194px; } .arrowlistmenu .menuheader{ font: bold 14px Arial; color: white; background: black url(https://img.webme.com/pic/c/catlak-site55/titlebar.png) repeat-x center left; margin-bottom: 10px; text-transform: uppercase; padding: 4px 0 4px 4px; cursor: hand; cursor: pointer; } .arrowlistmenu .openheader{ background-image: url(https://img.webme.com/pic/c/catlak-site55/titlebar-active.png); } .arrowlistmenu ul{ list-style-type: none; margin: 0; padding: 0; margin-bottom: 8px; } .arrowlistmenu ul li{ padding-bottom: 2px; } .arrowlistmenu ul li a{ color: #A70303; background: url(https://img.webme.com/pic/c/catlak-site55/arrowbullet.png) no-repeat center left; display: block; padding: 2px 0; padding-left: 19px; text-decoration: none; font-weight: bold; border-bottom: 1px solid #dadada; font-size: 90%; } .arrowlistmenu ul li a:visited{ color: #A70303; } .arrowlistmenu ul li a:hover{ color: white; background-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.....	Aç-Kapa Menü3 <!--- 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 type="text/javascript" src="http://catlaksite.iwoly.com/ddaccordion.js"> /*********************************************** * Bu Menü Catlak-Site.Tr.Gg Tarafından Düzenlenmiştir **********************************************/ </script> <script type="text/javascript"> ddaccordion.init({ headerclass: "submenuheader", //Shared CSS class name of headers group contentclass: "submenu", //Shared CSS class name of contents group revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover" mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover collapseprev: true, //Collapse previous content (so only one open at any time)? true/false defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed) animatedefault: false, //Should contents open by default be animated into view? persiststate: true, //persist state of opened contents within browser session? toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"] togglehtml: ["suffix", "<img src='https://img.webme.com/pic/m/masum-serseri55/plus.gif' class='statusicon' />", "<img src='https://img.webme.com/pic/m/masum-serseri55/minus.gif' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs) animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow" oninit:function(headers, expandedindices){ //custom code to run when headers have initalized //do nothing }, onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed //do nothing } }) </script> -------------------------------------------------------------Tasarım Üstü Bitiş--------------------------------------------------------------------------- ----------------------------------------------------Menüyü Göstermek İstediginiz Yer---------------------------------------------------------- <div class="glossymenu"> <a class="menuitem" href="http://www.catlak-site55.tr.gg">MENÜ</a> <a class="menuitem submenuheader" href="http://www.catlak-site55.tr.gg" >Menü Adı</a> <div class="submenu"> <ul> <li><a href="LiNK">Sayfa Adı</a></li> <li><a href="LiNK">Sayfa Adı</a></li> <li><a href="LiNK">Sayfa Adı</a></li> <li><a href="LiNK">Sayfa Adı</a></li> <li><a href="LiNK">Sayfa Adı</a></li> <li><a href="LiNK">Sayfa Adı</a></li> </ul> </div> <a class="menuitem" href="LiNK">Menü Adı</a> <a class="menuitem submenuheader" href="http://www.Catlak-site55.tr.gg">Menü Adı</a> <div class="submenu"> <ul> <li><a href="LiNK">Menü Adı</a></li> <li><a href="LiNK">Sayfa Adı</a></li> <li><a href="LiNK">Sayfa Adı</a></li> <li><a href="LiNK">Sayfa Adı</a></li> <li><a href="LiNK">Sayfa Adı</a></li> <li><a href="LiNK">Sayfa Adı</a></li> <li><a href="LiNK">Sayfa Adı</a></li> </ul> </div> <a class="menuitem" href="LiNK">Menü Adı</a> <a class="menuitem submenuheader" href="http://www.Catlak-site55.tr.gg">Menü Adı</a> <div class="submenu"> <ul> <li><a href="LiNK">Menü Adı</a></li> <li><a href="LiNK">Sayfa Adı</a></li> <li><a href="LiNK">Sayfa Adı</a></li> <li><a href="LiNK">Sayfa Adı</a></li> <li><a href="LiNK">Sayfa Adı</a></li> <li><a href="LiNK">Sayfa Adı</a></li> <li><a href="LiNK">Sayfa Adı</a></li> </ul> </div> --------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş-------------------------------------------------- -----------------------------------------------------------------Css Kodu-------------------------------------------------------------------------------- .glossymenu{ margin: 5px 0; padding: 0; width: 170px; /width of menu/ border: 1px solid #9A9A9A; border-bottom-width: 0; } .glossymenu a.menuitem{ background: black url(https://img.webme.com/pic/m/masum-serseri55/glossyback.gif) repeat-x bottom left; font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif; color: white; display: block; position: relative; /To help in the anchoring of the ".statusicon" icon image/ width: auto; padding: 4px 0; padding-left: 10px; text-decoration: none; } .glossymenu a.menuitem:visited, .glossymenu .menuitem:active{ color: white; } .glossymenu a.menuitem .statusicon{ /CSS for icon image that gets dynamically added to headers/ position: absolute; top: 5px; right: 5px; border: none; } .glossymenu a.menuitem:hover{ background-image: url(https://img.webme.com/pic/m/masum-serseri55/glossyback2.gif); } .glossymenu div.submenu{ /DIV that contains each sub menu/ background: white; } .glossymenu div.submenu ul{ /UL of each sub menu*/ list-style-type: none; margin: 0; padding: 0; } .glossymenu div.submenu ul li{ border-bottom: 1px solid blue; } .glossymenu div.submenu ul li a{ display: block; font: normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif; color: black; text-decoration: none; padding: 2px 0; padding-left: 10px; } .glossymenu div.submenu ul li a:hover{ background: #DFDCCB; colorz: white; } ----------------------------------------------------------------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.....
Aç-Kapa Menü4 <!--- 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 type="text/javascript" src="http://catlaksite.iwoly.com/ddaccordion.js"> /*********************************************** * Bu Menü Catlak-site55 Tarafından Düzenlenmiştir * ***********************************************/ </script> <script type="text/javascript"> ddaccordion.init({ headerclass: "headerbar", //Shared CSS class name of headers group contentclass: "submenu", //Shared CSS class name of contents group revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover" mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover collapseprev: true, //Collapse previous content (so only one open at any time)? true/false defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc] [] denotes no content onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed) animatedefault: false, //Should contents open by default be animated into view? persiststate: true, //persist state of opened contents within browser session? toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"] togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs) animatespeed: "normal", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow" oninit:function(headers, expandedindices){ //custom code to run when headers have initalized //do nothing }, onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed //do nothing } }) </script> -------------------------------------------------------------Tasarım Üstü Bitiş--------------------------------------------------------------------------- ----------------------------------------------------Menüyü Göstermek İstediginiz Yer---------------------------------------------------------- <div class="urbangreymenu"> <h3 class="headerbar"><a href="http://www.Catlak-site55.tr.gg">MENÜ ADI</a></h3> <ul class="submenu"> <li><a href="LiNK">Sayfa Adı</a></li> <li><a href="LiNK">Sayfa Adı</a></li> <li><a href="LiNK">Sayfa Adı</a></li> <li><a href="LiNK">Sayfa Adı</a></li> <li><a href="LiNK">Sayfa Adı</a></li> <li><a href="LiNK">Sayfa Adı</a></li> </ul> <h3 class="headerbar"><a href="http://www.dynamicdrive.com/style/">MENÜ ADI</a></h3> <ul class="submenu"> <li><a href="LiNK">Sayfa Adı</a></li> <li><a href="LiNK">Sayfa Adı</a></li> <li><a href="LiNK">Sayfa Adı</a></li> <li><a href="LiNK">Sayfa Adı</a></li> <li><a href="LiNK">Sayfa Adı</a></li> <li><a href="LiNK">Sayfa Adı</a></li> </ul> <h3 class="headerbar"><a href="http://www.Catlak-site55.tr.gg">MENÜ ADI</a></h3> <ul class="submenu"> <li><a href="LiNK">Sayfa Adı</a></li> <li><a href="LiNK">Sayfa Adı</a></li> <li><a href="LiNK">Sayfa Adı</a></li> <li><a href="LiNK">Sayfa Adı</a></li> <li><a href="LiNK">Sayfa Adı</a></li> <li><a href="LiNK">Sayfa Adı</a></li> </ul> </div> --------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş-------------------------------------------------- -----------------------------------------------------------------Css Kodu-------------------------------------------------------------------------------- .urbangreymenu{ width: 190px; } .urbangreymenu .headerbar{ font: bold 13px Verdana; color: white; background: #606060 url(https://img.webme.com/pic/c/catlak-site55/arrowstop.gif) no-repeat 8px 6px; margin-bottom: 0; text-transform: uppercase; padding: 7px 0 7px 31px; } .urbangreymenu .headerbar a{ text-decoration: none; color: white; display: block; } .urbangreymenu ul{ list-style-type: none; margin: 0; padding: 0; margin-bottom: 0; } .urbangreymenu ul li{ padding-bottom: 2px; } .urbangreymenu ul li a{ font: normal 12px Arial; color: black; background: #E9E9E9; display: block; padding: 5px 0; line-height: 17px; padding-left: 8px; text-decoration: none; } .urbangreymenu ul li a:visited{ color: black; } .urbangreymenu ul li a:hover{ color: white; background: 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.....	Aç-Kapa Menü5 <!--- 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 type="text/javascript" src="http://catlaksite.iwoly.com/ddaccordion.js"> /*********************************************** * Bu Menü Catlak-Site.Tr.Gg Tarafından Düzenlenmiştir ***********************************************/ </script> <script type="text/javascript"> ddaccordion.init({ headerclass: "silverheader", //Shared CSS class name of headers group contentclass: "submenu", //Shared CSS class name of contents group revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover" mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover collapseprev: true, //Collapse previous content (so only one open at any time)? true/false defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc] [] denotes no content onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed) animatedefault: false, //Should contents open by default be animated into view? persiststate: true, //persist state of opened contents within browser session? toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"] togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs) animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow" oninit:function(headers, expandedindices){ //custom code to run when headers have initalized //do nothing }, onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed //do nothing } }) </script> -------------------------------------------------------------Tasarım Üstü Bitiş--------------------------------------------------------------------------- ----------------------------------------------------Menüyü Göstermek İstediginiz Yer---------------------------------------------------------- <div class="applemenu"> <div class="silverheader"><a href="BURAYA LiNK">İÇERİK ADI</a></div> <div class="submenu"> BURAYA YAZI RESİM <br /> <img src="https://img.webme.com/pic/c/catlak-site55/ninja.png" width=150 /> </div> <div class="silverheader"><a href="BURAYA LiNK" >İÇERİK ADI</a></div> <div class="submenu"> BURAYA YAZI RESİM <br /> <center><img src="https://img.webme.com/pic/c/catlak-site55/0.gif" /></center> </div> <div class="silverheader"><a href="BURAYA LiNK">İÇERİK ADI</a></div> <div class="submenu"> <center><img src="https://img.webme.com/pic/c/catlak-site55/turklogo.gif" /></center> <br /> </div> <div class="silverheader"><a href="BURAYA LiNK">İÇERİK ADI</a></div> <div class="submenu"> BURAYA YAZI RESİM<br /> <center><img src="https://img.webme.com/pic/c/catlak-site55/ninja.png" width=150 /></center> </div> <div class="silverheader"><a href="BURAYA LiNK">İÇERİK ADI</a></div> <div class="submenu"> BURAYA YAZI RESİM <br /> </div> </div> --------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş-------------------------------------------------- -----------------------------------------------------------------Css Kodu-------------------------------------------------------------------------------- .applemenu{ margin: 5px 0; padding: 0; width: 170px; border: 1px solid #9A9A9A; } .applemenu div.silverheader a{ background: black url(https://img.webme.com/pic/c/catlak-site55/silvergradient.gif) repeat-x center left; font: normal 12px Tahoma, "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif; color: white; display: block; position: relative; width: auto; padding: 5px 0; padding-left: 8px; text-decoration: none; } .applemenu div.silverheader a:visited, .applemenu div.silverheader a:active{ color: white; } .applemenu div.selected a, .applemenu div.silverheader a:hover{ background-image: url(https://img.webme.com/pic/c/catlak-site55/silvergradientover.gif); color: white; } .applemenu div.submenu{ background: white; padding: 5px; height: 300px; } ----------------------------------------------------------------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.....	Aç-Kapa Menü6 <!--- KAYNAK: http://www.catlak-site55.tr.gg ---> -----------------------------------------------------------------Tasarım Üstüne------------------------------------------------------------- <script type="text/javascript" language="javascript" src="http://catlaksite.iwoly.com/jquery.js"></script> <script type="text/javascript"> /*********************************************** * Bu Menü Catlak-Site.Tr.Gg Tarafından Düzenlenmiştir ***********************************************/ $(document).ready(function() { //slides the element with class "menu_body" when paragraph with class "menu_head" is clicked $("#firstpane p.menu_head").click(function() { $(this).css({backgroundImage:"url(https://img.webme.com/pic/c/catlak-site55/down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow"); $(this).siblings().css({backgroundImage:"url(left.png)"}); }); //slides the element with class "menu_body" when mouse is over the paragraph $("#secondpane p.menu_head").mouseover(function() { $(this).css({backgroundImage:"url(https://img.webme.com/pic/c/catlak-site55/down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow"); $(this).siblings().css({backgroundImage:"url(https://img.webme.com/pic/c/catlak-site55/left.png)"}); }); }); </script> -------------------------------------------------------------Tasarım Üstü Bitiş--------------------------------------------------------------------------- ----------------------------------------------------Menüyü Göstermek İstediginiz Yer---------------------------------------------------------- <div class="menu_list" id="secondpane"> <!--Code for menu starts here--> <p class="menu_head">MENU ADI</p> <div class="menu_body"> <a href="LİNK">Buraya Sayfa Adi</a> <a href="LİNK">Buraya Sayfa Adi</a> <a href="LİNK">Buraya Sayfa Adi</a> </div> <p class="menu_head">MENU ADI</p> <div class="menu_body"> <a href="LİNK">Buraya Sayfa Adi</a> <a href="LİNK">Buraya Sayfa Adi</a> <a href="LİNK">Buraya Sayfa Adi</a> </div><p class="menu_head">MENU ADI</p> <div class="menu_body"> <a href="LİNK">Buraya Sayfa Adi</a> <a href="LİNK">Buraya Sayfa Adi</a> <a href="LİNK">Buraya Sayfa Adi</a> </div> <p class="menu_head">MENU ADI</p> <div class="menu_body"> <a href="LİNK">Buraya Sayfa Adi</a> <a href="LİNK">Buraya Sayfa Adi</a> <a href="LİNK">Buraya Sayfa Adi</a> </div> </div> </div> --------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş-------------------------------------------------- -----------------------------------------------------------------Css Kodu-------------------------------------------------------------------------------- body { margin: 10px auto; font: 75%/120% Verdana,Arial, Helvetica, sans-serif; } .menu_list { width: 180px; } .menu_head { padding: 5px 10px; cursor: pointer; position: relative; margin:1px; font-weight:bold; background: #eef4d3 url(https://img.webme.com/pic/c/catlak-site55/left.png) center right no-repeat; } .menu_body { display:none; } .menu_body a{ display:block; color:#006699; background-color:#EFEFEF; padding-left:10px; font-weight:bold; text-decoration:none; } .menu_body a:hover{ color: #000000; text-decoration:underline; } ----------------------------------------------------------------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.....
Aç-Kapa Menü 7 <!--- 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 type="text/javascript" src="http://catlaksite.iwoly.com/jquery.easing.1.3.js"></script> <script type="text/javascript" src="http://catlaksite.iwoly.com/mscript.js"></script> -------------------------------------------------------------Tasarım Üstü Bitiş--------------------------------------------------------------------------- ----------------------------------------------------Menüyü Göstermek İstediginiz Yer---------------------------------------------------------- <div id="main"> <ul class="container"> <li class="menu"> <ul> <li class="button"><a href="#" class="green">BURAYA MENÜ ADI<span></span></a></li> <li class="dropdown"> <ul> <li><a href="Buraya Link" onclick="$('.button a').eq(2).click();return false;">Buraya Sayfa Adı</a></li> <li><a href="Buraya Link" onclick="$('.dropdown').slideUp('slow');return false;">Buraya Sayfa Adı</a></li> <li><a href="Buraya Link">Buraya Sayfa Adı</a></li> <li><a href="Buraya Link">Buraya Sayfa Adı</a></li> </ul> </li> </ul> </li> <li class="menu"> <ul> <li class="button"><a href="#" class="orange">BURAYA MENÜ ADI<span></span></a></li> <li class="dropdown"> <ul> <li><a href="Buraya Link" onclick="$('.button a').eq(2).click();return false;">Buraya Sayfa Adı</a></li> <li><a href="Buraya Link" onclick="$('.dropdown').slideUp('slow');return false;">Buraya Sayfa Adı</a></li> <li><a href="Buraya Link">Buraya Sayfa Adı</a></li> <li><a href="Buraya Link">Buraya Sayfa Adı</a></li> </ul> </li> </ul> </li> <li class="menu"> <ul> <li class="button"><a href="#" class="blue">BURAYA MENÜ ADI<span></span></a></li> <li class="dropdown"> <ul> <li><a href="Buraya Link" onclick="$('.button a').eq(2).click();return false;">Buraya Sayfa Adı</a></li> <li><a href="Buraya Link" onclick="$('.dropdown').slideUp('slow');return false;">Buraya Sayfa Adı</a></li> <li><a href="Buraya Link">Buraya Sayfa Adı</a></li> <li><a href="Buraya Link">Buraya Sayfa Adı</a></li> </ul> </li> </ul> </li> <li class="menu"> <ul> <li class="button"><a href="#" class="red">BURAYA MENÜ ADI<span></span></a></li> <li class="dropdown"> <ul> <li><a href="Buraya Link" onclick="$('.button a').eq(2).click();return false;">Buraya Sayfa Adı</a></li> <li><a href="Buraya Link" onclick="$('.dropdown').slideUp('slow');return false;">Buraya Sayfa Adı</a></li> <li><a href="Buraya Link">Buraya Sayfa Adı</a></li> <li><a href="Buraya Link">Buraya Sayfa Adı</a></li> </ul> </li> </ul> </li> </div> --------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş-------------------------------------------------- -----------------------------------------------------------------Css Kodu-------------------------------------------------------------------------------- .menu { /* Setting default text color, background and a font stack / color:#cccccc; font-size:13px; background: #302b23; font-family:Arial, Helvetica, sans-serif; } ul{ margin:0; padding:0; } ul.container{ / The topmost UL / width:240px; margin:0 auto; padding:50px; } li{ list-style:none; text-align:left; } li.menu{ / The main list elements / padding:5px 0; width:100%; } li.button a{ / The section titles / display:block; font-family:BPreplay,Arial,Helvetica,sans-serif; font-size:21px; height:34px; overflow:hidden; padding:10px 20px 0; position:relative; width:200px; } li.button a:hover{ / Removing the inherited underline from the titles / text-decoration:none; } li.button a span{ / This span acts as the right part of the section's background / height:44px; position:absolute; right:0; top:0; width:4px; display:block; } / Setting up different styles for each section color / li.button a.blue{background:url(https://img.webme.com/pic/c/catlak-site55/blue.png) repeat-x top left; color:#074384;} li.button a.blue span{ background:url(https://img.webme.com/pic/c/catlak-site55/blue.png) repeat-x top right;} li.button a.green{background:url(https://img.webme.com/pic/c/catlak-site55/green.png) repeat-x top left; color:#436800;} li.button a.green span{ background:url(img/green.png) repeat-x top right;} li.button a.orange{background:url(https://img.webme.com/pic/c/catlak-site55/orange.png) repeat-x top left; color:#882e02;} li.button a.orange span{ background:url(https://img.webme.com/pic/c/catlak-site55/orange.png) repeat-x top right;} li.button a.red{background:url(https://img.webme.com/pic/c/catlak-site55/redd.png) repeat-x top left; color:#641603;} li.button a.red span{ background:url(https://img.webme.com/pic/c/catlak-site55/redd.png) repeat-x top right;} / The hover effects / li.button a:hover{ background-position:bottom left;} li.button a:hover span{ background-position:bottom right;} .dropdown{ / The expandable lists / display:none; padding-top:5px; width:100%; } .dropdown li{ / Each element in the expandable list / background-color:#373128; border:1px solid #40392C; color:#CCCCCC; margin:5px 0; padding:4px 18px; } #main{ / The main container / margin:0px auto; text-align:center; } a, a:visited { color:#0196e3; text-decoration:none; outline:none; } a:hover{ text-decoration:underline; } p{ / The tut info on the bottom of the page */ padding:10px; text-align:center; } ----------------------------------------------------------------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.....	Aç-Kapa Menu8 <!--- KAYNAK: http://www.catlak-site55.tr.gg ---> -----------------------------------------------------------------Tasarım Üstüne------------------------------------------------------------- <script type="text/javascript" src="http://catlaksite.iwoly.com/mootools.js"></script> <script type="text/javascript" src="http://catlaksite.iwoly.com/akordion.js"></script> -------------------------------------------------------------Tasarım Üstü Bitiş--------------------------------------------------------------------------- ----------------------------------------------------Menüyü Göstermek İstediginiz Yer---------------------------------------------------------- <div id="wrap"> <div id="accordion"> <h3 class="toggler"><a href="#" class="anasayfa">Anasayfa</a></h3> <div class="element"> <ul> <li><a href="#">Hakkımızda</a></li> <li><a href="#">Atölye</a></li> <li><a href="#">Tavsiyeler</a></li> <li><a href="#">İletişim</a></li> </ul> </div> <h3 class="toggler"><a href="#" class="kategori">Kategoriler</a></h3> <div class="element"> <ul class="kategori"> <li><a href="#">Ajax</a></li> <li><a href="#">Photoshop</a></li> <li><a href="#">Dreamweaver</a></li> <li><a href="#">Xhtml/Css</a></li> <li><a href="#">Php/Mysql</a></li> </ul> </div> <h3 class="toggler"><a href="#" class="baglanti">Bağlantılar</a></h3> <div class="element"> <ul class="link"> <li><a href="#">Mootools</a></li> <li><a href="#">Google</a></li> <li><a href="#">Adobe</a></li> <li><a href="#">Facebook</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">FrienFeed</a></li> </ul> </div> <h3 class="toggler"><a href="#" class="besleme">Rss Takip</a></h3> <div class="element"> <ul class="rss"> <li><a href="#">Son Gönderiler</a></li> <li><a href="#">Son Yorumlar</a></li> </ul> </div> </div> </div> --------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş-------------------------------------------------- -----------------------------------------------------------------Css Kodu-------------------------------------------------------------------------------- #wrap { width:250px; margin:0 auto; } #accordion { margin:20px 0px; width:250px; } h3.toggler { cursor: pointer; border: 1px solid #999; font:bold 14px arial, verdana, helvetica, sans-serif; background: #222 url(https://img.webme.com/pic/c/catlak-site55/h3main.gif); color: #fff; margin: 0 0 2px 0; padding: 6px; } h3.toggler:hover {background: #222 url(https://img.webme.com/pic/c/catlak-site55/h3main2.gif);color:#333;border: 1px solid #B0EC52} .anasayfa {} a.anasayfa {background:transparent url(https://img.webme.com/pic/c/catlak-site55/pagge.png) no-repeat;text-decoration:none;color:#fff;padding-left:20px;} a:hover.anasayfa {background:transparent url(https://img.webme.com/pic/c/catlak-site55/pagge.png) no-repeat;text-decoration:none;color:#70B00A;padding-left:20px;} .besleme {} a.besleme {background:transparent url(https://img.webme.com/pic/c/catlak-site55/feed.png) no-repeat;text-decoration:none;color:#fff;padding-left:20px;} a:hover.besleme {background:transparent url(https://img.webme.com/pic/c/catlak-site55/feed.png) no-repeat;text-decoration:none;color:#70B00A;padding-left:20px;} .kategori {} a.kategori {background:transparent url(https://img.webme.com/pic/c/catlak-site55/page_copy.png) no-repeat;text-decoration:none;color:#fff;padding-left:20px;} a:hover.kategori {background:transparent url(https://img.webme.com/pic/c/catlak-site55/page_copy.png) no-repeat;text-decoration:none;color:#70B00A;padding-left:20px;} .baglanti {} a.baglanti {background:transparent url(https://img.webme.com/pic/c/catlak-site55/cursor.png) no-repeat;text-decoration:none;color:#fff;padding-left:20px;} a:hover.baglanti {background:transparent url(https://img.webme.com/pic/c/catlak-site55/cursor.png) no-repeat;text-decoration:none;color:#70B00A;padding-left:20px;} div.element p, div.element h4 { margin:0px; padding:4px; font:11px arial, verdana, helvetica, sans-serif; } ul {margin:0; padding:0px; list-style:none;display:block;} li {display:block;margin:0;padding:0px;list-style-type:none;} li a {display:block;color:#666;padding:4px 4px 4px 24px;text-decoration:none;background:#ddd url(https://img.webme.com/pic/c/catlak-site55/ana1.gif) no-repeat;border-bottom:1px solid #e6e6e6; font:12px/18px arial, verdana, helvetica, sans-serif;} li a:hover {color:#fff;padding:4px 4px 4px 24px;text-decoration:none;border-bottom:1px solid #c0c0c0;background:#333 url(https://img.webme.com/pic/c/catlak-site55/ana2.gif) no-repeat; font:12px/18px arial, verdana, helvetica, sans-serif;} /* Ana başlıkların altındaki menülerin ayrı ayrı stilleri burada tanımlanmıştır */ .link ul {margin:0; padding:0px; list-style:none;display:block;} .link li {display:block;margin:0;padding:0px;list-style-type:none;} .link li a {display:block;color:#666;padding:4px 4px 4px 24px;text-decoration:none;background:#ddd url(https://img.webme.com/pic/c/catlak-site55/link.gif) no-repeat;border-bottom:1px solid #e6e6e6; font:12px/18px arial, verdana, helvetica, sans-serif;} .link li a:hover {color:#fff;padding:4px 4px 4px 24px;text-decoration:none;border-bottom:1px solid #c0c0c0;background:#ff9900 url(https://img.webme.com/pic/c/catlak-site55/link2.gif) no-repeat; font:12px/18px arial, verdana, helvetica, sans-serif;} .rss ul {margin:0; padding:0px; list-style:none;display:block;} .rss li {display:block;margin:0;padding:0px;list-style-type:none;} .rss li a {display:block;color:#666;padding:4px 4px 4px 24px;text-decoration:none;background:#ddd url(https://img.webme.com/pic/c/catlak-site55/rss1.gif) no-repeat;border-bottom:1px solid #e6e6e6; font:12px/18px arial, verdana, helvetica, sans-serif;} .rss li a:hover {color:#fff;padding:4px 4px 4px 24px;text-decoration:none;border-bottom:1px solid #c0c0c0;background:#3196F4 url(https://img.webme.com/pic/c/catlak-site55/rss2.gif) no-repeat; font:12px/18px arial, verdana, helvetica, sans-serif;} .kategori ul {margin:0; padding:0px; list-style:none;display:block;} .kategori li {display:block;margin:0;padding:0px;list-style-type:none;} .kategori li a {display:block;color:#666;padding:4px 4px 4px 24px;text-decoration:none;background:#ddd url(https://img.webme.com/pic/c/catlak-site55/kat1.gif) no-repeat;border-bottom:1px solid #e6e6e6; font:12px/18px arial, verdana, helvetica, sans-serif;} .kategori li a:hover {color:#fff;padding:4px 4px 4px 24px;text-decoration:none;border-bottom:1px solid #c0c0c0;background:#B0F017 url(https://img.webme.com/pic/c/catlak-site55/kat2.gif) no-repeat; font:12px/18px arial, verdana, helvetica, sans-serif;} .info {font:11px arial, verdana, helvetica, sans-serif;} .info a{color:#333;background:#fff;padding:2px;text-decoration:none;display:inline;} .info a:hover{color:#2e83ff;background:#fff;padding:2px;text-decoration:none;} blockquote { padding:5px 20px; } ----------------------------------------------------------------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.....	Aç-Kapa Menü9 <!--- KAYNAK: http://www.catlak-site55.tr.gg ---> -----------------------------------------------------------------Tasarım Üstüne------------------------------------------------------------- <script type="text/javascript" src="http://www.catlaksite.iwoly.com/jquery-1.2.6.pack.js"></script> <script type="text/javascript"> var aktif = -1; $(document).ready(function(){ $("#accordion span").click(function(){ var index = $("#accordion span").index(this); if(index != aktif) { $("#accordion div:eq("+aktif+")").slideUp(300); $("#accordion div:eq("+index+")").slideDown(300); aktif = index; } else { $("#accordion div:eq("+index+")").slideUp(300);aktif=-1; } }); }); </script> -------------------------------------------------------------Tasarım Üstü Bitiş--------------------------------------------------------------------------- ----------------------------------------------------Menüyü Göstermek İstediginiz Yer---------------------------------------------------------- <div id="accordion"> <span>BURAYA MENÜ ADI</span> <div> <a href=BURAYA LİNK>Sayfa Adı</a> <a href=BURAYA LİNK>Sayfa Adı</a> <a href=BURAYA LİNK>Sayfa Adı</a> <a href=BURAYA LİNK>Sayfa Adı</a> <a href=BURAYA LİNK>Sayfa Adı</a> <a href=BURAYA LİNK>Sayfa Adı</a> </div> <span>BURAYA MENÜ ADI</span> <div> <a href=BURAYA LİNK>Sayfa Adı</a> <a href=BURAYA LİNK>Sayfa Adı</a> <a href=BURAYA LİNK>Sayfa Adı</a> <a href=BURAYA LİNK>Sayfa Adı</a> <a href=BURAYA LİNK>Sayfa Adı</a> <a href=BURAYA LİNK>Sayfa Adı</a> </div> <span>BURAYA MENÜ ADI</span> <div> <a href=BURAYA LİNK>Sayfa Adı</a> <a href=BURAYA LİNK>Sayfa Adı</a> <a href=BURAYA LİNK>Sayfa Adı</a> <a href=BURAYA LİNK>Sayfa Adı</a> <a href=BURAYA LİNK>Sayfa Adı</a> <a href=BURAYA LİNK>Sayfa Adı</a> </div> <span>BURAYA MENÜ ADI</span> <div> <a href=BURAYA LİNK>Sayfa Adı</a> <a href=BURAYA LİNK>Sayfa Adı</a> <a href=BURAYA LİNK>Sayfa Adı</a> <a href=BURAYA LİNK>Sayfa Adı</a> <a href=BURAYA LİNK>Sayfa Adı</a> <a href=BURAYA LİNK>Sayfa Adı</a> </div> <span>BURAYA MENÜ ADI</span> <div> <a href=BURAYA LİNK>Sayfa Adı</a> <a href=BURAYA LİNK>Sayfa Adı</a> <a href=BURAYA LİNK>Sayfa Adı</a> <a href=BURAYA LİNK>Sayfa Adı</a> <a href=BURAYA LİNK>Sayfa Adı</a> <a href=BURAYA LİNK>Sayfa Adı</a> </div> </div> --------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş-------------------------------------------------- -----------------------------------------------------------------Css Kodu-------------------------------------------------------------------------------- *{padding:0;margin:0;}body{padding:10px;cursor:default;} #accordion{width:210px;padding:5px;font-family:tahoma;font-size:12pt;font-weight:bold;} #accordion span{float:left;width:200px;padding:5px;background-color:#eee;color:#147;border:solid 1px #ccc;margin:0 0 2px 0;} #accordion div{display:none;float:left;padding:10px 10px 8px 10px;width:180px;} #accordion div a{float:left;padding:3px 10px;width:170px;font-size:10pt;background-color:#dfdfdf;color:#800;text-decoration:none;margin:0 0 2px 0;} #accordion div a:hover{background-color:#ccc;color:#147;} ----------------------------------------------------------------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.....
Aç Kapa Menü10 <!--- KAYNAK: http://www.catlak-site55.tr.gg ---> -----------------------------------------------------------------Tasarım Üstüne------------------------------------------------------------- <script type="text/javascript" src="http://catlaksite.iwoly.com/ctlkkk.js"></script> <script type="text/javascript" src="http://catlaksite.iwoly.com/treeMenu.js"></script> -------------------------------------------------------------Tasarım Üstü Bitiş--------------------------------------------------------------------------- ----------------------------------------------------Menüyü Göstermek İstediginiz Yer---------------------------------------------------------- <div id="treeMenu"> <ul> <li><a href="#" class="parent">BURAYA MENÜ ADI</a><span></span> <div> <ul> <li><span></span><a href="#" class="parent">Pneumatic sample transport</a> <div> <ul> <li><span></span><a href="#">Other links</a> <div> <ul> <li><span></span><a href="#">Other links</a></li> <li><span></span><a href="#">Other links</a></li> </ul> </div> </li> <li><span></span><a href="#">Other links</a></li> </ul> </div> </li> <li><span></span><a href="#" class="parent">Iron and Steel sample</a> <div> <ul> <li><span></span><a href="#">Other links</a></li> <li><span></span><a href="#">Other links</a></li> <li><span></span><a href="#">Other links</a></li> <li><span></span><a href="#">Other links</a></li> </ul> </div> </li> <li><span></span><a href="#" class="parent">Slag samples</a> <div> <ul> <li><span></span><a href="#">Other links</a></li> <li><span></span><a href="#">Other links</a></li> <li><span></span><a href="#">Other links</a></li> <li><span></span><a href="#">Other links</a></li> </ul> </div> </li> <li><span></span><a href="#" class="parent">Radio Activity Measurement</a> <div> <ul> <li><span></span><a href="#">Other links</a></li> <li><span></span><a href="#">Other links</a></li> <li><span></span><a href="#">Other links</a></li> <li><span></span><a href="#">Other links</a></li> </ul> </div> </li> <li><span></span><a href="#" class="parent">Raw Materials testing</a> <div> <ul> <li><span></span><a href="#">Other links</a></li> <li><span></span><a href="#">Other links</a></li> <li><span></span><a href="#">Other links</a></li> <li><span></span><a href="#">Other links</a></li> </ul> </div> </li> <li><span></span><a href="#">Fully automated robotic laboratories</a></li> </ul> </div> </li> <li><a href="#">BURAYA MENÜ ADI</a><span></span> <div> <ul> <li><span></span><a href="#">Sampling Systems</a></li> <li><span></span><a href="#" class="parent">Pneumatic sample transport</a> <div> <ul> <li><span></span><a href="#">Other links</a></li> <li><span></span><a href="#">Other links</a></li> <li><span></span><a href="#">Other links</a></li> <li><span></span><a href="#">Other links</a></li> <li><span></span><a href="#">Other links</a></li> <li><span></span><a href="#">Other links</a></li> </ul> </div> </li> <li><span></span><a href="#">Crushing</a></li> <li><span></span><a href="#" class="parent">Pulverizing</a> <div> <ul> <li><span></span><a href="#">Other links</a></li> <li><span></span><a href="#">Other links</a></li> <li><span></span><a href="#">Other links</a></li> </ul> </div> </li> <li><span></span><a href="#">Fusion</a></li> <li><span></span><a href="#">Pressing</a></li> <li><span></span><a href="#">Particle size</a></li> <li><span></span><a href="#" class="parent">Pressing</a> <div> <ul> <li><span></span><a href="#">Other links</a></li> <li><span></span><a href="#">Other links</a></li> </ul> </div> </li> <li><span></span><a href="#">XRF/XFD automation </a></li> <li><span></span><a href="#">Linear automated systems </a></li> <li><span></span><a href="#">Mill control </a></li> <li><span></span><a href="#">Dust Contol waste management</a></li> </ul> </div> </li> <li><span></span><a href="#" class="parent">BURAYA MENÜ ADI</a> <div> <ul> <li><span></span><a href="#">Meteral Samples</a> <div> <ul> <li><span></span><a href="#">Other links</a></li> <li><span></span><a href="#">Other links</a></li> <li><span></span><a href="#">Other links</a></li> <li><span></span><a href="#">Other links</a></li> <li><span></span><a href="#">Other links</a></li> </ul> </div> </li> <li><span></span><a href="#">Granualr and powders</a> <div> <ul> <li><span></span><a href="#">Other links</a></li> <li><span></span><a href="#">Other links</a></li> <li><span></span><a href="#">Other links</a></li> <li><span></span><a href="#">Other links</a></li> <li><span></span><a href="#">Other links</a></li> </ul> </div> </li> </ul> </div> </li> <li><a href="#" class="parent">BURAYA MENÜ ADI</a><span></span> <div> <ul> <li><span></span><a href="#">Platinum Group metals and Gold</a> <div> <ul> <li><span></span><a href="#">Other links</a></li> <li><span></span><a href="#">Other links</a></li> <li><span></span><a href="#">Other links</a></li> </ul> </div> </li> <li><span></span><a href="#">Iron ore</a> <div> <ul> <li><span></span><a href="#">Other links</a></li> <li><span></span><a href="#">Other links</a></li> <li><span></span><a href="#">Other links</a></li> </ul> </div> </li> <li><span></span><a href="#">Base metals</a> <div> <ul> <li><span></span><a href="#">Other links</a></li> <li><span></span><a href="#">Other links</a></li> <li><span></span><a href="#">Other links</a></li> </ul> </div> </li> <li><span></span><a href="#">Heavy minerals</a> <div> <ul> <li><span></span><a href="#">Other links</a></li> <li><span></span><a href="#">Other links</a></li> <li><span></span><a href="#">Other links</a></li> </ul> </div> </li> <li><span></span><a href="#">Uranium</a> <div> <ul> <li><span></span><a href="#">Other links</a></li> <li><span></span><a href="#">Other links</a></li> </ul> </div> </li> </ul> </div> </li> </ul> </div> </div> --------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş-------------------------------------------------- -----------------------------------------------------------------Css Kodu-------------------------------------------------------------------------------- html { repeat 0 0;} html * { margin:0; padding:0;} body {} #treeMenu { position:absolute; right:auto; left:15px; top:23px; width:292px; font:normal 14px 'Segoe UI', Helvetica, Arial, sans-serif; } #treeMenu h2 { font:bold 20px 'Segoe UI', Helvetica, Arial, sans-serif; color:#454545; margin-bottom:12px;} #treeMenu ul { list-style:none;} #treeMenu ul li {overflow:hidden; background:#f5f5f5 url(https://img.webme.com/pic/c/catlak-site55/treetabbg.gif) repeat-x 0 0; border:solid 1px #fff; margin:4px 0; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;} #treeMenu ul li span { display:inline-block; float:right; width:30px; height:30px; background:url(https://img.webme.com/pic/c/catlak-site55/treesplit.png) no-repeat 100% 0; cursor:pointer;} #treeMenu ul li a { color:#4d5f6b; font-size:16px; padding:5px 10px; display:inline-block; text-decoration:none; width:234px; float:left; } #treeMenu ul li span.opened { background-position:100% -61px;} #treeMenu ul li div { clear:both; height:auto; } #treeMenu ul li li { background:none; border:0; margin:0; padding-left:10px; border-bottom:solid 1px #fff; border-top:solid 1px #eee; clear:both;} #treeMenu ul li li a { color:#626262; font-size:12px; padding:5px 0; float:left; width:auto; } #treeMenu ul li li a:hover { text-decoration:underline; color:#333;} #treeMenu ul li li span { float:left; display:inline; width:15px; height:20px; background-position:-10px -263px; cursor:default; } #treeMenu ul li li span.closed { background-position:-10px -131px; cursor:pointer;} #treeMenu ul li li span.closed.opened { background-position:-7px -197px; } #treeMenu ul li li li { border: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.....	Aç Kapa Menü11 <!--- 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" src="http://catlaksite.iwoly.com/jquery.cookie.js"></script> <script type="text/javascript" src="http://catlaksite.iwoly.com/theme-js.js"></script> -------------------------------------------------------------Tasarım Üstü Bitiş--------------------------------------------------------------------------- ----------------------------------------------------Menüyü Göstermek İstediginiz Yer---------------------------------------------------------- <div id="sidebar"> <ul> <li id="pages-3" class="widget widget_pages"><h2 class="widgettitle">MENÜ ADI</h2> <ul> <li class="page_item page-item-3"><a href="LiNK">Sayfa Adı</a></li> <li class="page_item page-item-4 page"><a href="LiNK">Sayfa Adı</a></li> <li class="page_item page-item-8"><a href="LiNK">Sayfa Adı</a></li> <li class="page_item page-item-5"><a href="LiNK">Sayfa Adı</a></li> <li class="page_item page-item-6"><a href="LiNK">Sayfa Adı</a></li> </ul> </li><li id="categories-158976413" class="widget widget_categories"><h2 class="widgettitle">MENÜ ADI</h2> <ul> <li class="cat-item cat-item-6"><a href="LiNK">Sayfa Adı</a></li> <li class="cat-item cat-item-10"><a href="LiNK">Sayfa Adı</a></li> <li class="cat-item cat-item-16"><a href="LiNK">Sayfa Adı</a></li> <li class="cat-item cat-item-17"><a href="LiNK">Sayfa Adı</a></li> <li class="cat-item cat-item-8"><a href="LiNK">Sayfa Adı</a></li> <li class="cat-item cat-item-4"><a href="LiNK">Sayfa Adı</a></li> <li class="cat-item cat-item-5"><a href="LiNK">Sayfa Adı</a></li> <li class="cat-item cat-item-11"><a href="LiNK">Sayfa Adı</a></li> </ul> </li><li id="archives-3" class="widget widget_archive"><h2 class="widgettitle">MENÜ ADI</h2> <ul> <li><a href="LiNK">Sayfa Adı</a></li> <li><a href="LiNK">Sayfa Adı</a></li> <li><a href="LiNK">Sayfa Adı</a></li> <li><a href="LiNK">Sayfa Adı</a></li> <li><a href="LiNK">Sayfa Adı</a></li> <li><a href="LiNK">Sayfa Adı</a></li> <li><a href="LiNK">Sayfa Adı</a></li> <li><a href="LiNK">Sayfa Adı</a></li> </ul> </ul> </div> --------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş-------------------------------------------------- -----------------------------------------------------------------Css Kodu-------------------------------------------------------------------------------- * ul, ol, li,th, td { margin:0; padding:0 } table { border-collapse:collapse; border-spacing:0 } fieldset, img { border:0 } address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal } ol, ul, li { list-style:none } caption, th { text-align:left } h1, h2, h3, h5, h5, h6 { font-size:100%; font-weight:normal } q:before, q:after { content:''} strong { font-weight: bold } em { font-style: italic } a img { border:none } div { position:relative } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } a {outline-style: none;} table { border-collapse: separate; border-spacing: 0;} caption, th, td {text-align: left;font-weight: normal;} blockquote:before, blockquote:after,q:before, q:after {content: "";} blockquote, q {quotes: "" "";} #sidebar { width: 220px; float:left; } /* Sidebar */ li.widget h2.active { background-position: right bottom; } li.widget h2 { width: 200px; height: 35px; background: url(https://img.webme.com/pic/c/catlak-site55/side-title2.png) no-repeat right top; font-size: 17px; padding: 7px 0 0 10px; color: #7e7e7e; cursor: pointer; } li.widget { margin: 0 0 3px 0; } #sidebar ul li a { line-height: 26px; font-size: 12px; display: block; text-decoration: none; padding-left: 10px; width: 170px; height: 30px; color:#4f6373; background: url(https://img.webme.com/pic/c/catlak-site55/list-item.png) no-repeat right top; } #sidebar ul li.widget_text a { display: block; padding-left: 10px; background: none; height: auto; } #sidebar ul li a:hover { color:#c7d0cf; } ----------------------------------------------------------------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.....	Kayan Renkli Menü <!--- KAYNAK: http://www.catlak-site55.tr.gg ---> -----------------------------------------------------------------Tasarım Üstüne------------------------------------------------------------- <script language="javascript" src="http://catlaksite.iwoly.com/jquery_mini.js"></script> <script language="javascript" src="http://catlaksite.iwoly.com/jquery.dimensions.js"></script> <script language="javascript"> var name = "#floatMenu"; var menuYloc = null; $(document).ready(function(){ menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px"))) $(window).scroll(function () { offset = menuYloc+$(document).scrollTop()+"px"; $(name).animate({top:offset},{duration:500,queue:false}); }); }); </script> -------------------------------------------------------------Tasarım Üstü Bitiş--------------------------------------------------------------------------- ----------------------------------------------------Menüyü Göstermek İstediginiz Yer---------------------------------------------------------- <div id="floatMenu"> <ul class="menu1"> <li><a href="http://www.catlaksite55.tr.gg/1.htm" > SAYFA ADI </a></li> </ul> <ul class="menu2"> <li><a href="BURAYA LİNK" > SAYFA ADI</a></li> <li><a href="BURAYA LİNK" > SAYFA ADI</a></li> <li><a href="BURAYA LİNK" >SAYFA ADI</a></li> </ul> <ul class="menu3"> <li><a href="BURAYA LİNK" > SAYFA ADI</a></li> </ul> </div> --------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş-------------------------------------------------- -----------------------------------------------------------------Css Kodu-------------------------------------------------------------------------------- body { height:2000px; color:#ccc; font:10px "Lucida Grande", "Lucida Sans", "Trebuchet MS", verdana, sans-serif; } #floatMenu { position:absolute; top:150px; left:50%; margin-left:235px; width:200px; } #floatMenu ul { margin-bottom:20px; } #floatMenu ul li a { display:block; border:1px solid #999; background-color:#222; border-left:6px solid #999; text-decoration:none; color:#ccc; padding:5px 5px 5px 25px; } #floatMenu ul li a:hover { color:#fff; background-color:#333333; } #floatMenu ul.menu1 li a:hover { border-color:#09f; } #floatMenu ul.menu2 li a:hover { border-color:#9f0; } #floatMenu ul.menu3 li a:hover { border-color:#f09; } } body { line-height: 1; } ol, ul { list-style: none; } ----------------------------------------------------------------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.....
Jquery Dikey Menü <!--- KAYNAK: http://www.catlak-site55.tr.gg ---> -----------------------------------------------------------------Tasarım Üstüne------------------------------------------------------------- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> <script> $(document).ready(function() { $("a.ikon1").click(function() { // ikon1'e tıklandığında neler olacak? $(".icerik1").addClass("goster"); $(".icerik2, .icerik3").removeClass("goster"); $("a.ikon1").addClass("aktifikon"); $("a.ikon2, a.ikon3").removeClass("aktifikon"); return false; }); $("a.ikon2").click(function() { // ikon2'ye tıklandığında neler olacak? $(".icerik2").addClass("goster"); $(".icerik1, .icerik3").removeClass("goster"); $("a.ikon2").addClass("aktifikon"); $("a.ikon3, a.ikon1").removeClass("aktifikon"); return false; }); $("a.ikon3").click(function() { // ikon3'e tıklandığında neler olacak? $(".icerik3").addClass("goster"); $(".icerik1, .icerik2").removeClass("goster"); $("a.ikon3").addClass("aktifikon"); $("a.ikon2, a.ikon1").removeClass("aktifikon"); return false; }); }); </script> -------------------------------------------------------------Tasarım Üstü Bitiş--------------------------------------------------------------------------- ----------------------------------------------------Menüyü Göstermek İstediginiz Yer---------------------------------------------------------- <div id="wrap"> <div id="menualani"> <div class="ikonalani"> <a href="#" class="ikon1 aktifikon">ikon 1</a> <a href="#" class="ikon2">ikon 2</a> <a href="#" class="ikon3">ikon 3</a> </div> <div class="icerikalani"> <div class="icerik1 goster"><h2>KATEGORİLER</h2> <ul> <li><a href="#">XHTML / CSS</a></li> <li><a href="#">JAVASCRIPT</a></li> <li><a href="#">DREAMWEAVER</a></li> <li><a href="#">PHOTOSHOP</a></li> <li><a href="#">PHP / MYSQL</a></li> <li><a href="#">WORDPRESS</a></li> <li><a href="#">KISA KISA</a></li> <li><a href="#">GENEL KONULAR</a></li> </ul> </div> <div class="icerik2"> <h2>HAKKIMIZDA</h2> <p>Sitemiz hakkında verebileceğimiz kısa bir tanıtım cümlesi ve girişi bu alana yazabiliriz. Bu alandaki yazıyı içerik2 isimli div sınıfı içine yazıyorum. </p> <p><a href="#">Hakkımızda</a> <a href="#">RSS Takip</a></p> </div> <div class="icerik3"> <h2>BİZİ TAKİP EDİN!</h2> <p>Aşağıdaki bağlantılardan yararlanarak bizi farklı sosyal medya sitelerinde takip edebilirsiniz. </p> <ul> <li><a href="#">Facebook</a></li> <li><a href="#">Friendfeed</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">Flickr</a></li> <li><a href="#">Youtube</a></li> </ul> </div> </div> </div> </div> --------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş-------------------------------------------------- -----------------------------------------------------------------Css Kodu-------------------------------------------------------------------------------- #wrap {margin:0 auto;width:900px} #menualani {width:300px;display:block;float:left} .ikonalani {width:42px;display:block;float:left;position:relative;z-index:999;} a.ikon1, a.ikon2, a.ikon3 { text-decoration:none; display:block; outline:none; text-indent:-9999px; width:40px; height:40px; } a.ikon1 { background:#fff url(https://img.webme.com/pic/c/catlak-site55/resim1.png) no-repeat center center; margin-top:10px; } a.ikon2 { background:#fff url(https://img.webme.com/pic/c/catlak-site55/resim2.png) no-repeat center center; } a.ikon3 { background:#fff url(https://img.webme.com/pic/c/catlak-site55/resim3.png) no-repeat center center; } a.aktifikon { background-color:#ddd; width:40px; height:40px; border-top:2px solid #bbb; border-left:2px solid #bbb; border-bottom:2px solid #bbb; border-right:2px solid #ddd; display:block; -moz-border-radius:6px 0px 0px 6px; -webkit-border-radius:6px 0px 0px 6px; border-radius: 6px 0px 0px 6px; } .icerikalani {width:250px;background:#f5f5f5;float:left;position:relative;z-index:1;display:block} .icerik1, .icerik2, .icerik3 {display:none} .icerik1, .icerik2, .icerik3 { background:#ddd; color:#fff; height:300px; top:48px; border:2px solid #bbb; margin-left:0px; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius: 6px; } .goster {display:block;} .icerikalani h2 {font:bold 16px arial, verdana, sans-serif;padding:0px 10px 0px 10px;color:#333;text-shadow:0px 1px 2px #fff} .icerikalani ul {list-style:none;margin:0;padding:0px 10px 0px 10px;} .icerikalani li {padding:0;margin:0} .icerikalani ul li a {text-decoration:none;color:#333;background:#ddd;font:12px arial, verdana, sans-serif;border-top:1px solid #eee;border-bottom:1px solid #ccc;padding:6px;margin:0;display:block} .icerikalani ul li a:hover {text-decoration:none;color:#fff;background:#333;font:12px arial, verdana, sans-serif;border-top:1px solid #ccc;border-bottom:1px solid #aaa;padding:6px;margin:0;display:block;text-shadow:0px 1px 2px #fff;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius: 4px; } .icerikalani p {font:13px/24px arial, verdana, sans-serif;padding:0px 10px 0px 10px;color:#666;} .icerikalani p a {padding:4px;background:#2e83ff;color:#fff;text-decoration:none} .icerikalani p a:hover {padding:4px;background:#666;color:#fff;text-decoration:none} ----------------------------------------------------------------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.....	Jquery Popup Menü <!--- KAYNAK: http://www.catlak-site55.tr.gg ---> -----------------------------------------------------------------Tasarım Üstüne------------------------------------------------------------- <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("ul.sidenav li").hover(function() { $(this).find("div").stop() .animate({left: "210", opacity:1}, "fast") .css("display","block") }, function() { $(this).find("div").stop() .animate({left: "0", opacity: 0}, "fast") }); }); </script> -------------------------------------------------------------Tasarım Üstü Bitiş--------------------------------------------------------------------------- ----------------------------------------------------Menüyü Göstermek İstediginiz Yer---------------------------------------------------------- <div class="container"> <ul class="sidenav"> <li> <a href="#">MENÜ ADI</a> <div><p>Buraya Açıklama</p></div> </li> <li> <a href="#">MENÜ ADI</a> <div><p>Catlak-Site55</p></div> </li> <li> <a href="#">MENÜ ADI</a> <div><p>Buraya Açıklama</p></div> </li> <li> <a href="#">MENÜ ADI</a> <div><p>Blaaa Blaaaaa Blaa xD</p></div> </li> <li> <a href="#">MENÜ ADI</a> <div><p>xD xD xD xD</p></div> </li> <li> <a href="#">MENÜ ADI</a> <div><p>Bitti xD</p></div> </li> </ul> --------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş-------------------------------------------------- -----------------------------------------------------------------Css Kodu-------------------------------------------------------------------------------- a:focus { outline: none; } * {margin: 0; padding: 0;} h1 { font: 4.7em normal Georgia, 'Times New Roman', Times, serif; color: #fff; margin-bottom: 20px; } h1 small{ font: 0.2em normal Verdana, Arial, Helvetica, sans-serif; text-transform:uppercase; letter-spacing: 1.5em; display: block; color: #fff; } h2 {font: 2em normal Georgia, 'Times New Roman', Times, serif;} .container { margin: 0 auto; width: 450px; background: #005094; overflow: hidden; padding: 20px; } .content { width: 639px; padding: 20px; margin-left: 20px; color: #ddd; font-size: 1.2em; float: left; border-left: 1px dashed #003867; } .content p { line-height: 1.6em; margin: 5px 0; padding: 5px 0; } ul.sidenav { float: left; margin: 130px 0 0; padding: 0; width: 200px; list-style: none; border-bottom: 1px solid #3373a9; border-top: 1px solid #003867; font-size: 1.2em; } ul.sidenav li { position: relative; float: left; margin: 0; padding: 0; } ul.sidenav li a{ border-top: 1px solid #3373a9; border-bottom: 1px solid #003867; padding: 10px 10px 10px 25px; display: block; color: #fff; text-decoration: none; width: 165px; background: #005094 url(https://img.webme.com/pic/c/catlak-site55/sidenav_li_a.gif) no-repeat 5px 10px; position: relative; z-index: 2; } ul.sidenav li a:hover { background-color: #004c8d; border-top: 1px solid #1a4c76; } ul.sidenav li div { display: none; position: absolute; top: 2px; left: 0; width: 225px; font-size: 0.9em; background: url(https://img.webme.com/pic/c/catlak-site55/side-nav-popup/bubble_top.gif) no-repeat right top; } ul.sidenav li div p { margin: 7px 0; line-height: 1.6em; padding: 0 5px 10px 30px; background: url(https://img.webme.com/pic/c/catlak-site55/bubble_btm.gif) no-repeat right bottom; } ----------------------------------------------------------------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.....	Jquery Tab Menü <!--- KAYNAK: http://www.catlak-site55.tr.gg ---> -----------------------------------------------------------------Tasarım Üstüne------------------------------------------------------------- <script src="http://catlaksite.iwoly.com/jquery-1.2.3.min.js"></script> <script> // When the document loads do everything inside here ... $(document).ready(function(){ // When a link is clicked $("a.tab").click(function () { // switch all tabs off $(".active").removeClass("active"); // switch this tab on $(this).addClass("active"); // slide all content up $(".content").slideUp(); // slide this content up var content_show = $(this).attr("title"); $("#"+content_show).slideDown(); }); }); </script> -------------------------------------------------------------Tasarım Üstü Bitiş--------------------------------------------------------------------------- ----------------------------------------------------Menüyü Göstermek İstediginiz Yer---------------------------------------------------------- <div id="tabbed_box_1" class="tabbed_box"> <div class="tabbed_area"> <ul class="tabs"> <li><a href="#" title="content_1" class="tab active">Menü Adı</a></li> <li><a href="#" title="content_2" class="tab">Menü Adı</a></li> <li><a href="#" title="content_3" class="tab">Menü Adı</a></li> </ul> <div id="content_1" class="content"> <ul> <li><a href="">SAYFA ADI</a></li> <li><a href="">SAYFA ADI</a></li> <li><a href="">SAYFA ADI</a></li> <li><a href="">SAYFA ADI</a></li> <li><a href="">SAYFA ADI</a></li> <li><a href="">SAYFA ADI</a></li> </ul> </div> <div id="content_2" class="content"> <ul> <li><a href="">SAYFA ADI</a></li> <li><a href="">SAYFA ADI</a></li> <li><a href="">SAYFA ADI</a></li> <li><a href="">SAYFA ADI</a></li> </ul> </div> <div id="content_3" class="content"> <ul> <li><a href="">SAYFA ADI</a></li> <li><a href="">SAYFA ADI</a></li> <li><a href="">SAYFA ADI</a></li> <li><a href="">SAYFA ADI</a></li> </ul> </div> </div> </div> --------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş-------------------------------------------------- -----------------------------------------------------------------Css Kodu-------------------------------------------------------------------------------- #tabbed_box_1 { margin: 0px auto 0px auto; width:300px; } .tabbed_box h4 { font-family:Arial, Helvetica, sans-serif; font-size:23px; color:#ffffff; letter-spacing:-1px; margin-bottom:10px; } .tabbed_box h4 small { color:#e3e9ec; font-weight:normal; font-size:9px; font-family:Verdana, Arial, Helvetica, sans-serif; text-transform:uppercase; position:relative; top:-4px; left:6px; letter-spacing:0px; } .tabbed_area { border:1px solid #494e52; background-color:#636d76; padding:8px; } ul.tabs { margin:0px; padding:0px; margin-top:5px; margin-bottom:6px; } ul.tabs li { list-style:none; display:inline; } ul.tabs li a { background-color:#464c54; color:#ffebb5; padding:8px 14px 8px 14px; text-decoration:none; font-size:9px; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; border:1px solid #464c54; background-image:url(https://img.webme.com/pic/c/catlak-site55/tab_off.jpg); background-repeat:repeat-x; background-position:bottom; } ul.tabs li a:hover { background-color:#2f343a; border-color:#2f343a; } ul.tabs li a.active { background-color:#ffffff; color:#282e32; border:1px solid #464c54; border-bottom: 1px solid #ffffff; background-image:url(https://img.webme.com/pic/c/catlak-site55/tab_on.jpg); background-repeat:repeat-x; background-position:top; } .content { background-color:#ffffff; padding:10px; border:1px solid #464c54; font-family:Arial, Helvetica, sans-serif; background-image:url(https://img.webme.com/pic/c/catlak-site55/content_bottom.jpg); background-repeat:repeat-x; background-position:bottom; } #content_2, #content_3 { display:none; } .content ul { margin:0px; padding:0px 20px 0px 20px; } .content ul li { list-style:none; border-bottom:1px solid #d6dde0; padding-top:15px; padding-bottom:15px; font-size:13px; } .content ul li:last-child { border-bottom:none; } .content ul li a { text-decoration:none; color:#3e4346; } .content ul li a small { color:#8b959c; font-size:9px; text-transform:uppercase; font-family:Verdana, Arial, Helvetica, sans-serif; position:relative; left:4px; top:0px; } .content ul li a:hover { color:#a59c83; } .content ul li a:hover small { color:#baae8e; } ----------------------------------------------------------------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.....
Mouse Takip Menü <!--- KAYNAK: http://www.catlak-site55.tr.gg ---> -----------------------------------------------------------------Tasarım Üstüne------------------------------------------------------------- <script type="text/javascript" src="http://catlaksite.iwoly.com/jquery-1.3.1.min.js"></script> <script type="text/javascript" src="http://catlaksite.iwoly.com/jquery.easing.1.3.js"></script> <script> $(document).ready(function () { //Set the height of the block $('#menu .block').height($('#menu li').height()); //go to the default selected item topval = $('#menu .selected').position()['top']; $('#menu .block').stop().animate({top: topval}, {easing: '', duration:500}); $('#menu li').hover( function() { //get the top position topval = $(this).position()['top']; //animate the block //you can add easing to it $('#menu .block').stop().animate({top: topval}, {easing: '', duration:500}); //add the hover effect to menu item $(this).addClass('hover'); }, function() { //remove the hover effect $(this).removeClass('hover'); } ); }); </script> -------------------------------------------------------------Tasarım Üstü Bitiş--------------------------------------------------------------------------- ----------------------------------------------------Menüyü Göstermek İstediginiz Yer---------------------------------------------------------- <div id="menu"> <ul> <li><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li> <li><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li> <li><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li> <li><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li> <li class="selected"><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li> <li><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li> <li><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li> <li><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li> <li><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li> <li><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li> </ul> <div class="block png"></div> </div> --------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş-------------------------------------------------- -----------------------------------------------------------------Css Kodu-------------------------------------------------------------------------------- #menu { font-family:verdana; font-size:12px; position:relative; margin:0 auto; width:200px; } #menu ul { /* remove list style / list-style:none; padding:0; margin:0; / set the layer position / position:relative; z-index:5; } #menu li { / set the styles / background:#ccc url(https://img.webme.com/pic/c/catlak-site55/vbg.gif) no-repeat 0 0; padding:5px; margin:2px; cursor:pointer; border:1px solid #ccc; } #menu li.hover { / on hover, change it to this image / background-image:url(https://img.webme.com/pic/c/catlak-site55/bg_hover.gif) !important; } #menu li a { text-decoration:none; color:#888; } #menu .block { / allow javascript to move the block / position:absolute; top:0; / set the left position / left:150px; / display above the #menu / z-index:10; / the image and the size / background:transparent url(https://img.webme.com/pic/c/catlak-site55/darrow.png) no-repeat top right; width:39px; padding:4px; cursor:pointer; } / fast png fix for ie6 / html .png{ position:relative; behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')", this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''), this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')", this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)); } ----------------------------------------------------------------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.....	Sidebar Menü <!--- KAYNAK: http://www.catlak-site55.tr.gg ---> -----------------------------------------------------------------Tasarım Üstüne------------------------------------------------------------- <script type="text/javascript" src="http://catlaksite.iwoly.com/mootools.js"></script> <script type="text/javascript" src="http://catlaksite.iwoly.com/side-bar.js"></script> -------------------------------------------------------------Tasarım Üstü Bitiş--------------------------------------------------------------------------- ----------------------------------------------------Menüyü Göstermek İstediginiz Yer---------------------------------------------------------- <div id="sideBar"> <a href="#" id="sideBarTab"><img src="https://img.webme.com/pic/c/catlak-site55/slide-button.gif" alt="sideBar" title="sideBar" /></a> <div id="sideBarContents" style="width:0px;"> <div id="sideBarContentsInner"> <h2>side<span>bar</span></h2> <ul> <li><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li> <li><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li> <li><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li> <li><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li> <li><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li> </ul> </div> </div> </div> --------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş-------------------------------------------------- -----------------------------------------------------------------Css Kodu-------------------------------------------------------------------------------- body{ position:relative; paddign:0px; font-size:100%; } h2{ color:#FFFFFF; font-size:90%; font-family:arial; margin:10px 10px 10px 10px; font-weight:bold; } h2 span{ font-size:105%; font-weight:normal; } ul{ margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; } li{ margin:0px 10px 3px 10px; padding:2px; list-style-type:none; display:block; background-color:#DA1074; width:177px; } li a{ width:100%; } li a:link, li a:visited{ color:#FFFFFF; font-family:verdana; font-size:70%; text-decoration:none; display:block; margin:0px 0px 0px 0px; padding:0px; width:100%; } li a:hover{ color:#FFFFFF; text-decoration:underline; } #sideBar{ position: absolute; width: auto; height: auto; top: 200px; right:-7px; background-image:url(https://img.webme.com/pic/c/catlak-site55/sdbackground.gif); background-position:top left; background-repeat:repeat-y; } #sideBarTab{ float:left; height:137px; width:28px; } #sideBarTab img{ border:0px solid #FFFFFF; } #sideBarContents{ overflow:hidden !important; } #sideBarContentsInner{ width:200px; } ----------------------------------------------------------------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 Menü <!--- KAYNAK: http://www.catlak-site55.tr.gg ---> -----------------------------------------------------------------Tasarım Üstüne------------------------------------------------------------- <script type="text/javascript" src="http://catlaksite.iwoly.com/djquery.js"></script> <script type="text/javascript" src="http://catlaksite.iwoly.com/sliding_effect.js"></script> -------------------------------------------------------------Tasarım Üstü Bitiş--------------------------------------------------------------------------- ----------------------------------------------------Menüyü Göstermek İstediginiz Yer---------------------------------------------------------- <ul id="sliding-navigation"> <li class="sliding-element"><h3>BURAYA MENÜ ADI</h3></li> <li class="sliding-element"><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li> <li class="sliding-element"><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li> <li class="sliding-element"><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li> <li class="sliding-element"><a href="BURAYA LİNK">BURAYA SAYFA ADI</a></li> <li class="sliding-element"><h3>BURAYA MENÜ ADI</h3></li> </ul> </div> --------------------------------------------------Menüyü Göstermek İstediginiz Yer Bitiş-------------------------------------------------- -----------------------------------------------------------------Css Kodu-------------------------------------------------------------------------------- ul#sliding-navigation { list-style: none; font-size: .75em; margin: 30px 0; padding: 0; } ul#sliding-navigation li.sliding-element h3, ul#sliding-navigation li.sliding-element a { display: block; width: 150px; padding: 5px 18px; margin: 0; margin-bottom: 5px; } ul#sliding-navigation li.sliding-element h3 { color: #fff; background:#333 url(https://img.webme.com/pic/c/catlak-site55/heading_bg.jpg) repeat-y; font-weight: normal; } ul#sliding-navigation li.sliding-element a { color: #999; background:#222 url(https://img.webme.com/pic/c/catlak-site55/tab_bg.jpg) repeat-y; border: 1px solid #1a1a1a; text-decoration: none; } ul#sliding-navigation li.sliding-element a:hover { color: #ffff66; } ----------------------------------------------------------------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.....
Dikey Tab Menü <!--- KAYNAK: http://www.catlak-site55.tr.gg ---> -----------------------------------------------------------------Tasarım Üstüne------------------------------------------------------------- <script type="text/javascript" src="http://catlaksite.iwoly.com/jquery-1.3.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { //Get all the LI from the #tabMenu UL $('#tabMenu > li').click(function(){ //remove the selected class from all LI $('#tabMenu > li').removeClass('selected'); //Reassign the LI $(this).addClass('selected'); //Hide all the DIV in .boxBody $('.boxBody div').slideUp('1500'); //Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important. $('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500'); }).mouseover(function() { //Add and remove class, Personally I dont think this is the right way to do it, anyone please suggest $(this).addClass('mouseover'); $(this).removeClass('mouseout'); }).mouseout(function() { //Add and remove class $(this).addClass('mouseout'); $(this).removeClass('mouseover'); }); //Mouseover with animate Effect for Category menu list $('.boxBody #category li').mouseover(function() { //Change background color and animate the padding $(this).css('backgroundColor','#888'); $(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300}); }).mouseout(function() { //Change background color and animate the padding $(this).css('backgroundColor',''); $(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300}); }); //Mouseover effect for Posts, Comments, Famous Posts and Random Posts menu list. $('.boxBody li').click(function(){ window.location = $(this).find("a").attr("href"); }).mouseover(function() { $(this).css('backgroundColor','#888'); }).mouseout(function() { $(this).css('backgroundColor',''); }); }); </script> -------------------------------------------------------------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.....

Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?

Ücretsiz kaydol