kodcudost - dikey menu

dikey menu

açılır menü1 <style type="text/css"> .sidebarmenu ul{ margin: 0; padding: 0; list-style-type: none; font: bold 13px Verdana; width: 180px; /* Main Menu Item widths / border-bottom: 1px solid #ccc; } .sidebarmenu ul li{ position: relative; } / Top level menu links style / .sidebarmenu ul li a{ display: block; overflow: auto; /force hasLayout in IE7 / color: white; text-decoration: none; padding: 6px; border-bottom: 1px solid #778; border-right: 1px solid #778; } .sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{ background-color: #012D58; /background of tabs (default state)/ } .sidebarmenu ul li a:visited{ color: white; } .sidebarmenu ul li a:hover{ background-color: black; } /Sub level menu items / .sidebarmenu ul li ul{ position: absolute; width: 170px; /Sub Menu Items width / top: 0; visibility: hidden; } .sidebarmenu a.subfolderstyle{ background: url(right.gif) no-repeat 97% 50%; } / Holly Hack for IE / html .sidebarmenu ul li { float: left; height: 1%; } * html .sidebarmenu ul li a { height: 1%; } /* End */ </style><!--{13198125709060}--> <div class="sidebarmenu"> <ul id="sidebarmenu1"> <li><a href="#" _fcksavedurl="#">Item 1</a></li> <li><a href="#" _fcksavedurl="#">Item 2</a></li> <li><a href="#" _fcksavedurl="#">Folder 1</a> <ul> <li><a href="#" _fcksavedurl="#">Sub Item 1.1</a></li> <li><a href="#" _fcksavedurl="#">Sub Item 1.2</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">Item 3</a></li> <li><a href="#" _fcksavedurl="#">Folder 2</a> <ul> <li><a href="#" _fcksavedurl="#">Sub Item 2.1</a></li> <li><a href="#" _fcksavedurl="#">Folder 2.1</a> <ul> <li><a href="#" _fcksavedurl="#">Sub Item 2.1.1</a></li> <li><a href="#" _fcksavedurl="#">Sub Item 2.1.2</a></li> <li><a href="#" _fcksavedurl="#">Sub Item 2.1.3</a></li> <li><a href="#" _fcksavedurl="#">Sub Item 2.1.4</a></li> </ul> </li> </ul> </li> <li><a href="#" _fcksavedurl="#">Item 4</a></li> </ul> </div> kod önizleme	açılır menü2 <style type="text/css"> .suckerdiv ul{ margin: 0; padding: 0; list-style-type: none; width: 160px; /* Width of Menu Items / border-bottom: 1px solid #ccc; } .suckerdiv ul li{ position: relative; } /Sub level menu items / .suckerdiv ul li ul{ position: absolute; width: 170px; /sub menu width/ top: 0; visibility: hidden; } / Sub level menu links style / .suckerdiv ul li a{ display: block; overflow: auto; /force hasLayout in IE7 / color: black; text-decoration: none; background: #fff; padding: 1px 5px; border: 1px solid #ccc; border-bottom: 0; } .suckerdiv ul li a:visited{ color: black; } .suckerdiv ul li a:hover{ background-color: yellow; } .suckerdiv .subfolderstyle{ background: url(media/arrow-list.gif) no-repeat center right; } / Holly Hack for IE / html .suckerdiv ul li { float: left; height: 1%; } * html .suckerdiv ul li a { height: 1%; } /* End */ </style> <!--{13198125709060}--><div class="suckerdiv"> <ul id="suckertree1"> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Item 1</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Item 2</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Folder 1</a> <ul> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Sub Item 1.1</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Sub Item 1.2</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Item 3</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Folder 2</a> <ul> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Sub Item 2.1</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Folder 2.1</a> <ul> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Sub Item 2.1.1</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Sub Item 2.1.2</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Sub Item 2.1.3</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Sub Item 2.1.4</a></li> </ul> </li> </ul> </li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Item 4</a></li> </ul> </div> kod önizleme	açılır menü 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <!--{13198125586710}--> <!--{13198125586711}--> <!--{13198125586712}--> <style type="text/css"> .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(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(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; } </style> </head> <body> <div class="glossymenu"> <a class="menuitem" href="http://www.dynamicdrive.com/" _fcksavedurl="http://www.dynamicdrive.com/" _fcksavedurl="http://www.dynamicdrive.com/">Dynamic Drive</a> <a class="menuitem submenuheader" href="http://www.dynamicdrive.com/style/" _fcksavedurl="http://www.dynamicdrive.com/style/" _fcksavedurl="http://www.dynamicdrive.com/style/" >CSS Examples</a> <div class="submenu"> <ul> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C1/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C2/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C4/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C6/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C5/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C7/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C8/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/all/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/all/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li> </ul> </div> <a class="menuitem" href="http://www.javascriptkit.com/jsref/" _fcksavedurl="http://www.javascriptkit.com/jsref/" _fcksavedurl="http://www.javascriptkit.com/jsref/">JavaScript Reference</a> <a class="menuitem" href="http://www.javascriptkit.com/domref/" _fcksavedurl="http://www.javascriptkit.com/domref/" _fcksavedurl="http://www.javascriptkit.com/domref/">DOM Reference</a> <a class="menuitem submenuheader" href="http://www.cssdrive.com" _fcksavedurl="http://www.cssdrive.com" _fcksavedurl="http://www.cssdrive.com">CSS Drive</a> <div class="submenu"> <ul> <li><a href="http://www.cssdrive.com" _fcksavedurl="http://www.cssdrive.com" _fcksavedurl="http://www.cssdrive.com">CSS Gallery</a></li> <li><a href="http://www.cssdrive.com/index.php/menudesigns/" _fcksavedurl="http://www.cssdrive.com/index.php/menudesigns/" _fcksavedurl="http://www.cssdrive.com/index.php/menudesigns/">Menu Gallery</a></li> <li><a href="http://www.cssdrive.com/index.php/news/" _fcksavedurl="http://www.cssdrive.com/index.php/news/" _fcksavedurl="http://www.cssdrive.com/index.php/news/">Web Design News</a></li> <li><a href="http://www.cssdrive.com/index.php/examples/" _fcksavedurl="http://www.cssdrive.com/index.php/examples/" _fcksavedurl="http://www.cssdrive.com/index.php/examples/">CSS Examples</a></li> <li><a href="http://www.cssdrive.com/index.php/main/csscompressor/" _fcksavedurl="http://www.cssdrive.com/index.php/main/csscompressor/" _fcksavedurl="http://www.cssdrive.com/index.php/main/csscompressor/">CSS Compressor</a></li> <li><a href="http://www.dynamicdrive.com/forums/forumdisplay.php?f=6" _fcksavedurl="http://www.dynamicdrive.com/forums/forumdisplay.php?f=6" _fcksavedurl="http://www.dynamicdrive.com/forums/forumdisplay.php?f=6">CSS Forums</a></li> </ul> <img src="http://i27.tinypic.com/sy7295.gif" _fcksavedurl="http://i27.tinypic.com/sy7295.gif" _fcksavedurl="http://i27.tinypic.com/sy7295.gif" style="margin: 10px 5px" /> </div> <a class="menuitem" href="http://www.codingforums.com/" _fcksavedurl="http://www.codingforums.com/" _fcksavedurl="http://www.codingforums.com/" style="border-bottom-width: 0">Coding Forums</a> </div> <p>Assuming the current page is named "current.htm", the below links when navigated to expands a particular header on that page:</p> <p> - <a href="current.htm?submenuheader=0" _fcksavedurl="current.htm?submenuheader=0" _fcksavedurl="current.htm?submenuheader=0">Expand 1st header within "submenuheader" header group</a><br /> </p> <p>Helpful links: </p> <p> - <a href="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment.htm" _fcksavedurl="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment.htm" _fcksavedurl="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment.htm">Adding arbitrary links hat expand/ collapse the contents</a><br /> - <a href="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment2.htm" _fcksavedurl="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment2.htm" _fcksavedurl="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment2.htm">Taking advantage of the oninit() and onopenclose() event handlers</a><br /> </p> </body> </html> kod önizleme
açılır menü4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <!--{13198125586710}--> <!--{13198125586711}--> <!--{13198125586712}--> <style type="text/css"> .urbangreymenu{ width: 190px; /width of menu/ } .urbangreymenu .headerbar{ font: bold 13px Verdana; color: white; background: #606060 url(arrowstop.gif) no-repeat 8px 6px; /last 2 values are the x and y coordinates of bullet image/ margin-bottom: 0; /bottom spacing between header and rest of content/ text-transform: uppercase; padding: 7px 0 7px 31px; /31px is left indentation of header text/ } .urbangreymenu .headerbar a{ text-decoration: none; color: white; display: block; } .urbangreymenu ul{ list-style-type: none; margin: 0; padding: 0; margin-bottom: 0; /bottom spacing between each UL and rest of content/ } .urbangreymenu ul li{ padding-bottom: 2px; /bottom spacing between menu items/ } .urbangreymenu ul li a{ font: normal 12px Arial; color: black; background: #E9E9E9; display: block; padding: 5px 0; line-height: 17px; padding-left: 8px; /link text is indented 8px/ text-decoration: none; } .urbangreymenu ul li a:visited{ color: black; } .urbangreymenu ul li a:hover{ /hover state CSS/ color: white; background: black; } </style> <body> <div class="urbangreymenu"> <h3 class="headerbar"><a href="http://www.dynamicdrive.com/style/" _fcksavedurl="http://www.dynamicdrive.com/style/" _fcksavedurl="http://www.dynamicdrive.com/style/">CSS Library</a></h3> <ul class="submenu"> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C1/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C2/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C4/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C6/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C5/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C7/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C8/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/all/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/all/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li> </ul> <h3 class="headerbar"><a href="http://www.javascriptkit.com" _fcksavedurl="http://www.javascriptkit.com" _fcksavedurl="http://www.javascriptkit.com">JavaScript Kit</a></h3> <ul class="submenu"> <li><a href="http://www.javascriptkit.com/cutpastejava.shtml" _fcksavedurl="http://www.javascriptkit.com/cutpastejava.shtml" _fcksavedurl="http://www.javascriptkit.com/cutpastejava.shtml" >Free JavaScripts</a></li> <li><a href="http://www.javascriptkit.com/javatutors/" _fcksavedurl="http://www.javascriptkit.com/javatutors/" _fcksavedurl="http://www.javascriptkit.com/javatutors/">JavaScript tutorials</a></li> <li><a href="http://www.javascriptkit.com/jsref/" _fcksavedurl="http://www.javascriptkit.com/jsref/" _fcksavedurl="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li> <li><a href="http://www.javascriptkit.com/dhtmltutors/" _fcksavedurl="http://www.javascriptkit.com/dhtmltutors/" _fcksavedurl="http://www.javascriptkit.com/dhtmltutors/">DHTML & CSS</a></li> <li><a href="http://www.javascriptkit.com/howto/" _fcksavedurl="http://www.javascriptkit.com/howto/" _fcksavedurl="http://www.javascriptkit.com/howto/">Web Design</a></li> <li><a href="http://www.javascriptkit.com/java/" _fcksavedurl="http://www.javascriptkit.com/java/" _fcksavedurl="http://www.javascriptkit.com/java/">Free Java Applets</a></li> </ul> </div> </body> </html> kod önizleme	açılır menü <!--{13198125586710}--> <style type="text/css"> html{ height:100%; } body{ height:100%; margin:0px; padding:0px; font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; } /* Entire pane / #dhtmlgoodies_xpPane{ background-color: / Blue background color / float:left; height:100%; width:200px; / Width of panel / } #dhtmlgoodies_xpPane .dhtmlgoodies_panel{ margin-left:10px; margin-right:10px; margin-top:10px; } #dhtmlgoodies_xpPane .panelContent{ font-size:0.7em; background-image:url('images/bg_pane_right.gif'); background-position:top right; background-repeat:repeat-y; border-left:1px solid #FFF; border-bottom:1px solid #FFF; padding-left:2px; padding-right:2px; overflow:hidden; position:relative; } #dhtmlgoodies_xpPane .panelContent div{ position:relative; } #dhtmlgoodies_xpPane .dhtmlgoodies_panel .topBar{ background-image:url('images/bg_panel_top_right.gif'); background-repeat:no-repeat; background-position:top right; height:25px; padding-right:5px; } #dhtmlgoodies_xpPane .dhtmlgoodies_panel .topBar span{ / Heading text options / line-height:25px; vertical-align:middle; font-family:arial; / Arial font / font-size:0.7em; / Font size / color:#215DC6; / Light blue color / font-weight:bold; / Bold font / padding-left:5px; / Space at the left / float:left; / Don't change this one */ } #dhtmlgoodies_xpPane .dhtmlgoodies_panel .topBar img{ float:right; cursorointer; } </style> <!--{13198125586717}--> <!--{13198125586711}--> <div id="dhtmlgoodies_xpPane" style="width: 173px; height: 541px"> <div class="dhtmlgoodies_panel"> <div><!--{13198125586712}--> <b>BURAYA MENÜ</b><font color="#FF0000"><br /> <b><font color="#000080">İşletim Sistemleri</font></b><br /> </font></div> </div> <div class="dhtmlgoodies_panel"> <div><!--{13198125586713}--> <b><font color="#000080">işlemciler</font></b><br /> <b><font color="#000080">Anakartlar</font></b><br /> <b><font color="#000080">Bellekler</font></b><br /> <b><font color="#000080">Ekran Kartları</font></b><br /> <b><font color="#000080">Sabit Diskler</font></b><br /> <b><font color="#000080">Monitörler</font></b><br /> <b><font color="#000080">Kasalar</font></b><br /> <b><font color="#000080">DVD-CD Sürücüler </font></b> <br /> <b><font color="#000080">Speaker</font></b><br /> <b><font color="#000080">Ağ Ürünleri</font></b><br /> Açıklama<br /> Açıklama <!--{13198125586714}--></div> </div> <div class="dhtmlgoodies_panel"> <div><!--{13198125586715}--> Açıklama<br /> Açıklama<br /> Açıklama<br /> Açıklama<br /> Açıklama <!--{13198125586716}--></div> </div> </div> <!--{13198125586718}--> kod önizleme	açılır menü6 <!--{13198125586710}--><!--{13198125586711}--><!--{13198125586712}--><style type="text/css"> .applemenu{ margin: 5px 0; padding: 0; width: 170px; /width of menu/ border: 1px solid #9A9A9A; } .applemenu div.silverheader a{ background: black url(silvergradient.gif) repeat-x center left; font: normal 12px Tahoma, "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif; color: white; display: block; position: relative; /To help in the anchoring of the ".statusicon" icon image/ 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(silvergradientover.gif); color: white; } .applemenu div.submenu{ /DIV that contains each sub menu/ background: white; padding: 5px; height: 300px; /Height that applies to all sub menu DIVs. A good idea when headers are toggled via "mouseover" instead of "click"/ }</style> <div class="applemenu"> <div class="silverheader"><a href="http://www.dynamicdrive.com" _fcksavedurl="http://www.dynamicdrive.com">Dynamic Drive</a></div> <div class="submenu">Some random content here<br /> </div> <div class="silverheader"><a href="http://www.dynamicdrive.com/style/" _fcksavedurl="http://www.dynamicdrive.com/style/">CSS Examples</a></div> <div class="submenu">Some random content here<br /> </div> <div class="silverheader"><a href="http://www.javascriptkit.com" _fcksavedurl="http://www.javascriptkit.com">JavaScript Kit</a></div> <div class="submenu">Some random content here<br /> </div> <div class="silverheader"><a href="http://www.cssdrive.com" _fcksavedurl="http://www.cssdrive.com">CSS Drive</a></div> <div class="submenu">Some random content here<br /> <img alt="" src="http://i27.tinypic.com/sy7295.gif" _fcksavedurl="http://i27.tinypic.com/sy7295.gif" /></div> <div class="silverheader"><a href="http://www.codingforums.com" _fcksavedurl="http://www.codingforums.com">Coding Forums</a></div> <div class="submenu">Some random content here<br /> </div> </div> <p>Assuming the current page is named "current.htm", the below links when navigated to expands a particular header on that page:</p> <p>- <a href="current.htm?silverheader=0" _fcksavedurl="current.htm?silverheader=0">Expand 1st header within "submenuheader" header group</a><br /> </p> <p>Helpful links:</p> <p>- <a href="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment.htm" _fcksavedurl="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment.htm">Adding arbitrary links hat expand/ collapse the contents</a><br /> - <a href="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment2.htm" _fcksavedurl="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment2.htm">Taking advantage of the oninit() and onopenclose() event handlers</a><br /> </p> kod önizleme
yeşil dikey menü <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <!--{13198125586710}--> <!--{13198125586711}--> <!--{13198125586712}--> <style type="text/css"> .arrowsidemenu{ width: 180px; /width of menu/ border-style: solid solid none solid; border-color: #94AA74; border-size: 1px; border-width: 1px; } .arrowsidemenu div a{ /header bar links/ font: bold 12px Verdana, Arial, Helvetica, sans-serif; display: block; background: transparent url(arrowgreen.gif) 100% 0; height: 24px; /Set to height of bg image-padding within link (ie: 32px - 4px - 4px)/ padding: 4px 0 4px 10px; line-height: 24px; /Set line-height of bg image-padding within link (ie: 32px - 4px - 4px)/ text-decoration: none; } .arrowsidemenu div a:link, .arrowsidemenu div a:visited{ color: #26370A; } .arrowsidemenu div a:hover{ background-position: 100% -32px; } .arrowsidemenu div.unselected a{ /header that's currently not selected/ color: #6F3700; } .arrowsidemenu div.selected a{ /header that's currently selected/ color: blue; background-position: 100% -64px !important; } .arrowsidemenu ul{ list-style-type: none; margin: 0; padding: 0; } .arrowsidemenu ul li{ border-bottom: 1px solid #a1c67b; } .arrowsidemenu ul li a{ /sub menu links/ display: block; font: normal 12px Verdana, Arial, Helvetica, sans-serif; text-decoration: none; color: black; padding: 5px 0; padding-left: 10px; border-left: 10px double #a1c67b; } .arrowsidemenu ul li a:hover{ background: #d5e5c1; } </style> <body> <div class="arrowsidemenu"> <div><a href="http://www.dynamicdrive.com" _fcksavedurl="http://www.dynamicdrive.com" title="Home">Home</a></div> <div class="menuheaders"><a href="http://www.dynamicdrive.com/style/" _fcksavedurl="http://www.dynamicdrive.com/style/" title="CSS">CSS Library</a></div> <ul class="menucontents"> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/all/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li> </ul> <div><a href="http://www.dynamicdrive.com/forums/" _fcksavedurl="http://www.dynamicdrive.com/forums/" title="Forums">Forums</a></div> <div class="menuheaders"><a href="http://www.javascriptkit.com" _fcksavedurl="http://www.javascriptkit.com" title="JavaScript">JavaScript</a></div> <ul class="menucontents"> <li><a href="http://www.javascriptkit.com/jsref/index.shtml" _fcksavedurl="http://www.javascriptkit.com/jsref/index.shtml">JavaScript Reference</a></li> <li><a href="http://www.javascriptkit.com/cutpastejava.shtml" _fcksavedurl="http://www.javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a></li> </ul> <div><a href="http://tools.dynamicdrive.com/" _fcksavedurl="http://tools.dynamicdrive.com/" title="Tools">Webmaster Tools</a></div> </div> </body> </html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> kod önizleme	sexy panels menu <style type="text/css"> .sexypanels{ list-style-type: none; margin: 0; padding: 0; width: 180px; /* width of menu / } .sexypanels li{ border-bottom: 1px solid white; / white border beneath each menu item / } .sexypanels li a{ background: #333 url(media/sexypanelright.gif) no-repeat right top; /color of menu by default/ font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana; display: block; color: white; width: auto; padding: 5px 0; / Vertical (top/bottom) padding for each menu link / text-indent: 8px; text-decoration: none; border-bottom: 1px solid black; /bottom border of menu link. Should be equal or darker to link's bgcolor/ } .sexypanels li a:visited, .sexypanels li a:active{ color: white; } .sexypanels li a:hover{ background-color: black; /color of menu onMouseover/ color: white; border-bottom: 1px solid black; /bottom border of menu link during hover. Should be equal or darker to link's hover's bgcolor*/ } </style> <!--{13198125586710}--><ul class="sexypanels"> <li><a href="http://www.dynamicdrive.com/" _fcksavedurl="http://www.dynamicdrive.com/">» Dynamic Drive</a></li> <li><a href="http://www.dynamicdrive.com/style/" _fcksavedurl="http://www.dynamicdrive.com/style/" >» CSS Examples</a></li> <li><a href="http://www.javascriptkit.com/jsref/" _fcksavedurl="http://www.javascriptkit.com/jsref/">» JavaScript Reference</a></li> <li><a href="http://www.javascriptkit.com/domref/" _fcksavedurl="http://www.javascriptkit.com/domref/">» DOM Reference</a></li> <li><a href="http://www.cssdrive.com" _fcksavedurl="http://www.cssdrive.com">» CSS Drive</a></li> <li class="lastitem"><a href="http://www.codingforums.com/" _fcksavedurl="http://www.codingforums.com/">» Coding Forums</a></li> </ul> kod önizleme	urban gride slide menu <style type="text/css"> .urbangreymenu{ width: 190px; /width of menu/ } .urbangreymenu .headerbar{ font: bold 13px Verdana; color: white; background: #606060 url(media/arrowstop.gif) no-repeat 8px 6px; /last 2 values are the x and y coordinates of bullet image/ margin-bottom: 0; /bottom spacing between header and rest of content/ text-transform: uppercase; padding: 7px 0 7px 31px; /31px is left indentation of header text/ } .urbangreymenu ul{ list-style-type: none; margin: 0; padding: 0; margin-bottom: 0; /bottom spacing between each UL and rest of content/ } .urbangreymenu ul li{ padding-bottom: 2px; /bottom spacing between menu items/ } .urbangreymenu ul li a{ font: normal 12px Arial; color: black; background: #E9E9E9; display: block; padding: 5px 0; line-height: 17px; padding-left: 8px; /link text is indented 8px/ text-decoration: none; } .urbangreymenu ul li a:visited{ color: black; } .urbangreymenu ul li a:hover{ /hover state CSS/ color: white; background: black; } </style> <div class="urbangreymenu"> <h3 class="headerbar">CSS Library</h3> <ul> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/all/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li> </ul> <h3 class="headerbar">JavaScript Kit</h3> <ul> <li><a href="http://www.javascriptkit.com/cutpastejava.shtml" _fcksavedurl="http://www.javascriptkit.com/cutpastejava.shtml" >Free JavaScripts</a></li> <li><a href="http://www.javascriptkit.com/javatutors/" _fcksavedurl="http://www.javascriptkit.com/javatutors/">JavaScript tutorials</a></li> <li><a href="http://www.javascriptkit.com/jsref/" _fcksavedurl="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li> <li><a href="http://www.javascriptkit.com/dhtmltutors/" _fcksavedurl="http://www.javascriptkit.com/dhtmltutors/">DHTML & CSS</a></li> <li><a href="http://www.javascriptkit.com/howto/" _fcksavedurl="http://www.javascriptkit.com/howto/">Web Design</a></li> <li><a href="http://www.javascriptkit.com/java/" _fcksavedurl="http://www.javascriptkit.com/java/">Free Java Applets</a></li> </ul> </div> kod önizleme
sliding door menu <style type="text/css"> .slidedoormenu{ list-style-type: none; margin: 0; padding: 0; width: 180px; /* width of menu (don't forget to add border with below!) / border-left: 8px solid #ffa1a3; / thick left border of menu / } .slidedoormenu li{ border-bottom: 1px solid #885b5c; / Gray border beneath each menu item / } .slidedoormenu li a{ background: white url(media/vstrip.gif) repeat-y left top; / Background image positioned to the left(v) top(h) corner initially / font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana; display: block; color: black; width: auto; border-bottom: 1px solid white; / White border beneath each menu item link, to add depth / padding: 7px 0; / Vertical (top/bottom) padding for each menu link / text-indent: 8px; text-decoration: none; } .slidedoormenu li a:visited, .slidedoormenu li a:active{ color: black; } .slidedoormenu li a:hover{ background-position: -387px 0; / Shift background image horizontally 387px, or the start of the 2nd background image / color: black; } .slidedoormenu li.lastitem, .slidedoormenu li.lastitem a{ border-bottom-width: 0; / For last menu item within menu, remove bottom border / } .slidedoormenu li.lastitem a{ padding: 8px 0; / increase vertical border of last menu link by 2px (default is padding: 7px 0) to account for removed border width */ } </style> <!--{13198125586710}--><ul class="slidedoormenu"> <li><a href="http://www.dynamicdrive.com/" _fcksavedurl="http://www.dynamicdrive.com/">» Dynamic Drive</a></li> <li><a href="http://www.dynamicdrive.com/style/" _fcksavedurl="http://www.dynamicdrive.com/style/" >» CSS Examples</a></li> <li><a href="http://www.javascriptkit.com/jsref/" _fcksavedurl="http://www.javascriptkit.com/jsref/">» JavaScript Reference</a></li> <li><a href="http://www.javascriptkit.com/domref/" _fcksavedurl="http://www.javascriptkit.com/domref/">» DOM Reference</a></li> <li><a href="http://www.cssdrive.com" _fcksavedurl="http://www.cssdrive.com">» CSS Drive</a></li> <li class="lastitem"><a href="http://www.codingforums.com/" _fcksavedurl="http://www.codingforums.com/">» Coding Forums</a></li> </ul> kod önizleme	glossy menu <style type="text/css"> .glossymenu{ list-style-type: none; margin: 5px 0; padding: 0; width: 170px; border: 1px solid #9A9A9A; border-bottom-width: 0; } .glossymenu li a{ background: white url(media/glossyback.gif) repeat-x bottom left; font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif; color: white; display: block; width: auto; padding: 3px 0; padding-left: 10px; text-decoration: none; } * html .glossymenu li a{ /IE only. Actual menu width minus left padding of A element (10px) / width: 160px; } .glossymenu li a:visited, .glossymenu li a:active{ color: white; } .glossymenu li a:hover{ background-image: url(media/glossyback2.gif); } </style><ul class="glossymenu"> <li><a href="http://www.dynamicdrive.com/" _fcksavedurl="http://www.dynamicdrive.com/" >Dynamic Drive</a></li> <li><a href="http://www.dynamicdrive.com/style/" _fcksavedurl="http://www.dynamicdrive.com/style/" >CSS Examples</a></li> <li><a href="http://www.javascriptkit.com/jsref/" _fcksavedurl="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li> <li><a href="http://www.javascriptkit.com/domref/" _fcksavedurl="http://www.javascriptkit.com/domref/">DOM Reference</a></li> <li><a href="http://www.cssdrive.com" _fcksavedurl="http://www.cssdrive.com">CSS Drive</a></li> <li><a href="http://www.codingforums.com/" _fcksavedurl="http://www.codingforums.com/" style="border-bottom-width: 0">Coding Forums</a></li> </ul> kod önizleme	mavi blok menu <style type="text/css"> #ddblueblockmenu{ border: 1px solid black; border-bottom-width: 0; width: 185px; } #ddblueblockmenu ul{ margin: 0; padding: 0; list-style-type: none; font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif; } #ddblueblockmenu li a{ display: block; padding: 3px 0; padding-left: 9px; width: 169px; /185px minus all left/right paddings and margins/ text-decoration: none; color: white; background-color: #2175bc; border-bottom: 1px solid #90bade; border-left: 7px solid #1958b7; } * html #ddblueblockmenu li a{ /IE only / width: 187px; /IE 5/ width: 169px; /185px minus all left/right paddings and margins/ } #ddblueblockmenu li a:hover { background-color: #2586d7; border-left-color: #1c64d1; } #ddblueblockmenu div.menutitle{ color: white; border-bottom: 1px solid black; padding: 1px 0; padding-left: 5px; background-color: black; font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif; } </style><div id="ddblueblockmenu"> <div class="menutitle">Dynamic Drive</div> <ul> <li><a href="http://www.dynamicdrive.com" _fcksavedurl="http://www.dynamicdrive.com">Home</a></li> <li><a href="http://www.dynamicdrive.com/new.htm" _fcksavedurl="http://www.dynamicdrive.com/new.htm">What's New</a></li> <li><a href="http://www.dynamicdrive.com/revised.htm" _fcksavedurl="http://www.dynamicdrive.com/revised.htm">What's Revised</a></li> <li><a href="http://www.dynamicdrive.com/forums/" _fcksavedurl="http://www.dynamicdrive.com/forums/">Help Forums</a></li> </ul> <div class="menutitle">CSS Library</div> <ul> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image Effects</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form Effects</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C5/">Boxes & containers</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C7/" style="border-bottom-color: black">Links & Buttons</a></li> </ul> </div> kod önizleme
Jquery slider menü <FCK:meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" /> <style type="text/css"> body { background: #f0f0f0; margin: 0; padding: 0; font: 10px normal Verdana, Arial, Helvetica, sans-serif; color: #444; } h1 {font-size: 3em; margin: 20px 0;} .container {width: 500px; margin: 10px auto;} ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 32px; border-bottom: 1px solid #999; border-left: 1px solid #999; width: 100%; } ul.tabs li { float: left; margin: 0; padding: 0; height: 31px; line-height: 31px; border: 1px solid #999; border-left: none; margin-bottom: -1px; background: #e0e0e0; overflow: hidden; position: relative; } ul.tabs li a { text-decoration: none; color: #000; display: block; font-size: 1.2em; padding: 0 20px; border: 1px solid #fff; outline: none; } ul.tabs li a:hover { background: #ccc; } html ul.tabs li.active, html ul.tabs li.active a:hover { background: #fff; border-bottom: 1px solid #fff; } .tab_container { border: 1px solid #999; border-top: none; clear: both; float: left; width: 100%; background: #fff; -moz-border-radius-bottomright: 5px; -khtml-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -khtml-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; } .tab_content { padding: 20px; font-size: 1.2em; } .tab_content h2 { font-weight: normal; padding-bottom: 10px; border-bottom: 1px dashed #ddd; font-size: 1.8em; } .tab_content h3 a{ color: #254588; } .tab_content img { float: left; margin: 0 20px 20px 0; border: 1px solid #ddd; padding: 5px; } </style> <!--{13198125586710}--> <!--{13198125586711}--> <div class="container"> <h1>Simple Tabs w/ CSS & jQuery</h1> <ul class="tabs"> <li><a href="#tab1" _fcksavedurl="#tab1">menü1</a></li> <li><a href="#tab2" _fcksavedurl="#tab2">menü2</a></li> <li><a href="#tab3" _fcksavedurl="#tab3">menü3</a></li> <li><a href="#tab4" _fcksavedurl="#tab4">menü4</a></li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content"> <h2>Gallery</h2> <a href="http://www.designbombs.com/light/simona-munteanu/" _fcksavedurl="http://www.designbombs.com/light/simona-munteanu/"><img alt="" src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/simonamunteanu_thumb.gif" _fcksavedurl="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/simonamunteanu_thumb.gif" /></a> <h3><a href="http://kodcudost.tr.gg" _fcksavedurl="http://kodcudost.tr.gg">www.kodcudost.tr.gg</a></h3> <p>buraya yazı 1</p> </div> <div id="tab2" class="tab_content"> <h2>Submit</h2> <a href="http://www.designbombs.com/blog/sketch-blog/" _fcksavedurl="http://www.designbombs.com/blog/sketch-blog/"> <img alt="" src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/sketchblog_thumb.gif" _fcksavedurl="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/sketchblog_thumb.gif" /></a> <h3><a href="http://kodcudost.tr.gg" _fcksavedurl="http://kodcudost.tr.gg">kodcudost.tr.gg</a></h3> <p>buraya yazı2</p> </div> <div id="tab3" class="tab_content"> <h2>Resources</h2> <a href="http://www.designbombs.com/fashion/lukas-mynus/" _fcksavedurl="http://www.designbombs.com/fashion/lukas-mynus/"><img alt="" src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/mynus_thumb.gif" _fcksavedurl="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/mynus_thumb.gif" /></a> <h3><a href="http://kodcudost.tr.gg" _fcksavedurl="http://kodcudost.tr.gg">www.kodcudost.tr.gg</a></h3> <p>buraya yazı3</p> </div> <div id="tab4" class="tab_content"> <h2>Contact</h2> <a href="http://www.designbombs.com/illustrations/esteban-munoz/" _fcksavedurl="http://www.designbombs.com/illustrations/esteban-munoz/"> <img alt="" src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/estebanmunoz_thumb.gif" _fcksavedurl="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/estebanmunoz_thumb.gif" /></a> <h3><a href="http://kodcudost.tr.gg" _fcksavedurl="http://kodcudost.tr.gg">kodcudost.tr.gg</a></h3> <p>buraya yazı4</p> </div> </div> </div> <div style="clear: both; display: block; padding: 10px 0; text-align:center;"> </div> </meta> kod önizleme	jquery açılır menü <FCK:meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" /> <style type="text/css"> ul { margin: 0; padding: 0; list-style: none; width: 150px; border-bottom: 1px solid #000; } ul li { position: relative; } li ul { position: absolute; left: 149px; top: 0; display: none; } ul li a { display: block; text-decoration: none; background-color: #E2E2E2; padding: 5px; border:1px solid #000; border-bottom:0; } /* IE. gizle / html ul li { float: left; height: 1%; } * html ul li a { height: 1%; } /* IE den gizleme sonu */ li:hover ul, li.over ul { display: block; } </style> <!--{13198125586710}--> <ul id="menu"> <li><a href="buraya link" _fcksavedurl="buraya link">Anasayfa</a></li> <li><a href="buraya link" _fcksavedurl="buraya link">BURAYA MENÜ</a> <ul> <li><a href="buraya link" _fcksavedurl="buraya link">BURAYA ALT MENÜ </a></li> <li><a href="buraya link" _fcksavedurl="buraya link">BURAYA ALT MENÜ </a></li> <li><a href="buraya link" _fcksavedurl="buraya link">BURAYA ALT MENÜ</a></li> </ul> </li> <li><a href="buraya link" _fcksavedurl="buraya link">BURAYA MENÜ</a> <ul> <li><a href="buraya link" _fcksavedurl="buraya link">BURAYA ALT MENÜ</a></li> <li><a href="buraya link" _fcksavedurl="buraya link">BURAYA ALT MENÜ</a></li> <li><a href="buraya link" _fcksavedurl="buraya link">BURAYA ALT MENÜ</a></li> <li><a href="buraya link" _fcksavedurl="buraya link">BURAYA ALT MENÜ </a></li> <li><a href="buraya link" _fcksavedurl="buraya link">BURAYA ALT MENÜ</a></li> </ul> </li> </ul> </meta> kod önizleme	renkli açılır menü <link rel="stylesheet" type="text/css" href="http://tugrawebdata.com.nu/renklidikeymenu/demo.css" /><!--{13198125586710}--><!--{13198125586711}--><!--{13198125586712}--> <div id="main" style="width: 326px; height: 952px"> <ul class="container"> <li class="menu"> <ul> <li class="button"><a class="green" href="#" _fcksavedurl="#">Kiwis </a></li> <li class="dropdown"> <ul> <li><a onclick_fckprotectedatt_fckprotectedatt="%20onclick_fckprotectedatt%3D%22%2520onclick%253D%2522%2524('.button%2520a').eq(2).click()%253Breturn%2520false%253B%2522%22" href="#" _fcksavedurl="#">Open Grapes Section</a></li> <li><a onclick_fckprotectedatt_fckprotectedatt="%20onclick_fckprotectedatt%3D%22%2520onclick%253D%2522%2524('.dropdown').slideUp('slow')%253Breturn%2520false%253B%2522%22" href="#" _fcksavedurl="#">Close This Section</a></li> <li><a href="http://en.wikipedia.org/wiki/Kiwifruit" _fcksavedurl="http://en.wikipedia.org/wiki/Kiwifruit">Read on Wikipedia</a></li> <li><a href="http://www.flickr.com/search/?w=all&q=kiwi&m=text" _fcksavedurl="http://www.flickr.com/search/?w=all&q=kiwi&m=text">Flickr Stream</a></li> </ul> </li> </ul> </li> <li class="menu"> <ul> <li class="button"><a class="orange" href="#" _fcksavedurl="#">Oranges </a></li> <li class="dropdown"> <ul> <li><a onclick_fckprotectedatt_fckprotectedatt="%20onclick_fckprotectedatt%3D%22%2520onclick%253D%2522%2524('.button%2520a%253Alast').click()%253Breturn%2520false%253B%2522%22" href="#" _fcksavedurl="#">Open Last Section</a></li> <li><a href="http://en.wikipedia.org/wiki/Orange_%28fruit%29" _fcksavedurl="http://en.wikipedia.org/wiki/Orange_%28fruit%29">Wikipedia Page</a></li> <li><a href="http://www.flickr.com/search/?w=all&q=oranges&m=text" _fcksavedurl="http://www.flickr.com/search/?w=all&q=oranges&m=text">Flickr Photos</a></li> </ul> </li> </ul> </li> <li class="menu"> <ul> <li class="button"><a class="blue" href="#" _fcksavedurl="#">Grapes </a></li> <li class="dropdown"> <ul> <li><a href="http://en.wikipedia.org/wiki/Grapes" _fcksavedurl="http://en.wikipedia.org/wiki/Grapes">Wiki page</a></li> <li>Text label 1</li> <li>Text label 2</li> <li><a href="http://www.flickr.com/search/?w=all&q=grapes&m=text" _fcksavedurl="http://www.flickr.com/search/?w=all&q=grapes&m=text">Flickr Stream</a></li> </ul> </li> </ul> </li> <li class="menu"> <ul> <li class="button"><a class="red" href="#" _fcksavedurl="#">Strawberries </a></li> <li class="dropdown"> <ul> <li><a href="http://en.wikipedia.org/wiki/Strawberry" _fcksavedurl="http://en.wikipedia.org/wiki/Strawberry">Wiki page</a></li> <li><a href="http://www.flickr.com/photos/mojeecat/368540120/" _fcksavedurl="http://www.flickr.com/photos/mojeecat/368540120/">Strawberry Pie</a></li> <li><a href="http://www.flickr.com/search/?w=all&q=strawberries&m=text" _fcksavedurl="http://www.flickr.com/search/?w=all&q=strawberries&m=text">Photo Stream</a></li> </ul> </li> </ul> </li> </ul> <div class="clear"> </div> </div> kod önizleme
açılır kapanır menü <link rel="P3Pv1" href="http://www.stunicholls.com/w3c/p3p.xml" /> <link rel="meta" href="http://www.stunicholls.com/labels.rdf" type="application/rdf+xml" title="ICRA labels" /> <FCK:meta name="robots" content="all" /> <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" /> <link rel="icon" href="../favicon.ico" type="image/ico" /> <link rel="stylesheet" media="all" type="text/css" href="../css/stunicholls.css" /> <style type="text/css"> /* ================================================================ This copyright notice must be kept untouched in the stylesheet at all times. The original version of this stylesheet and the associated (x)html is available at http://www.stunicholls.com/menu/vertical-concertina-6.html Copyright (c) 2005-2008 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== / / #slide height = (number of top level links - 1) * height of links + inner div height / #slide {padding:0; margin:0; list-style:none; width:190px; height:315px; border:1px solid #ccc; position:relative; overflow:hidden; font-family: verdana, sans-serif; font-size:11px; } #slide li.sub, #slide li.top {display:block; float:left; height:24px; line-height:24px; width:190px; color:#000; background:#eee; text-decoration:none;border-bottom:1px solid #fff; text-indent:20px; overflow:hidden; cursor:pointer;} #slide li.sub {background:#eee url(arrows/out.gif) no-repeat 5px 8px;} #slide li.top a {text-decoration:none; color:#000; display:block; background:url(arrows/out.gif) no-repeat 5px 8px;} #slide li.top a:hover {color:#069; background:#ddd url(arrows/out-over.gif) no-repeat 5px 8px;} #slide li.clicked {color:#800; background:#ddd url(arrows/down.gif) no-repeat 5px 8px;} / #slide li.sub div height = (maximum sub lines * sub line height) + top level link height(variable fY in jQuery) */ #slide li.sub div {background:#fff; height:165px; width:160px; padding:0 15px; line-height:1.2em; font-family: verdana, sans-serif; text-indent:0;} #slide li div ul {padding:0; margin:0; list-style:none;} #slide li div ul li {float:left; height:20px; width:100%;} #slide li div ul li a {padding:0; margin:0;color:#888; text-decoration:none; background:#fff url(arrows/out.gif) no-repeat 5px 6px; font-size:10px; display:block; border-bottom:1px solid #ddd; height:19px; line-height:19px; width:100%; text-indent:20px;} #slide li div ul li a:hover {color:#069; background:#fff url(arrows/out-over.gif) no-repeat 5px 6px;} </style> <!--{13198125586711}--> <!--{13198125586712}--> <div id="wrapper"> <div id="heading"> <div id="search"><!--{13198125586710}--> <form id="seek" method="get" action="http://www.google.com/custom"> <p><font size="5"><b><br /> </b></font></p> </form> </div> </div> <div id="content"> <ul id="slide"> <li class="top"><a href="#url" _fcksavedurl="#url">ANA SAYFA</a></li> <li class="sub">BURAYA MENÜ <div> <ul> <li><a href="../index.html" _fcksavedurl="../index.html">BURAYA ALT MENÜ</a></li> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> </ul> </div> </li> <li class="sub">BURAYA MENÜ <div> <ul> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> </ul> </div> </li> <li class="sub">BURAYA MENÜ <div> <ul> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> </ul> </div> </li> <li class="sub">BURAYA MENÜ <div> <ul> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> </ul> </div> </li> <li class="sub">BURAYA MENÜ <div> <ul> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> </ul> </div> </li> <li class="top"><a href="#url" _fcksavedurl="#url">about us</a></li> </ul> </div> <!--{13198125586713}--> <!--{13198125586714}--></div> </meta> kod önizleme	eklenecek	eklenecek

açılır menü1 <style type="text/css"> .sidebarmenu ul{ margin: 0; padding: 0; list-style-type: none; font: bold 13px Verdana; width: 180px; /* Main Menu Item widths / border-bottom: 1px solid #ccc; } .sidebarmenu ul li{ position: relative; } / Top level menu links style / .sidebarmenu ul li a{ display: block; overflow: auto; /force hasLayout in IE7 / color: white; text-decoration: none; padding: 6px; border-bottom: 1px solid #778; border-right: 1px solid #778; } .sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{ background-color: #012D58; /background of tabs (default state)/ } .sidebarmenu ul li a:visited{ color: white; } .sidebarmenu ul li a:hover{ background-color: black; } /Sub level menu items / .sidebarmenu ul li ul{ position: absolute; width: 170px; /Sub Menu Items width / top: 0; visibility: hidden; } .sidebarmenu a.subfolderstyle{ background: url(right.gif) no-repeat 97% 50%; } / Holly Hack for IE / html .sidebarmenu ul li { float: left; height: 1%; } * html .sidebarmenu ul li a { height: 1%; } /* End */ </style><!--{13198125709060}--> <div class="sidebarmenu"> <ul id="sidebarmenu1"> <li><a href="#" _fcksavedurl="#">Item 1</a></li> <li><a href="#" _fcksavedurl="#">Item 2</a></li> <li><a href="#" _fcksavedurl="#">Folder 1</a> <ul> <li><a href="#" _fcksavedurl="#">Sub Item 1.1</a></li> <li><a href="#" _fcksavedurl="#">Sub Item 1.2</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#">Item 3</a></li> <li><a href="#" _fcksavedurl="#">Folder 2</a> <ul> <li><a href="#" _fcksavedurl="#">Sub Item 2.1</a></li> <li><a href="#" _fcksavedurl="#">Folder 2.1</a> <ul> <li><a href="#" _fcksavedurl="#">Sub Item 2.1.1</a></li> <li><a href="#" _fcksavedurl="#">Sub Item 2.1.2</a></li> <li><a href="#" _fcksavedurl="#">Sub Item 2.1.3</a></li> <li><a href="#" _fcksavedurl="#">Sub Item 2.1.4</a></li> </ul> </li> </ul> </li> <li><a href="#" _fcksavedurl="#">Item 4</a></li> </ul> </div> kod önizleme	açılır menü2 <style type="text/css"> .suckerdiv ul{ margin: 0; padding: 0; list-style-type: none; width: 160px; /* Width of Menu Items / border-bottom: 1px solid #ccc; } .suckerdiv ul li{ position: relative; } /Sub level menu items / .suckerdiv ul li ul{ position: absolute; width: 170px; /sub menu width/ top: 0; visibility: hidden; } / Sub level menu links style / .suckerdiv ul li a{ display: block; overflow: auto; /force hasLayout in IE7 / color: black; text-decoration: none; background: #fff; padding: 1px 5px; border: 1px solid #ccc; border-bottom: 0; } .suckerdiv ul li a:visited{ color: black; } .suckerdiv ul li a:hover{ background-color: yellow; } .suckerdiv .subfolderstyle{ background: url(media/arrow-list.gif) no-repeat center right; } / Holly Hack for IE / html .suckerdiv ul li { float: left; height: 1%; } * html .suckerdiv ul li a { height: 1%; } /* End */ </style> <!--{13198125709060}--><div class="suckerdiv"> <ul id="suckertree1"> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Item 1</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Item 2</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Folder 1</a> <ul> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Sub Item 1.1</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Sub Item 1.2</a></li> </ul> </li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Item 3</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Folder 2</a> <ul> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Sub Item 2.1</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Folder 2.1</a> <ul> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Sub Item 2.1.1</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Sub Item 2.1.2</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Sub Item 2.1.3</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Sub Item 2.1.4</a></li> </ul> </li> </ul> </li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Item 4</a></li> </ul> </div> kod önizleme	açılır menü 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <!--{13198125586710}--> <!--{13198125586711}--> <!--{13198125586712}--> <style type="text/css"> .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(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(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; } </style> </head> <body> <div class="glossymenu"> <a class="menuitem" href="http://www.dynamicdrive.com/" _fcksavedurl="http://www.dynamicdrive.com/" _fcksavedurl="http://www.dynamicdrive.com/">Dynamic Drive</a> <a class="menuitem submenuheader" href="http://www.dynamicdrive.com/style/" _fcksavedurl="http://www.dynamicdrive.com/style/" _fcksavedurl="http://www.dynamicdrive.com/style/" >CSS Examples</a> <div class="submenu"> <ul> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C1/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C2/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C4/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C6/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C5/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C7/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C8/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/all/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/all/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li> </ul> </div> <a class="menuitem" href="http://www.javascriptkit.com/jsref/" _fcksavedurl="http://www.javascriptkit.com/jsref/" _fcksavedurl="http://www.javascriptkit.com/jsref/">JavaScript Reference</a> <a class="menuitem" href="http://www.javascriptkit.com/domref/" _fcksavedurl="http://www.javascriptkit.com/domref/" _fcksavedurl="http://www.javascriptkit.com/domref/">DOM Reference</a> <a class="menuitem submenuheader" href="http://www.cssdrive.com" _fcksavedurl="http://www.cssdrive.com" _fcksavedurl="http://www.cssdrive.com">CSS Drive</a> <div class="submenu"> <ul> <li><a href="http://www.cssdrive.com" _fcksavedurl="http://www.cssdrive.com" _fcksavedurl="http://www.cssdrive.com">CSS Gallery</a></li> <li><a href="http://www.cssdrive.com/index.php/menudesigns/" _fcksavedurl="http://www.cssdrive.com/index.php/menudesigns/" _fcksavedurl="http://www.cssdrive.com/index.php/menudesigns/">Menu Gallery</a></li> <li><a href="http://www.cssdrive.com/index.php/news/" _fcksavedurl="http://www.cssdrive.com/index.php/news/" _fcksavedurl="http://www.cssdrive.com/index.php/news/">Web Design News</a></li> <li><a href="http://www.cssdrive.com/index.php/examples/" _fcksavedurl="http://www.cssdrive.com/index.php/examples/" _fcksavedurl="http://www.cssdrive.com/index.php/examples/">CSS Examples</a></li> <li><a href="http://www.cssdrive.com/index.php/main/csscompressor/" _fcksavedurl="http://www.cssdrive.com/index.php/main/csscompressor/" _fcksavedurl="http://www.cssdrive.com/index.php/main/csscompressor/">CSS Compressor</a></li> <li><a href="http://www.dynamicdrive.com/forums/forumdisplay.php?f=6" _fcksavedurl="http://www.dynamicdrive.com/forums/forumdisplay.php?f=6" _fcksavedurl="http://www.dynamicdrive.com/forums/forumdisplay.php?f=6">CSS Forums</a></li> </ul> <img src="http://i27.tinypic.com/sy7295.gif" _fcksavedurl="http://i27.tinypic.com/sy7295.gif" _fcksavedurl="http://i27.tinypic.com/sy7295.gif" style="margin: 10px 5px" /> </div> <a class="menuitem" href="http://www.codingforums.com/" _fcksavedurl="http://www.codingforums.com/" _fcksavedurl="http://www.codingforums.com/" style="border-bottom-width: 0">Coding Forums</a> </div> <p>Assuming the current page is named "current.htm", the below links when navigated to expands a particular header on that page:</p> <p> - <a href="current.htm?submenuheader=0" _fcksavedurl="current.htm?submenuheader=0" _fcksavedurl="current.htm?submenuheader=0">Expand 1st header within "submenuheader" header group</a><br /> </p> <p>Helpful links: </p> <p> - <a href="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment.htm" _fcksavedurl="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment.htm" _fcksavedurl="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment.htm">Adding arbitrary links hat expand/ collapse the contents</a><br /> - <a href="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment2.htm" _fcksavedurl="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment2.htm" _fcksavedurl="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment2.htm">Taking advantage of the oninit() and onopenclose() event handlers</a><br /> </p> </body> </html> kod önizleme
açılır menü4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <!--{13198125586710}--> <!--{13198125586711}--> <!--{13198125586712}--> <style type="text/css"> .urbangreymenu{ width: 190px; /width of menu/ } .urbangreymenu .headerbar{ font: bold 13px Verdana; color: white; background: #606060 url(arrowstop.gif) no-repeat 8px 6px; /last 2 values are the x and y coordinates of bullet image/ margin-bottom: 0; /bottom spacing between header and rest of content/ text-transform: uppercase; padding: 7px 0 7px 31px; /31px is left indentation of header text/ } .urbangreymenu .headerbar a{ text-decoration: none; color: white; display: block; } .urbangreymenu ul{ list-style-type: none; margin: 0; padding: 0; margin-bottom: 0; /bottom spacing between each UL and rest of content/ } .urbangreymenu ul li{ padding-bottom: 2px; /bottom spacing between menu items/ } .urbangreymenu ul li a{ font: normal 12px Arial; color: black; background: #E9E9E9; display: block; padding: 5px 0; line-height: 17px; padding-left: 8px; /link text is indented 8px/ text-decoration: none; } .urbangreymenu ul li a:visited{ color: black; } .urbangreymenu ul li a:hover{ /hover state CSS/ color: white; background: black; } </style> <body> <div class="urbangreymenu"> <h3 class="headerbar"><a href="http://www.dynamicdrive.com/style/" _fcksavedurl="http://www.dynamicdrive.com/style/" _fcksavedurl="http://www.dynamicdrive.com/style/">CSS Library</a></h3> <ul class="submenu"> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C1/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C2/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C4/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C6/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C5/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C7/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C8/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/all/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/all/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li> </ul> <h3 class="headerbar"><a href="http://www.javascriptkit.com" _fcksavedurl="http://www.javascriptkit.com" _fcksavedurl="http://www.javascriptkit.com">JavaScript Kit</a></h3> <ul class="submenu"> <li><a href="http://www.javascriptkit.com/cutpastejava.shtml" _fcksavedurl="http://www.javascriptkit.com/cutpastejava.shtml" _fcksavedurl="http://www.javascriptkit.com/cutpastejava.shtml" >Free JavaScripts</a></li> <li><a href="http://www.javascriptkit.com/javatutors/" _fcksavedurl="http://www.javascriptkit.com/javatutors/" _fcksavedurl="http://www.javascriptkit.com/javatutors/">JavaScript tutorials</a></li> <li><a href="http://www.javascriptkit.com/jsref/" _fcksavedurl="http://www.javascriptkit.com/jsref/" _fcksavedurl="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li> <li><a href="http://www.javascriptkit.com/dhtmltutors/" _fcksavedurl="http://www.javascriptkit.com/dhtmltutors/" _fcksavedurl="http://www.javascriptkit.com/dhtmltutors/">DHTML & CSS</a></li> <li><a href="http://www.javascriptkit.com/howto/" _fcksavedurl="http://www.javascriptkit.com/howto/" _fcksavedurl="http://www.javascriptkit.com/howto/">Web Design</a></li> <li><a href="http://www.javascriptkit.com/java/" _fcksavedurl="http://www.javascriptkit.com/java/" _fcksavedurl="http://www.javascriptkit.com/java/">Free Java Applets</a></li> </ul> </div> </body> </html> kod önizleme	açılır menü <!--{13198125586710}--> <style type="text/css"> html{ height:100%; } body{ height:100%; margin:0px; padding:0px; font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; } /* Entire pane / #dhtmlgoodies_xpPane{ background-color: / Blue background color / float:left; height:100%; width:200px; / Width of panel / } #dhtmlgoodies_xpPane .dhtmlgoodies_panel{ margin-left:10px; margin-right:10px; margin-top:10px; } #dhtmlgoodies_xpPane .panelContent{ font-size:0.7em; background-image:url('images/bg_pane_right.gif'); background-position:top right; background-repeat:repeat-y; border-left:1px solid #FFF; border-bottom:1px solid #FFF; padding-left:2px; padding-right:2px; overflow:hidden; position:relative; } #dhtmlgoodies_xpPane .panelContent div{ position:relative; } #dhtmlgoodies_xpPane .dhtmlgoodies_panel .topBar{ background-image:url('images/bg_panel_top_right.gif'); background-repeat:no-repeat; background-position:top right; height:25px; padding-right:5px; } #dhtmlgoodies_xpPane .dhtmlgoodies_panel .topBar span{ / Heading text options / line-height:25px; vertical-align:middle; font-family:arial; / Arial font / font-size:0.7em; / Font size / color:#215DC6; / Light blue color / font-weight:bold; / Bold font / padding-left:5px; / Space at the left / float:left; / Don't change this one */ } #dhtmlgoodies_xpPane .dhtmlgoodies_panel .topBar img{ float:right; cursorointer; } </style> <!--{13198125586717}--> <!--{13198125586711}--> <div id="dhtmlgoodies_xpPane" style="width: 173px; height: 541px"> <div class="dhtmlgoodies_panel"> <div><!--{13198125586712}--> <b>BURAYA MENÜ</b><font color="#FF0000"><br /> <b><font color="#000080">İşletim Sistemleri</font></b><br /> </font></div> </div> <div class="dhtmlgoodies_panel"> <div><!--{13198125586713}--> <b><font color="#000080">işlemciler</font></b><br /> <b><font color="#000080">Anakartlar</font></b><br /> <b><font color="#000080">Bellekler</font></b><br /> <b><font color="#000080">Ekran Kartları</font></b><br /> <b><font color="#000080">Sabit Diskler</font></b><br /> <b><font color="#000080">Monitörler</font></b><br /> <b><font color="#000080">Kasalar</font></b><br /> <b><font color="#000080">DVD-CD Sürücüler </font></b> <br /> <b><font color="#000080">Speaker</font></b><br /> <b><font color="#000080">Ağ Ürünleri</font></b><br /> Açıklama<br /> Açıklama <!--{13198125586714}--></div> </div> <div class="dhtmlgoodies_panel"> <div><!--{13198125586715}--> Açıklama<br /> Açıklama<br /> Açıklama<br /> Açıklama<br /> Açıklama <!--{13198125586716}--></div> </div> </div> <!--{13198125586718}--> kod önizleme	açılır menü6 <!--{13198125586710}--><!--{13198125586711}--><!--{13198125586712}--><style type="text/css"> .applemenu{ margin: 5px 0; padding: 0; width: 170px; /width of menu/ border: 1px solid #9A9A9A; } .applemenu div.silverheader a{ background: black url(silvergradient.gif) repeat-x center left; font: normal 12px Tahoma, "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif; color: white; display: block; position: relative; /To help in the anchoring of the ".statusicon" icon image/ 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(silvergradientover.gif); color: white; } .applemenu div.submenu{ /DIV that contains each sub menu/ background: white; padding: 5px; height: 300px; /Height that applies to all sub menu DIVs. A good idea when headers are toggled via "mouseover" instead of "click"/ }</style> <div class="applemenu"> <div class="silverheader"><a href="http://www.dynamicdrive.com" _fcksavedurl="http://www.dynamicdrive.com">Dynamic Drive</a></div> <div class="submenu">Some random content here<br /> </div> <div class="silverheader"><a href="http://www.dynamicdrive.com/style/" _fcksavedurl="http://www.dynamicdrive.com/style/">CSS Examples</a></div> <div class="submenu">Some random content here<br /> </div> <div class="silverheader"><a href="http://www.javascriptkit.com" _fcksavedurl="http://www.javascriptkit.com">JavaScript Kit</a></div> <div class="submenu">Some random content here<br /> </div> <div class="silverheader"><a href="http://www.cssdrive.com" _fcksavedurl="http://www.cssdrive.com">CSS Drive</a></div> <div class="submenu">Some random content here<br /> <img alt="" src="http://i27.tinypic.com/sy7295.gif" _fcksavedurl="http://i27.tinypic.com/sy7295.gif" /></div> <div class="silverheader"><a href="http://www.codingforums.com" _fcksavedurl="http://www.codingforums.com">Coding Forums</a></div> <div class="submenu">Some random content here<br /> </div> </div> <p>Assuming the current page is named "current.htm", the below links when navigated to expands a particular header on that page:</p> <p>- <a href="current.htm?silverheader=0" _fcksavedurl="current.htm?silverheader=0">Expand 1st header within "submenuheader" header group</a><br /> </p> <p>Helpful links:</p> <p>- <a href="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment.htm" _fcksavedurl="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment.htm">Adding arbitrary links hat expand/ collapse the contents</a><br /> - <a href="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment2.htm" _fcksavedurl="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment2.htm">Taking advantage of the oninit() and onopenclose() event handlers</a><br /> </p> kod önizleme
yeşil dikey menü <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <!--{13198125586710}--> <!--{13198125586711}--> <!--{13198125586712}--> <style type="text/css"> .arrowsidemenu{ width: 180px; /width of menu/ border-style: solid solid none solid; border-color: #94AA74; border-size: 1px; border-width: 1px; } .arrowsidemenu div a{ /header bar links/ font: bold 12px Verdana, Arial, Helvetica, sans-serif; display: block; background: transparent url(arrowgreen.gif) 100% 0; height: 24px; /Set to height of bg image-padding within link (ie: 32px - 4px - 4px)/ padding: 4px 0 4px 10px; line-height: 24px; /Set line-height of bg image-padding within link (ie: 32px - 4px - 4px)/ text-decoration: none; } .arrowsidemenu div a:link, .arrowsidemenu div a:visited{ color: #26370A; } .arrowsidemenu div a:hover{ background-position: 100% -32px; } .arrowsidemenu div.unselected a{ /header that's currently not selected/ color: #6F3700; } .arrowsidemenu div.selected a{ /header that's currently selected/ color: blue; background-position: 100% -64px !important; } .arrowsidemenu ul{ list-style-type: none; margin: 0; padding: 0; } .arrowsidemenu ul li{ border-bottom: 1px solid #a1c67b; } .arrowsidemenu ul li a{ /sub menu links/ display: block; font: normal 12px Verdana, Arial, Helvetica, sans-serif; text-decoration: none; color: black; padding: 5px 0; padding-left: 10px; border-left: 10px double #a1c67b; } .arrowsidemenu ul li a:hover{ background: #d5e5c1; } </style> <body> <div class="arrowsidemenu"> <div><a href="http://www.dynamicdrive.com" _fcksavedurl="http://www.dynamicdrive.com" title="Home">Home</a></div> <div class="menuheaders"><a href="http://www.dynamicdrive.com/style/" _fcksavedurl="http://www.dynamicdrive.com/style/" title="CSS">CSS Library</a></div> <ul class="menucontents"> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/all/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li> </ul> <div><a href="http://www.dynamicdrive.com/forums/" _fcksavedurl="http://www.dynamicdrive.com/forums/" title="Forums">Forums</a></div> <div class="menuheaders"><a href="http://www.javascriptkit.com" _fcksavedurl="http://www.javascriptkit.com" title="JavaScript">JavaScript</a></div> <ul class="menucontents"> <li><a href="http://www.javascriptkit.com/jsref/index.shtml" _fcksavedurl="http://www.javascriptkit.com/jsref/index.shtml">JavaScript Reference</a></li> <li><a href="http://www.javascriptkit.com/cutpastejava.shtml" _fcksavedurl="http://www.javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a></li> </ul> <div><a href="http://tools.dynamicdrive.com/" _fcksavedurl="http://tools.dynamicdrive.com/" title="Tools">Webmaster Tools</a></div> </div> </body> </html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> kod önizleme	sexy panels menu <style type="text/css"> .sexypanels{ list-style-type: none; margin: 0; padding: 0; width: 180px; /* width of menu / } .sexypanels li{ border-bottom: 1px solid white; / white border beneath each menu item / } .sexypanels li a{ background: #333 url(media/sexypanelright.gif) no-repeat right top; /color of menu by default/ font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana; display: block; color: white; width: auto; padding: 5px 0; / Vertical (top/bottom) padding for each menu link / text-indent: 8px; text-decoration: none; border-bottom: 1px solid black; /bottom border of menu link. Should be equal or darker to link's bgcolor/ } .sexypanels li a:visited, .sexypanels li a:active{ color: white; } .sexypanels li a:hover{ background-color: black; /color of menu onMouseover/ color: white; border-bottom: 1px solid black; /bottom border of menu link during hover. Should be equal or darker to link's hover's bgcolor*/ } </style> <!--{13198125586710}--><ul class="sexypanels"> <li><a href="http://www.dynamicdrive.com/" _fcksavedurl="http://www.dynamicdrive.com/">» Dynamic Drive</a></li> <li><a href="http://www.dynamicdrive.com/style/" _fcksavedurl="http://www.dynamicdrive.com/style/" >» CSS Examples</a></li> <li><a href="http://www.javascriptkit.com/jsref/" _fcksavedurl="http://www.javascriptkit.com/jsref/">» JavaScript Reference</a></li> <li><a href="http://www.javascriptkit.com/domref/" _fcksavedurl="http://www.javascriptkit.com/domref/">» DOM Reference</a></li> <li><a href="http://www.cssdrive.com" _fcksavedurl="http://www.cssdrive.com">» CSS Drive</a></li> <li class="lastitem"><a href="http://www.codingforums.com/" _fcksavedurl="http://www.codingforums.com/">» Coding Forums</a></li> </ul> kod önizleme	urban gride slide menu <style type="text/css"> .urbangreymenu{ width: 190px; /width of menu/ } .urbangreymenu .headerbar{ font: bold 13px Verdana; color: white; background: #606060 url(media/arrowstop.gif) no-repeat 8px 6px; /last 2 values are the x and y coordinates of bullet image/ margin-bottom: 0; /bottom spacing between header and rest of content/ text-transform: uppercase; padding: 7px 0 7px 31px; /31px is left indentation of header text/ } .urbangreymenu ul{ list-style-type: none; margin: 0; padding: 0; margin-bottom: 0; /bottom spacing between each UL and rest of content/ } .urbangreymenu ul li{ padding-bottom: 2px; /bottom spacing between menu items/ } .urbangreymenu ul li a{ font: normal 12px Arial; color: black; background: #E9E9E9; display: block; padding: 5px 0; line-height: 17px; padding-left: 8px; /link text is indented 8px/ text-decoration: none; } .urbangreymenu ul li a:visited{ color: black; } .urbangreymenu ul li a:hover{ /hover state CSS/ color: white; background: black; } </style> <div class="urbangreymenu"> <h3 class="headerbar">CSS Library</h3> <ul> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/all/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li> </ul> <h3 class="headerbar">JavaScript Kit</h3> <ul> <li><a href="http://www.javascriptkit.com/cutpastejava.shtml" _fcksavedurl="http://www.javascriptkit.com/cutpastejava.shtml" >Free JavaScripts</a></li> <li><a href="http://www.javascriptkit.com/javatutors/" _fcksavedurl="http://www.javascriptkit.com/javatutors/">JavaScript tutorials</a></li> <li><a href="http://www.javascriptkit.com/jsref/" _fcksavedurl="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li> <li><a href="http://www.javascriptkit.com/dhtmltutors/" _fcksavedurl="http://www.javascriptkit.com/dhtmltutors/">DHTML & CSS</a></li> <li><a href="http://www.javascriptkit.com/howto/" _fcksavedurl="http://www.javascriptkit.com/howto/">Web Design</a></li> <li><a href="http://www.javascriptkit.com/java/" _fcksavedurl="http://www.javascriptkit.com/java/">Free Java Applets</a></li> </ul> </div> kod önizleme
sliding door menu <style type="text/css"> .slidedoormenu{ list-style-type: none; margin: 0; padding: 0; width: 180px; /* width of menu (don't forget to add border with below!) / border-left: 8px solid #ffa1a3; / thick left border of menu / } .slidedoormenu li{ border-bottom: 1px solid #885b5c; / Gray border beneath each menu item / } .slidedoormenu li a{ background: white url(media/vstrip.gif) repeat-y left top; / Background image positioned to the left(v) top(h) corner initially / font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana; display: block; color: black; width: auto; border-bottom: 1px solid white; / White border beneath each menu item link, to add depth / padding: 7px 0; / Vertical (top/bottom) padding for each menu link / text-indent: 8px; text-decoration: none; } .slidedoormenu li a:visited, .slidedoormenu li a:active{ color: black; } .slidedoormenu li a:hover{ background-position: -387px 0; / Shift background image horizontally 387px, or the start of the 2nd background image / color: black; } .slidedoormenu li.lastitem, .slidedoormenu li.lastitem a{ border-bottom-width: 0; / For last menu item within menu, remove bottom border / } .slidedoormenu li.lastitem a{ padding: 8px 0; / increase vertical border of last menu link by 2px (default is padding: 7px 0) to account for removed border width */ } </style> <!--{13198125586710}--><ul class="slidedoormenu"> <li><a href="http://www.dynamicdrive.com/" _fcksavedurl="http://www.dynamicdrive.com/">» Dynamic Drive</a></li> <li><a href="http://www.dynamicdrive.com/style/" _fcksavedurl="http://www.dynamicdrive.com/style/" >» CSS Examples</a></li> <li><a href="http://www.javascriptkit.com/jsref/" _fcksavedurl="http://www.javascriptkit.com/jsref/">» JavaScript Reference</a></li> <li><a href="http://www.javascriptkit.com/domref/" _fcksavedurl="http://www.javascriptkit.com/domref/">» DOM Reference</a></li> <li><a href="http://www.cssdrive.com" _fcksavedurl="http://www.cssdrive.com">» CSS Drive</a></li> <li class="lastitem"><a href="http://www.codingforums.com/" _fcksavedurl="http://www.codingforums.com/">» Coding Forums</a></li> </ul> kod önizleme	glossy menu <style type="text/css"> .glossymenu{ list-style-type: none; margin: 5px 0; padding: 0; width: 170px; border: 1px solid #9A9A9A; border-bottom-width: 0; } .glossymenu li a{ background: white url(media/glossyback.gif) repeat-x bottom left; font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif; color: white; display: block; width: auto; padding: 3px 0; padding-left: 10px; text-decoration: none; } * html .glossymenu li a{ /IE only. Actual menu width minus left padding of A element (10px) / width: 160px; } .glossymenu li a:visited, .glossymenu li a:active{ color: white; } .glossymenu li a:hover{ background-image: url(media/glossyback2.gif); } </style><ul class="glossymenu"> <li><a href="http://www.dynamicdrive.com/" _fcksavedurl="http://www.dynamicdrive.com/" >Dynamic Drive</a></li> <li><a href="http://www.dynamicdrive.com/style/" _fcksavedurl="http://www.dynamicdrive.com/style/" >CSS Examples</a></li> <li><a href="http://www.javascriptkit.com/jsref/" _fcksavedurl="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li> <li><a href="http://www.javascriptkit.com/domref/" _fcksavedurl="http://www.javascriptkit.com/domref/">DOM Reference</a></li> <li><a href="http://www.cssdrive.com" _fcksavedurl="http://www.cssdrive.com">CSS Drive</a></li> <li><a href="http://www.codingforums.com/" _fcksavedurl="http://www.codingforums.com/" style="border-bottom-width: 0">Coding Forums</a></li> </ul> kod önizleme	mavi blok menu <style type="text/css"> #ddblueblockmenu{ border: 1px solid black; border-bottom-width: 0; width: 185px; } #ddblueblockmenu ul{ margin: 0; padding: 0; list-style-type: none; font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif; } #ddblueblockmenu li a{ display: block; padding: 3px 0; padding-left: 9px; width: 169px; /185px minus all left/right paddings and margins/ text-decoration: none; color: white; background-color: #2175bc; border-bottom: 1px solid #90bade; border-left: 7px solid #1958b7; } * html #ddblueblockmenu li a{ /IE only / width: 187px; /IE 5/ width: 169px; /185px minus all left/right paddings and margins/ } #ddblueblockmenu li a:hover { background-color: #2586d7; border-left-color: #1c64d1; } #ddblueblockmenu div.menutitle{ color: white; border-bottom: 1px solid black; padding: 1px 0; padding-left: 5px; background-color: black; font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif; } </style><div id="ddblueblockmenu"> <div class="menutitle">Dynamic Drive</div> <ul> <li><a href="http://www.dynamicdrive.com" _fcksavedurl="http://www.dynamicdrive.com">Home</a></li> <li><a href="http://www.dynamicdrive.com/new.htm" _fcksavedurl="http://www.dynamicdrive.com/new.htm">What's New</a></li> <li><a href="http://www.dynamicdrive.com/revised.htm" _fcksavedurl="http://www.dynamicdrive.com/revised.htm">What's Revised</a></li> <li><a href="http://www.dynamicdrive.com/forums/" _fcksavedurl="http://www.dynamicdrive.com/forums/">Help Forums</a></li> </ul> <div class="menutitle">CSS Library</div> <ul> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image Effects</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form Effects</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C5/">Boxes & containers</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/" _fcksavedurl="http://www.dynamicdrive.com/style/csslibrary/category/C7/" style="border-bottom-color: black">Links & Buttons</a></li> </ul> </div> kod önizleme
Jquery slider menü <FCK:meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" /> <style type="text/css"> body { background: #f0f0f0; margin: 0; padding: 0; font: 10px normal Verdana, Arial, Helvetica, sans-serif; color: #444; } h1 {font-size: 3em; margin: 20px 0;} .container {width: 500px; margin: 10px auto;} ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 32px; border-bottom: 1px solid #999; border-left: 1px solid #999; width: 100%; } ul.tabs li { float: left; margin: 0; padding: 0; height: 31px; line-height: 31px; border: 1px solid #999; border-left: none; margin-bottom: -1px; background: #e0e0e0; overflow: hidden; position: relative; } ul.tabs li a { text-decoration: none; color: #000; display: block; font-size: 1.2em; padding: 0 20px; border: 1px solid #fff; outline: none; } ul.tabs li a:hover { background: #ccc; } html ul.tabs li.active, html ul.tabs li.active a:hover { background: #fff; border-bottom: 1px solid #fff; } .tab_container { border: 1px solid #999; border-top: none; clear: both; float: left; width: 100%; background: #fff; -moz-border-radius-bottomright: 5px; -khtml-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -khtml-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; } .tab_content { padding: 20px; font-size: 1.2em; } .tab_content h2 { font-weight: normal; padding-bottom: 10px; border-bottom: 1px dashed #ddd; font-size: 1.8em; } .tab_content h3 a{ color: #254588; } .tab_content img { float: left; margin: 0 20px 20px 0; border: 1px solid #ddd; padding: 5px; } </style> <!--{13198125586710}--> <!--{13198125586711}--> <div class="container"> <h1>Simple Tabs w/ CSS & jQuery</h1> <ul class="tabs"> <li><a href="#tab1" _fcksavedurl="#tab1">menü1</a></li> <li><a href="#tab2" _fcksavedurl="#tab2">menü2</a></li> <li><a href="#tab3" _fcksavedurl="#tab3">menü3</a></li> <li><a href="#tab4" _fcksavedurl="#tab4">menü4</a></li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content"> <h2>Gallery</h2> <a href="http://www.designbombs.com/light/simona-munteanu/" _fcksavedurl="http://www.designbombs.com/light/simona-munteanu/"><img alt="" src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/simonamunteanu_thumb.gif" _fcksavedurl="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/simonamunteanu_thumb.gif" /></a> <h3><a href="http://kodcudost.tr.gg" _fcksavedurl="http://kodcudost.tr.gg">www.kodcudost.tr.gg</a></h3> <p>buraya yazı 1</p> </div> <div id="tab2" class="tab_content"> <h2>Submit</h2> <a href="http://www.designbombs.com/blog/sketch-blog/" _fcksavedurl="http://www.designbombs.com/blog/sketch-blog/"> <img alt="" src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/sketchblog_thumb.gif" _fcksavedurl="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/sketchblog_thumb.gif" /></a> <h3><a href="http://kodcudost.tr.gg" _fcksavedurl="http://kodcudost.tr.gg">kodcudost.tr.gg</a></h3> <p>buraya yazı2</p> </div> <div id="tab3" class="tab_content"> <h2>Resources</h2> <a href="http://www.designbombs.com/fashion/lukas-mynus/" _fcksavedurl="http://www.designbombs.com/fashion/lukas-mynus/"><img alt="" src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/mynus_thumb.gif" _fcksavedurl="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/mynus_thumb.gif" /></a> <h3><a href="http://kodcudost.tr.gg" _fcksavedurl="http://kodcudost.tr.gg">www.kodcudost.tr.gg</a></h3> <p>buraya yazı3</p> </div> <div id="tab4" class="tab_content"> <h2>Contact</h2> <a href="http://www.designbombs.com/illustrations/esteban-munoz/" _fcksavedurl="http://www.designbombs.com/illustrations/esteban-munoz/"> <img alt="" src="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/estebanmunoz_thumb.gif" _fcksavedurl="http://www.designbombs.com/wp-content/themes/DesignBombs/images/gallery/estebanmunoz_thumb.gif" /></a> <h3><a href="http://kodcudost.tr.gg" _fcksavedurl="http://kodcudost.tr.gg">kodcudost.tr.gg</a></h3> <p>buraya yazı4</p> </div> </div> </div> <div style="clear: both; display: block; padding: 10px 0; text-align:center;"> </div> </meta> kod önizleme	jquery açılır menü <FCK:meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" /> <style type="text/css"> ul { margin: 0; padding: 0; list-style: none; width: 150px; border-bottom: 1px solid #000; } ul li { position: relative; } li ul { position: absolute; left: 149px; top: 0; display: none; } ul li a { display: block; text-decoration: none; background-color: #E2E2E2; padding: 5px; border:1px solid #000; border-bottom:0; } /* IE. gizle / html ul li { float: left; height: 1%; } * html ul li a { height: 1%; } /* IE den gizleme sonu */ li:hover ul, li.over ul { display: block; } </style> <!--{13198125586710}--> <ul id="menu"> <li><a href="buraya link" _fcksavedurl="buraya link">Anasayfa</a></li> <li><a href="buraya link" _fcksavedurl="buraya link">BURAYA MENÜ</a> <ul> <li><a href="buraya link" _fcksavedurl="buraya link">BURAYA ALT MENÜ </a></li> <li><a href="buraya link" _fcksavedurl="buraya link">BURAYA ALT MENÜ </a></li> <li><a href="buraya link" _fcksavedurl="buraya link">BURAYA ALT MENÜ</a></li> </ul> </li> <li><a href="buraya link" _fcksavedurl="buraya link">BURAYA MENÜ</a> <ul> <li><a href="buraya link" _fcksavedurl="buraya link">BURAYA ALT MENÜ</a></li> <li><a href="buraya link" _fcksavedurl="buraya link">BURAYA ALT MENÜ</a></li> <li><a href="buraya link" _fcksavedurl="buraya link">BURAYA ALT MENÜ</a></li> <li><a href="buraya link" _fcksavedurl="buraya link">BURAYA ALT MENÜ </a></li> <li><a href="buraya link" _fcksavedurl="buraya link">BURAYA ALT MENÜ</a></li> </ul> </li> </ul> </meta> kod önizleme	renkli açılır menü <link rel="stylesheet" type="text/css" href="http://tugrawebdata.com.nu/renklidikeymenu/demo.css" /><!--{13198125586710}--><!--{13198125586711}--><!--{13198125586712}--> <div id="main" style="width: 326px; height: 952px"> <ul class="container"> <li class="menu"> <ul> <li class="button"><a class="green" href="#" _fcksavedurl="#">Kiwis </a></li> <li class="dropdown"> <ul> <li><a onclick_fckprotectedatt_fckprotectedatt="%20onclick_fckprotectedatt%3D%22%2520onclick%253D%2522%2524('.button%2520a').eq(2).click()%253Breturn%2520false%253B%2522%22" href="#" _fcksavedurl="#">Open Grapes Section</a></li> <li><a onclick_fckprotectedatt_fckprotectedatt="%20onclick_fckprotectedatt%3D%22%2520onclick%253D%2522%2524('.dropdown').slideUp('slow')%253Breturn%2520false%253B%2522%22" href="#" _fcksavedurl="#">Close This Section</a></li> <li><a href="http://en.wikipedia.org/wiki/Kiwifruit" _fcksavedurl="http://en.wikipedia.org/wiki/Kiwifruit">Read on Wikipedia</a></li> <li><a href="http://www.flickr.com/search/?w=all&q=kiwi&m=text" _fcksavedurl="http://www.flickr.com/search/?w=all&q=kiwi&m=text">Flickr Stream</a></li> </ul> </li> </ul> </li> <li class="menu"> <ul> <li class="button"><a class="orange" href="#" _fcksavedurl="#">Oranges </a></li> <li class="dropdown"> <ul> <li><a onclick_fckprotectedatt_fckprotectedatt="%20onclick_fckprotectedatt%3D%22%2520onclick%253D%2522%2524('.button%2520a%253Alast').click()%253Breturn%2520false%253B%2522%22" href="#" _fcksavedurl="#">Open Last Section</a></li> <li><a href="http://en.wikipedia.org/wiki/Orange_%28fruit%29" _fcksavedurl="http://en.wikipedia.org/wiki/Orange_%28fruit%29">Wikipedia Page</a></li> <li><a href="http://www.flickr.com/search/?w=all&q=oranges&m=text" _fcksavedurl="http://www.flickr.com/search/?w=all&q=oranges&m=text">Flickr Photos</a></li> </ul> </li> </ul> </li> <li class="menu"> <ul> <li class="button"><a class="blue" href="#" _fcksavedurl="#">Grapes </a></li> <li class="dropdown"> <ul> <li><a href="http://en.wikipedia.org/wiki/Grapes" _fcksavedurl="http://en.wikipedia.org/wiki/Grapes">Wiki page</a></li> <li>Text label 1</li> <li>Text label 2</li> <li><a href="http://www.flickr.com/search/?w=all&q=grapes&m=text" _fcksavedurl="http://www.flickr.com/search/?w=all&q=grapes&m=text">Flickr Stream</a></li> </ul> </li> </ul> </li> <li class="menu"> <ul> <li class="button"><a class="red" href="#" _fcksavedurl="#">Strawberries </a></li> <li class="dropdown"> <ul> <li><a href="http://en.wikipedia.org/wiki/Strawberry" _fcksavedurl="http://en.wikipedia.org/wiki/Strawberry">Wiki page</a></li> <li><a href="http://www.flickr.com/photos/mojeecat/368540120/" _fcksavedurl="http://www.flickr.com/photos/mojeecat/368540120/">Strawberry Pie</a></li> <li><a href="http://www.flickr.com/search/?w=all&q=strawberries&m=text" _fcksavedurl="http://www.flickr.com/search/?w=all&q=strawberries&m=text">Photo Stream</a></li> </ul> </li> </ul> </li> </ul> <div class="clear"> </div> </div> kod önizleme
açılır kapanır menü <link rel="P3Pv1" href="http://www.stunicholls.com/w3c/p3p.xml" /> <link rel="meta" href="http://www.stunicholls.com/labels.rdf" type="application/rdf+xml" title="ICRA labels" /> <FCK:meta name="robots" content="all" /> <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" /> <link rel="icon" href="../favicon.ico" type="image/ico" /> <link rel="stylesheet" media="all" type="text/css" href="../css/stunicholls.css" /> <style type="text/css"> /* ================================================================ This copyright notice must be kept untouched in the stylesheet at all times. The original version of this stylesheet and the associated (x)html is available at http://www.stunicholls.com/menu/vertical-concertina-6.html Copyright (c) 2005-2008 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== / / #slide height = (number of top level links - 1) * height of links + inner div height / #slide {padding:0; margin:0; list-style:none; width:190px; height:315px; border:1px solid #ccc; position:relative; overflow:hidden; font-family: verdana, sans-serif; font-size:11px; } #slide li.sub, #slide li.top {display:block; float:left; height:24px; line-height:24px; width:190px; color:#000; background:#eee; text-decoration:none;border-bottom:1px solid #fff; text-indent:20px; overflow:hidden; cursor:pointer;} #slide li.sub {background:#eee url(arrows/out.gif) no-repeat 5px 8px;} #slide li.top a {text-decoration:none; color:#000; display:block; background:url(arrows/out.gif) no-repeat 5px 8px;} #slide li.top a:hover {color:#069; background:#ddd url(arrows/out-over.gif) no-repeat 5px 8px;} #slide li.clicked {color:#800; background:#ddd url(arrows/down.gif) no-repeat 5px 8px;} / #slide li.sub div height = (maximum sub lines * sub line height) + top level link height(variable fY in jQuery) */ #slide li.sub div {background:#fff; height:165px; width:160px; padding:0 15px; line-height:1.2em; font-family: verdana, sans-serif; text-indent:0;} #slide li div ul {padding:0; margin:0; list-style:none;} #slide li div ul li {float:left; height:20px; width:100%;} #slide li div ul li a {padding:0; margin:0;color:#888; text-decoration:none; background:#fff url(arrows/out.gif) no-repeat 5px 6px; font-size:10px; display:block; border-bottom:1px solid #ddd; height:19px; line-height:19px; width:100%; text-indent:20px;} #slide li div ul li a:hover {color:#069; background:#fff url(arrows/out-over.gif) no-repeat 5px 6px;} </style> <!--{13198125586711}--> <!--{13198125586712}--> <div id="wrapper"> <div id="heading"> <div id="search"><!--{13198125586710}--> <form id="seek" method="get" action="http://www.google.com/custom"> <p><font size="5"><b><br /> </b></font></p> </form> </div> </div> <div id="content"> <ul id="slide"> <li class="top"><a href="#url" _fcksavedurl="#url">ANA SAYFA</a></li> <li class="sub">BURAYA MENÜ <div> <ul> <li><a href="../index.html" _fcksavedurl="../index.html">BURAYA ALT MENÜ</a></li> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> </ul> </div> </li> <li class="sub">BURAYA MENÜ <div> <ul> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> </ul> </div> </li> <li class="sub">BURAYA MENÜ <div> <ul> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> </ul> </div> </li> <li class="sub">BURAYA MENÜ <div> <ul> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> </ul> </div> </li> <li class="sub">BURAYA MENÜ <div> <ul> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> <li><a href="#url" _fcksavedurl="#url">BURAYA ALT MENÜ</a></li> </ul> </div> </li> <li class="top"><a href="#url" _fcksavedurl="#url">about us</a></li> </ul> </div> <!--{13198125586713}--> <!--{13198125586714}--></div> </meta> kod önizleme	eklenecek	eklenecek