10TL.NET ** › Ana Kategori: Destek-Yönetim-Kurallar › MyBB Destek › Forumunuzun görünüşünü yönetin v
Birbirinden Güzel Menü Tasarımları
 
https://instagram.com/alphazzers
   
Konuyu Oyla:
  • Toplam: 1 Oy - Ortalama: 2
  • 1
  • 2
  • 3
  • 4
  • 5
Gösterim Stili
Birbirinden Güzel Menü Tasarımları
ASi Çevrimdışı
Kullanıcı
Yorum Sayısı: 4,613
Konu Sayısı: 335
Üyelik Tarihi: 03-09-2012
Rep Puanı: 638
Teşekkürler: 64
121 mesaj içinde 559 teşekkür verildi.

Kullanıcı Adı Değişiklikleri: ASi
SanalPara (SP): 9 SP
#1
08-01-2013 Saat: 15:08 (Son Düzenleme: 08-01-2013 Saat: 15:09, Düzenleyen: ASi.)
1-css_menu_thumb.png
Nasıl Yapılır?
Önce Temalar >Css Ekle Yapın Header.css yazın dosya başlığına Ardından Kendi içeriğimi yaz a tıklayın ve şu kodu yapıştırın;
Kod:
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
  color: #ffffff;
  display: inline-block;
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  min-width: 35px;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 -1px 0 #333333;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li.active a {
  background: #646464 url(grad_dark.png) repeat-x left bottom;
  background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(100%, #4a4a4a));
  background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: -o-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: linear-gradient(to bottom, #646464 0%, #4a4a4a 100%);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#646464', endColorstr='#4a4a4a', GradientType=0);
  box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
  -moz-box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
  -webkit-box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
  filter: none;
}
#cssmenu > ul > li.active a:hover {
  background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(100%, #4a4a4a));
  background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: -o-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: linear-gradient(to bottom, #646464 0%, #4a4a4a 100%);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#646464', endColorstr='#4a4a4a', GradientType=0);
  filter: none;
}
#cssmenu > ul > li a {
  box-shadow: inset 0 0 0 1px #8a8a8a;
  -moz-box-shadow: inset 0 0 0 1px #8a8a8a;
  -webkit-box-shadow: inset 0 0 0 1px #8a8a8a;
  background: #4a4a4a url(grad_dark.png) repeat-x left top;
  background: -moz-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8a8a8a), color-stop(50%, #707070), color-stop(51%, #626262), color-stop(100%, #787878));
  background: -webkit-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
  background: -o-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
  background: -ms-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
  background: linear-gradient(to bottom, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
  border-bottom: 1px solid #5d5d5d;
  border-top: 1px solid #5d5d5d;
  border-right: 1px solid #5d5d5d;
  line-height: 34px;
  padding: 0 35px;
  filter: none;
}
#cssmenu > ul > li a:hover {
  background: #8a8a8a url(grad_dark.png) repeat-x left bottom;
  background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(50%, #4a4a4a), color-stop(51%, #3b3b3b), color-stop(100%, #525252));
  background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
  background: -o-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
  background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
  background: linear-gradient(to bottom, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
  filter: none;
}
#cssmenu > ul > li:first-child a {
  border-radius: 5px 0 0 5px;
  -moz-border-radius: 5px 0 0 5px;
  -webkit-border-radius: 5px 0 0 5px;
  border-left: 1px solid #5d5d5d;
}
#cssmenu > ul > li:last-child a {
  border-radius: 0 5px 5px 0;
  -moz-border-radius: 0 5px 5px 0;
  -webkit-border-radius: 0 5px 5px 0;
}
#cssmenu .has-sub:hover ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  top: 36px;
  left: -1px;
  min-width: 100%;
  text-align: center;
  /* IE7 */

  *width: 100%;
}
#cssmenu .has-sub ul li {
  text-align: center;
}
#cssmenu .has-sub ul li a {
  border-top: 0 none;
  border-left: 1px solid #5d5d5d;
  display: block;
  line-height: 120%;
  padding: 9px 5px;
  text-align: center;
}
Sonra Kaydet diyin ardından Şablonlar>Ana Sayfa Şablonlar>İndex>Header kodunu bulun hemen üstüne ekleyin;
Kod:
<div id='cssmenu'>
<ul>
   <li class='active '><a href='index.html'><span>Ana Sayfa</span></a></li>
   <li class='has-sub '><a href='#'><span>Çoklu Bölüm</span></a>
      <ul>
         <li><a href='Url Girin'><span>Yardımcı Bölüm</span></a></li>
         <li><a href='Url Girin'><span>Yardımcı Bölüm 2</span></a></li>
      </ul>
   </li>
