Forum'da ara:
Ara


Yazar Mesaj
Mesaj14.08.2010, 12:40 (UTC)    
Mesaj konusu: Css Menüler

Arkadaşlar birçok css menü başlığı var ama bunların çoğu eskimiş. Bu nedenle kendimin düzenlediği css menüleri size sunacam.

Menülerden yararlandıysanız yorumlarınızı esirgemeyin . Yararlanmasanız bile lütfen yorumlarınızı esirgemeyin.


Kod:
<style>
.header_01 {
   padding: 0 0 5px 0;
   margin: 0 0 10px 0;
   font-size: 14px;
   font-weight: bold;
   color: #ffffff;
   /*color: #e40b0b;*/
}


.header_02 {
   padding: 0 0 5px 0;
   margin: 0 0 10px 0;
   font-size: 18px;
   font-weight: bold;
   color: #ffffff;
   /*color: #e40b0b;*/
}

.header_03 {
   padding: 0 0 5px 0;
   font-size: 12px;
   font-weight: bold;
   color: #ffffff;
   /*color: #99be29;*/   
}

.header_03 a { color: #ffffff; text-decoration: none; }
.header_03 a:hover { color: #99FF00; }

.templatemo_side_bar {
   float: left;
   width: 180px;
   padding: 20px 19px 0 19px;
   background: #1b1919;
   border: 1px solid #363434;   
}

.templatemo_side_bar ul {
   margin: 0px;
   padding: 0px;
}

.templatemo_side_bar ul li {
   margin: 0px;
   padding: 0 0 0 0;
   margin-bottom: 5px;
   border-left: 5px solid #000;
   list-style: none;
}

.templatemo_side_bar ul li a {
   display: block;
   background: #242224;
   padding: 5px 0 5px 10px;
   color: #b5b1b1;
   text-decoration: none;
}

.templatemo_side_bar ul li a:hover {
   color: #ffffff;
   background: #000;
}

.templatemo_side_bar form {
   margin: 0px;
   padding: 0px;
}


</style>

<div class="templatemo_side_bar margin_right_10">
           
            <div class="header_01">Ana Menü</div>
               <ul>
                   <li><a href="#">Ana Sayfa</a></li>

                    <li><a href="#">İletişim</a></li>
                    <li><a href="#">Ziyaretçi Defteri</a></li>
                    <li><a href="#">Toplist</a></li>
                    <li><a href="#">Html Kod</a></li>
                    <li><a href="#">Fbml Kod</a></li>

                    <li><a href="#">Javascript</a></li>
                    <li><a href="#">Yorumlar</a></li>
                </ul>
         
         
       
         
            <div class="margin_bottom_20"></div>
        </div> <!-- end of left side bar -->




Kod:

<style>
.header_01 {
   padding: 0 0 5px 0;
   margin: 0 0 10px 0;
   font-size: 14px;
   font-weight: bold;
   color: #ffffff;
   /*color: #e40b0b;*/
}


.header_02 {
   padding: 0 0 5px 0;
   margin: 0 0 10px 0;
   font-size: 18px;
   font-weight: bold;
   color: #ffffff;
   /*color: #e40b0b;*/
}

.header_03 {
   padding: 0 0 5px 0;
   font-size: 12px;
   font-weight: bold;
   color: #ffffff;
   /*color: #99be29;*/   
}

.header_03 a { color: #ffffff; text-decoration: none; }
.header_03 a:hover { color: #99FF00; }

.templatemo_side_ba {
   float: left;
   width: 180px;
   padding: 20px 19px 0 19px;
   background: #FF9900;
   border: 1px solid #363434;   
}

.templatemo_side_ba ul {
   margin: 0px;
   padding: 0px;
}

.templatemo_side_ba ul li {
   margin: 0px;
   padding: 0 0 0 0;
   margin-bottom: 5px;
   border-left: 5px solid #000;
   list-style: none;
}

.templatemo_side_ba ul li a {
   display: block;
   background: #242224;
   padding: 5px 0 5px 10px;
   color: #b5b1b1;
   text-decoration: none;
}

.templatemo_side_ba ul li a:hover {
   color: #ffffff;
   background: #000;
}

.templatemo_side_ba form {
   margin: 0px;
   padding: 0px;
}


</style>

<div class="templatemo_side_ba margin_right_10">
           
            <div class="header_01">Ana Menü</div>
               <ul>
                   <li><a href="#">Ana Sayfa</a></li>

                    <li><a href="#">İletişim</a></li>
                    <li><a href="#">Ziyaretçi Defteri</a></li>
                    <li><a href="#">Toplist</a></li>
                    <li><a href="#">Html Kod</a></li>
                    <li><a href="#">Fbml Kod</a></li>

                    <li><a href="#">Javascript</a></li>
                    <li><a href="#">Yorumlar</a></li>
                </ul>
         
         
       
         
            <div class="margin_bottom_20"></div>
        </div> <!-- end of left side bar -->




Kod:

<style>
.header_01 {
   padding: 0 0 5px 0;
   margin: 0 0 10px 0;
   font-size: 14px;
   font-weight: bold;
   color: #ffffff;
   /*color: #e40b0b;*/
}


.header_02 {
   padding: 0 0 5px 0;
   margin: 0 0 10px 0;
   font-size: 18px;
   font-weight: bold;
   color: #ffffff;
   /*color: #e40b0b;*/
}

.header_03 {
   padding: 0 0 5px 0;
   font-size: 12px;
   font-weight: bold;
   color: #ffffff;
   /*color: #99be29;*/   
}

.header_03 a { color: #ffffff; text-decoration: none; }
.header_03 a:hover { color: #99FF00; }

.templatemo_side_b {
   float: left;
   width: 180px;
   padding: 20px 19px 0 19px;
   background: #99CC00;
   border: 1px solid #363434;   
}

.templatemo_side_b ul {
   margin: 0px;
   padding: 0px;
}

.templatemo_side_b ul li {
   margin: 0px;
   padding: 0 0 0 0;
   margin-bottom: 5px;
   border-left: 5px solid #000;
   list-style: none;
}

.templatemo_side_b ul li a {
   display: block;
   background: #242224;
   padding: 5px 0 5px 10px;
   color: #b5b1b1;
   text-decoration: none;
}

.templatemo_side_b ul li a:hover {
   color: #ffffff;
   background: #000;
}

.templatemo_side_b form {
   margin: 0px;
   padding: 0px;
}


</style>

<div class="templatemo_side_b margin_right_10">
           
            <div class="header_01">Ana Menü</div>
               <ul>
                   <li><a href="#">Ana Sayfa</a></li>

                    <li><a href="#">İletişim</a></li>
                    <li><a href="#">Ziyaretçi Defteri</a></li>
                    <li><a href="#">Toplist</a></li>
                    <li><a href="#">Html Kod</a></li>
                    <li><a href="#">Fbml Kod</a></li>

                    <li><a href="#">Javascript</a></li>
                    <li><a href="#">Yorumlar</a></li>
                </ul>
         
         
       
         
            <div class="margin_bottom_20"></div>
        </div> <!-- end of left side bar -->




Kod:

<style>
.header_01 {
   padding: 0 0 5px 0;
   margin: 0 0 10px 0;
   font-size: 14px;
   font-weight: bold;
   color: #ffffff;
   /*color: #e40b0b;*/
}


.header_02 {
   padding: 0 0 5px 0;
   margin: 0 0 10px 0;
   font-size: 18px;
   font-weight: bold;
   color: #ffffff;
   /*color: #e40b0b;*/
}

.header_03 {
   padding: 0 0 5px 0;
   font-size: 12px;
   font-weight: bold;
   color: #ffffff;
   /*color: #99be29;*/   
}

.header_03 a { color: #ffffff; text-decoration: none; }
.header_03 a:hover { color: #99FF00; }

.templatemo_side_ {
   float: left;
   width: 180px;
   padding: 20px 19px 0 19px;
   background: #FF00FF;
   border: 1px solid #363434;   
}

.templatemo_side_ ul {
   margin: 0px;
   padding: 0px;
}

.templatemo_side_ ul li {
   margin: 0px;
   padding: 0 0 0 0;
   margin-bottom: 5px;
   border-left: 5px solid #000;
   list-style: none;
}

.templatemo_side_ ul li a {
   display: block;
   background: #242224;
   padding: 5px 0 5px 10px;
   color: #b5b1b1;
   text-decoration: none;
}

.templatemo_side_ ul li a:hover {
   color: #ffffff;
   background: #000;
}

.templatemo_side_ form {
   margin: 0px;
   padding: 0px;
}


</style>

<div class="templatemo_side_ margin_right_10">
           
            <div class="header_01">Ana Menü</div>
               <ul>
                   <li><a href="#">Ana Sayfa</a></li>

                    <li><a href="#">İletişim</a></li>
                    <li><a href="#">Ziyaretçi Defteri</a></li>
                    <li><a href="#">Toplist</a></li>
                    <li><a href="#">Html Kod</a></li>
                    <li><a href="#">Fbml Kod</a></li>

                    <li><a href="#">Javascript</a></li>
                    <li><a href="#">Yorumlar</a></li>
                </ul>
         
         
       
         
            <div class="margin_bottom_20"></div>
        </div> <!-- end of left side bar -->



Crying or Very sad Niye yorum yazmadın Crying or Very sad
______________

Beni çekemeyen anten taksın.
21.07.2010 04:59:04'dan beri size hizmet veriyoruz.
Mesaj14.08.2010, 12:43 (UTC)    
Mesaj konusu:

Teşekkürler Güzel paylaşımmış. Fakat sadece arkaplanları değiştirmişsin Sad
Mesaj14.08.2010, 12:55 (UTC)    
Mesaj konusu:

Evet sadece arka planlarını değiştirdim.

Daha fazlasını yapabilirdim ; ama isteğim yoktu.


Arkadaşlar bu menüleri ben yapmıyorum. Sadece css tasarımlardan aldıgım menüler. Peki bunları neden paylaşıyorum. Menüsü olmayan kişiler menülerini
"<li><a href="#">Tıkla</a></li>" şeklinde yaparlar ve bu hoş bir görüntü yaratmaz. Bende size elimden geldiği kadarıyla, css tasarımlardan aldığım menüleri düzenleyerek size sunuyorum


Yeni bir menü


Kod:
<style>
/* menu */

#templatemo_menu {
   float: right;
   height: 45px;
}

#templatemo_menu ul {
   margin: 0;
   padding: 0px;
   list-style: none;
}

#templatemo_menu ul li {
   padding: 0px;
   margin: 0px;
   display: inline;
}

#templatemo_menu ul li a {
   position: relative;
   float: left;
   width: 120px;
   display: block;
   height: 33px;
   padding: 12px 0 0 0;
   text-align: center;
   font-size: 14px;
   text-decoration: none;
   color: #2089ff;   
   font-weight: bold;
   outline: none;
}

#templatemo_menu li a:hover, #templatemo_menu li .current {
   color: #fff;
   background: url(http://www.templatemo.com/templates/templatemo_235_business/images/templatemo_menu_hover.jpg);
}


/* end of menu */



</style>

  <div id="templatemo_menu">
   
            <ul>

                <li><a href="index.html" class="current">Home</a></li>
                <li><a href="services.html">Services</a></li>
                <li><a href="news.html">News</a></li>
                <li><a href="gallery.html">Gallery</a></li>
                <li><a href="contactus.html">Contact Us</a></li>
            </ul>       
   
       </div> <!-- end of templatemo_menu -->


______________

Beni çekemeyen anten taksın.
21.07.2010 04:59:04'dan beri size hizmet veriyoruz.
Mesaj14.08.2010, 16:23 (UTC)    
Mesaj konusu:

teşekkürler çok güzeller yaptığım tasarımlarda kullanabilirim
Mesaj18.08.2010, 07:29 (UTC)    
Mesaj konusu:

Arrow Açılır Menü Kodu Arrow
Resim için tıklayın
http://img225.imageshack.us/img225/7878/21862414.jpg
Kod:
<style>.navigation_table   
    {
   color   : #666666;
   font-family   : verdana, Arial;
   font-size      : 8pt;
   }
   
.n1
    {
    font-family   : verdana, Arial;
    font-weight   : bold;
    text-transform   : uppercase;
    font-size:12px;
    color:#DDDDDD;
    background-color:#8DD6F7;
    height:16px;
    padding-left:5px;
    width: 100%;
    }

.n2 {
    font-family   : verdana, Arial;
    font-size:12px;
    background-color:#DDECFE;
    height:18px;
    padding-left:5px;
    width: 100%;
    }

.an {
    color      : #666666;
   text-decoration   : none;
   }
   
.an:hover
    {
    color      : #000000;
    text-decoration   : none;
    }</style>




<HTML>
<head>

<link rel="stylesheet" type="text/css" href="accMenu/style.css"/>
<SCRIPT src="http://malatyali.fileave.com/accMenu.js" type=text/javascript></SCRIPT>
</head>
<body>



   


<table cellpadding="0" cellspacing="1" width="125" class="navigation_table" align="center">
 <tr><td>
  <table width="100%" cellspacing="0"><tr><td class="n1" onMouseOver="this.style.backgroundColor='#9EC3FA'" onMouseOut="this.style.backgroundColor='#8DD6F7'" ><a class="an" onclick="return collapse('baslik1')"  href="#">BAŞLIK 1</a></td></tr></table>
    </td></tr>
    <tr><td>
     <table id="baslik1" open="false" cellspacing="0" cellpadding="0" width="100%">
        <tr><td>
           <table width="100%" cellspacing="1" >
           <tr><td class="n2" onMouseOver="this.style.backgroundColor='#CAE1FC'" onMouseOut="this.style.backgroundColor='#DDECFE'"><a class="an" href="http://www.meprosoft.com">madde 1-1</a></td></tr>
           <tr><td class="n2" onMouseOver="this.style.backgroundColor='#CAE1FC'" onMouseOut="this.style.backgroundColor='#DDECFE'"><a class="an" href="http://www.meprosoft.com/programlar.asp">madde 1-2</a></td></tr>
           <tr><td class="n2" onMouseOver="this.style.backgroundColor='#CAE1FC'" onMouseOut="this.style.backgroundColor='#DDECFE'"><a class="an" href="http://www.meprosoft.com">madde 1-3</a></td></tr>
           <tr><td class="n2" onMouseOver="this.style.backgroundColor='#CAE1FC'" onMouseOut="this.style.backgroundColor='#DDECFE'"><a class="an" href="http://www.meprosoft.com.pass/asp">madde 1-4</a></td></tr>
           <tr><td class="n2" onMouseOver="this.style.backgroundColor='#CAE1FC'" onMouseOut="this.style.backgroundColor='#DDECFE'"><a class="an" href="http://www.meprosoft.com">madde 1-5</a></td></tr>
      </table>
    </td></tr>
    </table>
  </td></tr>

<tr><td >
    <table width="100%" cellspacing="0"><tr><td class="n1" onMouseOver="this.style.backgroundColor='#9EC3FA'" onMouseOut="this.style.backgroundColor='#8DD6F7'" ><a class="an" onclick="return collapse('baslik2')" href="#">BAŞLIK 2</a></td></tr></table>
      </td></tr>
      <tr><td>
     <table id="baslik2" open="true" cellspacing="0" cellpadding="0" width="100%"><tr><td><table width="100%" cellspacing="1" >
           <tr><td class="n2" onMouseOver="this.style.backgroundColor='#CAE1FC'" onMouseOut="this.style.backgroundColor='#DDECFE'"><a class="an" href="http://www.meprosoft.com">madde 2-1</a></td></tr>
           <tr><td class="n2" onMouseOver="this.style.backgroundColor='#CAE1FC'" onMouseOut="this.style.backgroundColor='#DDECFE'"><a class="an" href="http://www.meprosoft.com/programlar.asp">madde 2-2</a></td></tr>
           <tr><td class="n2" onMouseOver="this.style.backgroundColor='#CAE1FC'" onMouseOut="this.style.backgroundColor='#DDECFE'"><a class="an" href="http://www.meprosoft.com/pass.asp">madde 2-3</a></td></tr>
           <tr><td class="n2" onMouseOver="this.style.backgroundColor='#CAE1FC'" onMouseOut="this.style.backgroundColor='#DDECFE'"><a class="an" href="http://www.meprosoft.com">madde 2-4</a></td></tr>
           </table></td></tr></table></td></tr>
<tr><td>
    <table width="100%" cellspacing="0"><tr><td class="n1" onMouseOver="this.style.backgroundColor='#9EC3FA'" onMouseOut="this.style.backgroundColor='#8DD6F7'" ><a class="an" onclick="return collapse('baslik3')" href="#">BAŞLIK 3</a></td></tr></table>
</td></tr><tr><td>
      <table id="baslik3" open="false" cellspacing="0" cellpadding="0" width="100%"><tr><td><table width="100%" cellspacing="1" >
    <tr><td class="n2" onMouseOver="this.style.backgroundColor='#CAE1FC'" onMouseOut="this.style.backgroundColor='#DDECFE'"><a class="an" href="http://www.meprosoft.com/">madde 3-1</a></td></tr>
     <tr><td class="n2" onMouseOver="this.style.backgroundColor='#CAE1FC'" onMouseOut="this.style.backgroundColor='#DDECFE'"><a class="an" href="http://www.meprosoft.com">madde 3-1</a></td></tr>
</table></td></tr></table></td></tr>
</table>

</tr>
</table>



</body>
</HTML>
[/quote]
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu