mindsea

Tasarım üstüne veya altına yapıştırın bu kodu...

<style type="text/css"> body{ color: #333; font-size: 11px; font-family: verdana; } a{ color: #fff; text-decoration: none; } a:hover{ color: #DFE44F; } p{ margin: 0; padding: 5px; line-height: 1.5em; text-align: justify; border: 1px solid #73A405; } #wrapper{ width: 500px; margin: 0 auto; } .box{ background: #fff; } .boxholder{ clear: both; padding: 5px; background-color: #9BCF24; } .tab{ float: left; height: 32px; width: 102px; margin: 0 1px 0 0; text-align: center; background: #8DC70A url(http://img28.xooimage.com/files/6/7/0/greentab-d5e84a.jpg) no-repeat; } .tabtxt{ margin: 0; color: #fff; font-size: 12px; font-weight: bold; padding: 9px 0 0 0; } </style> <script type="text/javascript" src="http://img46.xooimage.com/files/a/a/0/prototype.lite-d5e717.js"></script> <script type="text/javascript" src="http://img22.xooimage.com/files/a/6/5/moo.fx-d5e6fe.js"></script> <script type="text/javascript" src="http://img40.xooimage.com/files/e/d/c/moo.fx.pack-d5e70d.js"></script> <script type="text/javascript"> function init(){ var stretchers = document.getElementsByClassName('box'); var toggles = document.getElementsByClassName('tab'); var myAccordion = new fx.Accordion( toggles, stretchers, {opacity: false, height: true, duration: 600} ); //hash functions var found = false; toggles.each(function(h3, i){ var div = Element.find(h3, 'nextSibling'); if (window.location.href.indexOf(h3.title) > 0) { myAccordion.showThisHideOpen(div); found = true; } }); if (!found) myAccordion.showThisHideOpen(stretchers[0]); } </script>
Bu koduda kutu nerde gözksün istiyorsan oraya ekle...

<div id="wrapper"> <div id="content"> <h3 class="tab" title="first"> <div class="tabtxt">Primero</div> </h3> <div class="tab"> <h3 class="tabtxt" title="second">Segundo</h3> </div> <div class="tab"> <h3 class="tabtxt" title="third">Tercero</h3> </div> <div class="tab"> <h3 class="tabtxt" title="fourth">Cuarto</h3> </div> <div class="boxholder"> <div class="box"> <p><strong>Primer Box</strong><br /> Contenido Aqui</p> </div> <div class="box"> <p><strong>Segundo Box</strong><br /> Contenido Aqui</p> </div> <div class="box"> <p><strong>Tercer Box</strong><br /> Contenido Aqui</p> </div> <div class="box"> <p><strong>Cuarto Box</strong><br /> Contenido Aqui</p> </div> </div> </div> </div> <script type="text/javascript"> Element.cleanWhitespace('content'); init(); </script>

Bu koduda kutu nerde gözksün istiyorsan oraya ekle...
<div id="menu_wrapper" class="grey"> <div class="left"></div> <ul id="menu"> <li><a href="http://www.cssornekleri.com" _fcksavedurl="http://www.cssornekleri.com">Ana Sayfa</a></li> <li class="active"><a href="http://www.cssornekleri.com" _fcksavedurl="http://www.cssornekleri.com">Hakkımızda</a></li> <li><a href="http://www.cssornekleri.com" _fcksavedurl="http://www.cssornekleri.com">Hizmetlerimiz</a></li> <li><a href="http://www.cssornekleri.com" _fcksavedurl="http://www.cssornekleri.com">İletişim</a></li> </ul> </div>

Tasarım üstüne veya altına yapıştırın bu kodu...
<style type="text/css"> body { padding: 50px; } /* The CSS Code for the menu starts here */ #menu { font-family: Arial, sans-serif; font-weight: bold; text-transform: uppercase; margin: 20px 0; padding: 0; list-style-type: none; background-color: #eee; font-size: 13px; height: 40px; border-top: 2px solid #eee; border-bottom: 2px solid #ccc; } #menu li { float: left; margin: 0; } #menu li a { text-decoration: none; display: block; padding: 0 20px; line-height: 40px; color: #666; } #menu li a:hover, #menu li.active a { background-color: #f5f5f5; border-bottom: 2px solid #DDD; color: #999; } #menu_wrapper ul {margin-left: 12px;} #menu_wrapper {padding: 0 16px 0 0; background: url(/img/menu/matte/grey.png) no-repeat right;} #menu_wrapper div {float: left; height: 44px; width: 12px; background: url(/img/menu/matte/grey.png) no-repeat left;} </style>

Cuarto Box
Contenido Aqui

mindsea

şlığı

Menu-1-

Menu-2-

Menu-3-

İkons