<li class='has-sub '><a href='#'><span>Çoklu Bölüm</span></a>
<ul>
   <li><a href='#'><span>Bölüm</span></a></li>
   <li><a href='#'><span>Bölüm</span></a></li>
</ul>
<li><a href='#'><span>Bölüm</span></a></li>
   <li><a href='#'><span>Bölüm</span></a></li>
<li><a href='#'><span>Bölüm</span></a></li>
   <li><a href='#'><span>Bölüm</span></a></li>
<li><a href='#'><span>Bölüm</span></a></li>
   <li><a href='#'><span>Bölüm</span></a></li>
<li><a href='#'><span>Bölüm</span></a></li>
   <li><a href='#'><span>Bölüm</span></a></li>
2-css_menu_thumb.png
Css oluştur>Header.css>Kendi içeriğimi yaz>Ekleyin;
@
Kod:
import url(http://fonts.googleapis.com/css?family=Open+Sans:600);



/* Menu CSS */

#cssmenu, #cssmenu > ul{
    
    background: url(highlight-bg.png) repeat;
    padding-bottom: 3px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    
    
}

#cssmenu:before, #cssmenu:after, #cssmenu > ul:before, #cssmenu > ul:after {

    content: '';
    display: table;
    
}


#cssmenu:after, #cssmenu > ul:after {

    clear: both;
    
}

#cssmenu {

    zoom:1;
    
}

#cssmenu > ul{
    
    background: url(menu-bg.png) repeat;
    margin: 0;
    padding: 0;
    position: relative;
    
}

#cssmenu > ul li{
    
    margin: 0;
    padding: 0;
    list-style: none;
    
}

#cssmenu > ul > li{

    float: left;
    position: relative;
    
}

#cssmenu > ul > li > a{

    padding: 23px 26px;
    display: block;
    color: white;
    font-size: 13px;
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: 0 -1px 0 #9e3825;
    text-shadow: 0 -1px 0 rgba(116, 37, 2, .70);
    line-height: 18px;
    
}


#cssmenu > ul > li:hover > a{

    background: url(hover.png) repeat;
    text-shadow: 0 -1px 0 #97321f;
    text-shadow: 0 -1px 0 rgba(122, 42, 26, .64);
    
}

#cssmenu > ul > li > a > span{

    line-height: 18px;
    
}

#cssmenu > ul > li.active > a, #cssmenu > ul > li > a:active{
    
    background: url(active.png) repeat;
    
}



/* Childs */

#cssmenu > ul ul{

    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 120px;
    background: url(highlight-bg.png) repeat;
    margin: 0;
    padding: 0;
    z-index: -1;

    
}

#cssmenu > ul li:hover ul{
    opacity: 1;
    visibility: visible;
    margin: 0;
    color: #000;
    z-index: 2;
    top:64px;
    left: 0;
    
}

#cssmenu > ul ul:before{

    content: '';
    position: absolute;
    top: -10px;
    width: 100%;
    height: 20px;
    background: transparent;
    
}


#cssmenu > ul ul li{

    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    
}

#cssmenu > ul ul li a{

    padding: 18px 26px;
    display: block;
    color: #393939;
    font-size: 13px;
    text-decoration: none;
    text-transform: uppercase;
    width: 150px;
    border-left: 4px solid transparent;
    -webkit-transition: all .35s ease-in-out;
    -moz-transition: all .35s ease-in-out;
    -ms-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;
    text-shadow: 0 1px 0 white;

}

