maviustmenuluslideshowcsstasarimi

https://img.webme.com/pic/0/08oyun/maviustmenulucss.png


tasarim üstü:
<table width="900" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="133" background="https://img.webme.com/pic/w/weblog2/mavijqery_01.png"><table width="900" height="108" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="41"> </td> <td width="280" align="center"><div id="logo">272x85 logo </div></td> <td width="10"> </td> <td width="536" align="center"><div id="ustmenu"> <div class="nave"><script src="http://img52.xooimage.com/files/5/2/1/2758cb8.js" type="text/javascript"></script><script src="http://img64.xooimage.com/files/9/4/c/2758f44.js" type="text/javascript"></script> <div id="myslidemenu" class="jqueryslidemenu"> <ul> <li><a href="http://08oyun.tr.gg" _fcksavedurl="http://08oyun.tr.gg" _fcksavedurl="http://08oyun.tr.gg">Menü1</a> <ul> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa1</a></li> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa2</a></li> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa3</a></li> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa4</a></li> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa5</a></li> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa6</a></li> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa7</a></li> </ul> </li> <li><a href="http://08oyun.tr.gg" _fcksavedurl="http://08oyun.tr.gg" _fcksavedurl="http://08oyun.tr.gg">Menü2</a> <ul> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa1</a></li> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa2</a></li> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa3</a></li> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa4</a></li> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa5</a></li> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa6</a></li> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa7</a></li> </ul> </li> <li><a href="http://08oyun.tr.gg" _fcksavedurl="http://08oyun.tr.gg" _fcksavedurl="http://08oyun.tr.gg">Menü3</a> <ul> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa1</a></li> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa2</a></li> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa3</a></li> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa4</a></li> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa5</a></li> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa6</a></li> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa7</a></li> </ul> </li> <li><a href="http://08oyun.tr.gg" _fcksavedurl="http://08oyun.tr.gg" _fcksavedurl="http://08oyun.tr.gg">Menü4</a> <ul> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa1</a></li> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa2</a></li> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa3</a></li> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa4</a></li> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa5</a></li> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa6</a></li> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa7</a></li> </ul> </li> <li><a href="http://08oyun.tr.gg" _fcksavedurl="http://08oyun.tr.gg" _fcksavedurl="http://08oyun.tr.gg">Menü5</a> <ul> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa1</a></li> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa2</a></li> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa3</a></li> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa4</a></li> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa5</a></li> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa6</a></li> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa7</a></li> </ul> </li> <li><a href="http://08oyun.tr.gg" _fcksavedurl="http://08oyun.tr.gg" _fcksavedurl="http://08oyun.tr.gg">Menü6</a> <ul> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa1</a></li> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa2</a></li> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa3</a></li> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa4</a></li> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa5</a></li> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa6</a></li> <li><a href="Link" _fcksavedurl="Link" _fcksavedurl="Link">Sayfa7</a></li> </ul> </li> </ul> </div> </div> </div></td> <td width="33"> </td> </tr> </table></td> </tr> <tr> <td height="185" align="left" valign="top" background="https://img.webme.com/pic/w/weblog2/mavijqery_02.png"><table width="900" height="179" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="16"> </td> <td width="860" align="left" valign="top"><div id="slidejquery"> <center> <script type="text/javascript" src="http://img5.xooimage.com/files/d/e/5/jquery-2--f80ba5.js"></script> <script type="text/javascript" src="http://img25.xooimage.com/files/c/d/0/easyslider1.5-11fb25a.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider({ controlsBefore: '<p id="controls">', controlsAfter: '</p>', auto: true, continuous: true }); $("#slider2").easySlider({ controlsBefore: '<p id="controls2">', controlsAfter: '</p>', prevId: 'prevBtn2', nextId: 'nextBtn2' }); }); </script> <style type="text/css"> img{border:none;} #container2{ margin:0 auto; position:relative; text-align:left; width:696px; background:#fff; margin-bottom:2em; } #content2{ position:relative; } /* Easy Slider */ #slider{} #slider ul, #slider li, #slider2 ul, #slider2 li{ margin:0; padding:0; list-style:none; } #slider li, #slider2 li{ /* define width and height of list item (slide) entire slider area will adjust according to the parameters provided here */ width:697px; height:170px; overflow:hidden; } #slider2 li{ background:#f1f1f1; } #slider2 li h2{ margin:0 20px; padding-top:20px; } #slider2 li p{ margin:20px; } p#controls, p#controls2{ margin:0; position:relative; } #prevBtn, #nextBtn, #prevBtn2, #nextBtn2{ display:block; margin:0; overflow:hidden; text-indent:-8000px; width:30px; height:77px; position:absolute; left:-30px; top:-160px; } #nextBtn, #nextBtn2{ left:696px; } #prevBtn a, #nextBtn a, #prevBtn2 a, #nextBtn2 a{ display:block; width:30px; height:77px; background:url(https://img.webme.com/pic/w/weblog2/geri1.png) no-repeat 0 0; } #nextBtn a, #nextBtn2 a{ background:url(https://img.webme.com/pic/w/weblog2/ileri1.png) no-repeat 0 0; } /* // Easy Slider */ </style> <div id="container2"> <div id="content2"> <div id="slider"> <ul> <li><a href="http://templatica.com/preview/30" _fcksavedurl="http://templatica.com/preview/30" _fcksavedurl="http://templatica.com/preview/30"><img src="http://bs-aktif.com/resim/images/2131312321.png" _fcksavedurl="http://bs-aktif.com/resim/images/2131312321.png" _fcksavedurl="http://bs-aktif.com/resim/images/2131312321.png" alt="Css Template Preview" /></a></li> <li><a href="http://templatica.com/preview/7" _fcksavedurl="http://templatica.com/preview/7" _fcksavedurl="http://templatica.com/preview/7"><img src="http://bs-aktif.com/resim/images/2131312321.png" _fcksavedurl="http://bs-aktif.com/resim/images/2131312321.png" _fcksavedurl="http://bs-aktif.com/resim/images/2131312321.png" alt="Css Template Preview" /></a></li> <li><a href="http://templatica.com/preview/25" _fcksavedurl="http://templatica.com/preview/25" _fcksavedurl="http://templatica.com/preview/25"><img src="http://bs-aktif.com/resim/images/2131312321.png" _fcksavedurl="http://bs-aktif.com/resim/images/2131312321.png" _fcksavedurl="http://bs-aktif.com/resim/images/2131312321.png" alt="Css Template Preview" /></a></li> <li><a href="https://img.webme.com/pic/e/exporler/3s.png" _fcksavedurl="https://img.webme.com/pic/e/exporler/3s.png" _fcksavedurl="https://img.webme.com/pic/e/exporler/3s.png"><img src="http://bs-aktif.com/resim/images/2131312321.png" _fcksavedurl="http://bs-aktif.com/resim/images/2131312321.png" _fcksavedurl="http://bs-aktif.com/resim/images/2131312321.png" alt="Css Template Preview" /></a></li> <li><a href="http://templatica.com/preview/27" _fcksavedurl="http://templatica.com/preview/27" _fcksavedurl="http://templatica.com/preview/27"><img src="http://bs-aktif.com/resim/images/2131312321.png" _fcksavedurl="http://bs-aktif.com/resim/images/2131312321.png" _fcksavedurl="http://bs-aktif.com/resim/images/2131312321.png" alt="Css Template Preview" /></a></li> </ul> </div> </div> </div><center> </div></td> <td width="24"> </td> </tr> </table></td> </tr> <tr> <td height="91" align="left" valign="top" background="https://img.webme.com/pic/w/weblog2/mavijqery_03.png"><table width="900" height="95" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="28"> </td> <td width="838" align="left" valign="top"> <div id=content> </div>