#cssmenu > ul ul li a:hover{

    border-left: 4px solid #de553b;
    background: url(hover.png) repeat;
    color: white;
    text-shadow: 0 1px 0 black;

}

#cssmenu > ul ul li a:active{

    background: url(menu-bg.png) repeat;

}
Ardından Şablonlar>Ana S.Şablonlar>İndex>Header in üstüne Ekle;
Kod:
<div id='cssmenu'>
<ul>
   <li class='active '><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub '><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a></li>
         <li><a href='#'><span>Product 2</span></a></li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
Hayırlı olsun arkadaşlar farklı tasarımları eklemek için benim anlattığım şekilde ekleyebilirsiniz...
Site adresi:http://cssmenumaker.com/
buradan beğendiğiniz tasarıma tıklayıp >Customize Diyip>Html sini alıp Ana Sayfa Şablonlar>İndex>Header in üstüne ekleyin.>CSS kodunu ise Temalar >Css ekle>Header.css koyun adını Ardından Kendi içeriğimi yaz diyip Css kodunu yapıştırın o siteden.
Güle Güle Kullanın Alıntıdır Anlatım %100 Benimdir.İyi Forumlar Rep Verirseniz Sevinirim.
Ara
Cevapla PGM
Teşekkür verenler:
▓ONUR▓ Çevrimdışı
http://pgoyuncenneti.10tl.net
Yorum Sayısı: 1,488
Konu Sayısı: 193
Üyelik Tarihi: 13-08-2012
Rep Puanı: 122
Teşekkürler: 0
0 mesaj içinde 1 teşekkür verildi.

Kullanıcı Adı Değişiklikleri: ▓ONUR▓
SanalPara (SP): 0 SP
#2
08-01-2013 Saat: 15:09
10tl dışı domain yasak diğilmi sitenin adını koymussunuz?
Ara
Cevapla PGM
Teşekkür verenler:
ASi Çevrimdışı
Kullanıcı
Yorum Sayısı: 4,613
Konu Sayısı: 335
Üyelik Tarihi: 03-09-2012
Rep Puanı: 638
Teşekkürler: 64
121 mesaj içinde 559 teşekkür verildi.

Kullanıcı Adı Değişiklikleri: ASi
SanalPara (SP): 9 SP
#3
08-01-2013 Saat: 15:10
(08-01-2013 Saat: 15:09)▓ONUR▓ Nickli Kullanıcıdan Alıntı: 10tl dışı domain yasak diğilmi sitenin adını koymussunuz?

Herhangi Bir Domaini Şirketi Vs. Temsil Etmiyor CSS sitesi olduğundan verilebilir...
Ara
Cevapla PGM
Teşekkür verenler:
LastWorld Çevrimdışı
Destek Ekibi
Yorum Sayısı: 3,698
Konu Sayısı: 467
Üyelik Tarihi: 10-08-2012
Rep Puanı: 317
Teşekkürler: 46
75 mesaj içinde 128 teşekkür verildi.

Kullanıcı Adı Değişiklikleri: LastWorld
SanalPara (SP): 5,587 SP
#4
08-01-2013 Saat: 15:10
Bana Göre Bu Reklama girmez Herkesin Kullanabilmesi İçin Gerekli Bir Site . Bence Kaldırılmasın .
WWW Ara
Cevapla PGM
Teşekkür verenler:
JocqeR` Çevrimdışı
Magicko
Yorum Sayısı: 2,100
Konu Sayısı: 340
Üyelik Tarihi: 07-12-2012
Rep Puanı: 295
Teşekkürler: 0
0 mesaj içinde 1 teşekkür verildi.

Kullanıcı Adı Değişiklikleri: JocqeR`
SanalPara (SP): 2 SP
#5
08-01-2013 Saat: 15:10
(08-01-2013 Saat: 15:10)LastWorld Nickli Kullanıcıdan Alıntı: Bana Göre Bu Reklama girmez Herkesin Kullanabilmesi İçin Gerekli Bir Site . Bence Kaldırılmasın .
Ara
Cevapla PGM
Teşekkür verenler:
Furkomm Çevrimdışı
Kullanıcı
Yorum Sayısı: 4,148
Konu Sayısı: 299
Üyelik Tarihi: 15-07-2012
Rep Puanı: 281
Teşekkürler: 0
0 mesaj içinde 5 teşekkür verildi.

Kullanıcı Adı Değişiklikleri: Furkomm
SanalPara (SP): 0 SP
#6
08-01-2013 Saat: 15:14
Evet o konuda öylr olmuyor yani 10tl.net dışı bu arada tşkr :)
Ara
Cevapla PGM
Teşekkür verenler:
Namikaze Çevrimdışı
ѕнιнσυιη ∂єѕιgη
Yorum Sayısı: 1,920
Konu Sayısı: 160
Üyelik Tarihi: 03-10-2011
Rep Puanı: 369
Teşekkürler: 5
13 mesaj içinde 86 teşekkür verildi.

Kullanıcı Adı Değişiklikleri: Namikaze
SanalPara (SP): 94 SP
#7
08-01-2013 Saat: 15:17
Teşekkürler :)
Ara
Cevapla PGM
Teşekkür verenler:
ASi Çevrimdışı
Kullanıcı
Yorum Sayısı: 4,613
Konu Sayısı: 335
Üyelik Tarihi: 03-09-2012
Rep Puanı: 638
Teşekkürler: 64
121 mesaj içinde 559 teşekkür verildi.

Kullanıcı Adı Değişiklikleri: ASi
SanalPara (SP): 9 SP
#8
08-01-2013 Saat: 15:20
(08-01-2013 Saat: 15:14)Furkomm Nickli Kullanıcıdan Alıntı: Evet o konuda öylr olmuyor yani 10tl.net dışı bu arada tşkr :)
Önemli Değil...:)
(08-01-2013 Saat: 15:17)Namikaze Minato Nickli Kullanıcıdan Alıntı: Teşekkürler :)
Önemli Değil.:)
Ara
Cevapla PGM
Teşekkür verenler:
NakedFacts Çevrimdışı
Kullanıcı
Yorum Sayısı: 60
Konu Sayısı: 20
Üyelik Tarihi: 14-10-2012
Rep Puanı: 0
Teşekkürler: 0
0 mesaj içinde 0 teşekkür verildi.

Kullanıcı Adı Değişiklikleri: NakedFacts
SanalPara (SP): 0 SP
#9
08-01-2013 Saat: 16:06
gercekten harika seni tebrik ediyorum cok yararli bir konu
Ara
Cevapla PGM
Teşekkür verenler:
ASi Çevrimdışı
Kullanıcı
Yorum Sayısı: 4,613
Konu Sayısı: 335
Üyelik Tarihi: 03-09-2012
Rep Puanı: 638
Teşekkürler: 64
121 mesaj içinde 559 teşekkür verildi.

Kullanıcı Adı Değişiklikleri: ASi
SanalPara (SP): 9 SP
#10
08-01-2013 Saat: 16:56
(08-01-2013 Saat: 16:06)NakedFacts Nickli Kullanıcıdan Alıntı: gercekten harika seni tebrik ediyorum cok yararli bir konu

Ne Demek Teşekkürler Kardeşim.
+Rep Verirseniz Sevinirim Arkadaşlar.
Ara
Cevapla PGM
Teşekkür verenler:
ASi Çevrimdışı
Kullanıcı
Yorum Sayısı: 4,613
Konu Sayısı: 335
Üyelik Tarihi: 03-09-2012
Rep Puanı: 638
Teşekkürler: 64
121 mesaj içinde 559 teşekkür verildi.

Kullanıcı Adı Değişiklikleri: ASi
SanalPara (SP): 9 SP
#11
10-01-2013 Saat: 18:47
Güncel....
Ara
Cevapla PGM
Teşekkür verenler:


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 1 Ziyaretçi



***

Online Shopping App
Online Shopping - E-Commerce Platform
Online Shopping - E-Commerce Platform
Feinunze Schmuck Jewelery Online Shopping