tasarım altı:
< </td> <td width="34"> </td> </tr> </table></td> </tr> <tr> <td height="71" align="left" valign="top"><img src="https://img.webme.com/pic/w/weblog2/mavijqery_04.png" _fcksavedurl="https://img.webme.com/pic/w/weblog2/mavijqery_04.png" _fcksavedurl="https://img.webme.com/pic/w/weblog2/mavijqery_04.png" width="900" height="71" border="0" usemap="#Map"></td> </tr> </table> <map name="Map"><area shape="rect" coords="602,20,854,50" href="http://08oyun.tr.gg" _fcksavedurl="http://08oyun.tr.gg" _fcksavedurl="http://08oyun.tr.gg"> </map> /textarea> <br /> <br /> css:<br /> <br /> <div> </div> </body></html>




css:
table {margin-left: auto;margin-right: auto} h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} li.nav_element{display: none;} #logo { width: 272px; height: 85px; margin-top: 15px; margin-left: 8px; } #ustmenu { height: 30px; width: 536px; margin-top: 5px; } #slidejquery { width: 850px; height: 170px; padding-right: 5px; padding-left: 5px; margin-right: 5px; margin-left: 5px; } #content { width: 840px; margin-left: 5px; padding-left: 5px; } body,td,th { color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12px; } body { background-image: url(https://img.webme.com/pic/w/weblog2/azumi.jpg); } .nave{width:970px; height:20px; padding:20px 0 0 10px;} .jqueryslidemenu{margin:0 auto;font:12px verdana;font-weight:bold;} .jqueryslidemenu ul{margin: 0;padding: 0;list-style-type: none;} .jqueryslidemenu ul li{position: relative;display: inline;float: left;color:#f000} .jqueryslidemenu ul li a{display: block;color:#333;padding: 10px 10px;z-index:150;text-decoration: none;} .jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{color:#000;font-weight:bold;} .jqueryslidemenu ul li a:hover{color:#FFF;text-decoration:none;} .jqueryslidemenu ul li ul{position: absolute;left: 0;display: block;visibility: hidden;border-left:1px solid #999; border-right:1px solid #999;border-top:1px solid #999;} .jqueryslidemenu ul li ul li{display: list-item;float: none;z-index:100;} .jqueryslidemenu ul li ul li ul{top: 0;} .jqueryslidemenu ul li ul li a{font: normal 11px Verdana;width: 160px;padding: 4px;margin: 0; border-top-width: 0;border-bottom: 1px solid #999;border-left: 1px solid #fff; background:url(https://img.webme.com/pic/o/osmantalay/fonmeot.png)} .jqueryslidemenu ul li a .ns {background:#999;} .jqueryslidemenu ul li ul li a:hover{background: skyblue } .downarrowclass{position: absolute;top: 12px;right: 2px;} .rightarrowclass{position: absolute;top: 6px;right: 5px;}