10TL.NET ** › Ana Kategori: Destek-Yönetim-Kurallar › MyBB Destek › Forumunuzun görünüşünü yönetin v
Açılır Menü | kraljmehmet
     
Konuyu Oyla:
  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
Gösterim Stili
Açılır Menü | kraljmehmet
mehmetext Çevrimiçi
Onursal üye
Yorum Sayısı: 5,262
Konu Sayısı: 400
Üyelik Tarihi: 12-11-2014
Rep Puanı: 131
Teşekkürler: 99
175 mesaj içinde 904 teşekkür verildi.

Kullanıcı Adı Değişiklikleri: mehmetext
SanalPara (SP): 6,693 SP
#1
10-06-2017 Saat: 11:16 (Son Düzenleme: 10-06-2017 Saat: 12:12, Düzenleyen: mehmetext.)
Can sıkıntısından yaptığım bir çalışmadır.
HTML kod:

Kod:
<div class="menu">
<!--WebZeyrek.NET Kod Başlangıcı-->
  <li><a href="index.php">Ana Sayfa</a></li>
  <li><a href="search.php">Arama</a></li>
  <li><a href="memberlist.php">Üye Listesi</a></li>
  <li class="acilankat"><a href="#">Kategoriler</a>
  <ul>
  <li><a href="#">1. Kategori</a></li>
  <li class="acilankat-iki"><a href="#">2. Kategori ></a>
  <ul>
  <li><a href="#">1. Kategori</a></li>
  <li><a href="#">2. Kategori</a></li>
  <li><a href="#">3. Kategori</a></li>
  <li class="acilankat-iki"><a href="#">4. Kategori ></a>
  <ul>
  <li><a href="#">1. Kategori</a></li>
  <li><a href="#">2. Kategori</a></li>
  <li><a href="#">3. Kategori</a></li>
  <li><a href="#">4. Kategori</a></li>
  <li><a href="#">5. Kategori</a></li>
  <li><a href="#">6. Kategori</a></li>
  </ul>
  </li>
  <li><a href="#">5. Kategori</a></li>
  <li><a href="#">6. Kategori</a></li>
  <li><a href="#">7. Kategori</a></li>
  </ul>
  </li>
  <li><a href="#">3. Kategori</a></li>
  <li><a href="#">4. Kategori</a></li>
  </ul>
  </li>
  <li><a href="showteam.php">Yetkili Listesi</a></li>
  <li><a href="misc.php?action=help">Yardım</a></li>
<!--WebZeyrek.NET Kod Bitişi-->
</div>

CSS kod:


Kod:
.menu {
      background:#673AB7;
      height:40px;
      font-family: 'Roboto', sans-serif;
      font-size:14px;
  }
  .menu * {
      transition:.25s ease;
  }
  .menu >li {
       list-style:none;
       float:left;
  }
  .menu >li >a{
      line-height:40px;
      display:inline-block;
      padding:0 10px;
      color:#fff;
      font-weight:bold;
      text-decoration:none;
  }
  .menu >li >a:hover {
      background:rgba(255,255,255,.1);  
  }
  .menu >li:after {
      clear:both;
  }
  .acilankat {
      position:relative;
  }
/*WebZeyrek.NET*/
  .acilankat >ul {
      position:absolute;
      width:150px;
      padding:0;
      margin:0;
      background:#512DA8;
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transform:rotate(10deg) translatey(30px);
      border-bottom-left-radius:2px;
      border-bottom-right-radius:2px;
      top:40px;
      left:0;
      transition-delay:.5s;
  }
  .acilankat >ul >li {
      list-style:none;
  }
  .acilankat >ul >li >a {
      color:#fff;
      font-weight:bold;
      text-decoration:none;
      padding:10px;
      display:block;
  }
/*WebZeyrek.NET*/
  .acilankat >ul >li >a:hover {
      background:rgba(0,0,0,.1);
      padding-left:15px;
  }
  .acilankat:hover >ul {
      opacity:1;
      visibility:visible;
      pointer-events:visible;
      transform:rotate(0deg) translatey(0px);
      transition-delay:0s;
  }
  .acilankat-iki {
      position:relative;
  }
  .acilankat-iki >ul{
      position:absolute;
      width:150px;
      padding:0;
      margin:0;
      background:#673AB7;
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transform:translatex(-5px);
      left:150px;
      top:0;
      border-left:1px solid #512DA8;
  }
  .acilankat-iki >ul >li {
      list-style:none;
  }
  .acilankat-iki >ul >li >a {
      color:#fff;
      font-weight:bold;
      text-decoration:none;
      padding:10px;
      display:block;
  }
 
  .acilankat-iki >ul >li >a:hover {
      background:rgba(255,255,255,.1);
      padding-left:15px;
  }
/*WebZeyrek.NET*/
 
  .acilankat-iki:hover >ul {
      opacity:1;
      visibility:visible;
      pointer-events:visible;
      transform:rotate(0deg) translatey(0px);
  }

https://onizle.koddostu.com/ Önizlemek için bu adrese şu kodları ekleyin;


Kod:
<div class="menu">
  <li><a href="#">Ana Sayfa</a></li>
  <li><a href="#">Arama</a></li>
  <li><a href="#">Üye Listesi</a></li>
  <li class="acilankat"><a href="#">Kategoriler</a>
  <ul>
  <li><a href="#">1. Kategori</a></li>
  <li class="acilankat-iki"><a href="#">2. Kategori ></a>
  <ul>
  <li><a href="#">1. Kategori</a></li>
  <li><a href="#">2. Kategori</a></li>
  <li><a href="#">3. Kategori</a></li>
  <li class="acilankat-iki"><a href="#">4. Kategori ></a>
  <ul>
  <li><a href="#">1. Kategori</a></li>
  <li><a href="#">2. Kategori</a></li>
  <li><a href="#">3. Kategori</a></li>
  <li><a href="#">4. Kategori</a></li>
  <li><a href="#">5. Kategori</a></li>
  <li><a href="#">6. Kategori</a></li>
  </ul>
  </li>
  <li><a href="#">5. Kategori</a></li>
  <li><a href="#">6. Kategori</a></li>
  <li><a href="#">7. Kategori</a></li>
  </ul>
  </li>
  <li><a href="#">3. Kategori</a></li>
  <li><a href="#">4. Kategori</a></li>
  </ul>
  </li>
  <li><a href="#">Yetkili Listesi</a></li>
  <li><a href="#">Yardım</a></li>
 
</div>

<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');
  .menu {
      background:#673AB7;
      height:40px;
      font-family: 'Roboto', sans-serif;
      font-size:14px;
  }
  .menu * {
      transition:.25s ease;
  }
  .menu >li {
       list-style:none;
       float:left;
  }
  .menu >li >a{
      line-height:40px;
      display:inline-block;
      padding:0 10px;
      color:#fff;
      font-weight:bold;
      text-decoration:none;
  }
  .menu >li >a:hover {
      background:rgba(255,255,255,.1);  
  }
  .menu >li:after {
      clear:both;
  }
  .acilankat {
      position:relative;
  }
  .acilankat >ul {
      position:absolute;
      width:150px;
      padding:0;
      margin:0;
      background:#512DA8;
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transform:rotate(10deg) translatey(30px);
      border-bottom-left-radius:2px;
      border-bottom-right-radius:2px;
      top:40px;
      left:0;
      transition-delay:.5s;
  }
  .acilankat >ul >li {
      list-style:none;
  }
  .acilankat >ul >li >a {
      color:#fff;
      font-weight:bold;
      text-decoration:none;
      padding:10px;
      display:block;
  }
  .acilankat >ul >li >a:hover {
      background:rgba(0,0,0,.1);
      padding-left:15px;
  }
  .acilankat:hover >ul {
      opacity:1;
      visibility:visible;
      pointer-events:visible;
      transform:rotate(0deg) translatey(0px);
      transition-delay:0s;
  }
  .acilankat-iki {
      position:relative;
  }
  .acilankat-iki >ul{
      position:absolute;
      width:150px;
      padding:0;
      margin:0;
      background:#673AB7;
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transform:translatex(-5px);
      left:150px;
      top:0;
      border-left:1px solid #512DA8;
  }
  .acilankat-iki >ul >li {
      list-style:none;
  }
  .acilankat-iki >ul >li >a {
      color:#fff;
      font-weight:bold;
      text-decoration:none;
      padding:10px;
      display:block;
  }
 
  .acilankat-iki >ul >li >a:hover {
      background:rgba(255,255,255,.1);
      padding-left:15px;
  }
 
  .acilankat-iki:hover >ul {
      opacity:1;
      visibility:visible;
      pointer-events:visible;
      transform:rotate(0deg) translatey(0px);
  }
</style>
kaynak:
Kod:
https://www.webzeyrek.net/thread-817.html
5bo0ov6.png
React.js • Next.js • Tailwind CSS
"Son Tema Ekibi Lideri"
https://destek.10tl.net/showthread.php?tid=99345
WWW Ara
Cevapla PGM
Teşekkür verenler:
Muratbaykam Çevrimdışı
• Mybb Developer •
Yorum Sayısı: 5,267
Konu Sayısı: 889
Üyelik Tarihi: 20-01-2016
Rep Puanı: 115
Teşekkürler: 133
175 mesaj içinde 1270 teşekkür verildi.

Kullanıcı Adı Değişiklikleri: Muratbaykam
SanalPara (SP): 5,293 SP
#2
10-06-2017 Saat: 14:13
SS Koysaydın
→ Bana ulaşmak için / http://english.10tl.net

Mybb • PHP • VB.NET • HTML • CSS • MySQL                                    

Eğer eleştiriden korkuyorsanız, dünyadan hiçbir şey yapmadan geçip gideceksiniz demektir. 
WWW Ara
Cevapla PGM
Teşekkür verenler:
EmSaLSiZ Çevrimdışı
Denetleme Ekibi Baş Müfettiş
Yorum Sayısı: 8,361
Konu Sayısı: 801
Üyelik Tarihi: 03-03-2012
Rep Puanı: 560
Teşekkürler: 168
168 mesaj içinde 1094 teşekkür verildi.

Kullanıcı Adı Değişiklikleri: EmSaLSiZ
SanalPara (SP): 9,378 SP
#3
10-06-2017 Saat: 14:16 (Son Düzenleme: 10-06-2017 Saat: 14:16, Düzenleyen: EmSaLSiZ.)
(10-06-2017 Saat: 14:13)Murat#Baykam Nickli Kullanıcıdan Alıntı: SS Koysaydın

@Murat#Baykam
lWLBVl.png
Arkadaşın yerine atayım sana.
Denetleme Ekibi Lideri: 22-06-2018 -  ....
Ara
Cevapla PGM
Teşekkür verenler:
hakan25 Çevrimdışı
Kullanıcı
Yorum Sayısı: 113
Konu Sayısı: 10
Üyelik Tarihi: 29-05-2017
Rep Puanı: 2
Teşekkürler: 0
0 mesaj içinde 15 teşekkür verildi.

Kullanıcı Adı Değişiklikleri: hakan25
SanalPara (SP): 796 SP
#4
10-06-2017 Saat: 15:19
(10-06-2017 Saat: 11:16)kraljmehmet Nickli Kullanıcıdan Alıntı: Can sıkıntısından yaptığım bir çalışmadır.
HTML kod:

Kod:
<div class="menu">
<!--WebZeyrek.NET Kod Başlangıcı-->
  <li><a href="index.php">Ana Sayfa</a></li>
  <li><a href="search.php">Arama</a></li>
  <li><a href="memberlist.php">Üye Listesi</a></li>
  <li class="acilankat"><a href="#">Kategoriler</a>
  <ul>
  <li><a href="#">1. Kategori</a></li>
  <li class="acilankat-iki"><a href="#">2. Kategori ></a>
  <ul>
  <li><a href="#">1. Kategori</a></li>
  <li><a href="#">2. Kategori</a></li>
  <li><a href="#">3. Kategori</a></li>
  <li class="acilankat-iki"><a href="#">4. Kategori ></a>
  <ul>
  <li><a href="#">1. Kategori</a></li>
  <li><a href="#">2. Kategori</a></li>
  <li><a href="#">3. Kategori</a></li>
  <li><a href="#">4. Kategori</a></li>
  <li><a href="#">5. Kategori</a></li>
  <li><a href="#">6. Kategori</a></li>
  </ul>
  </li>
  <li><a href="#">5. Kategori</a></li>
  <li><a href="#">6. Kategori</a></li>
  <li><a href="#">7. Kategori</a></li>
  </ul>
  </li>
  <li><a href="#">3. Kategori</a></li>
  <li><a href="#">4. Kategori</a></li>
  </ul>
  </li>
  <li><a href="showteam.php">Yetkili Listesi</a></li>
  <li><a href="misc.php?action=help">Yardım</a></li>
<!--WebZeyrek.NET Kod Bitişi-->
</div>

CSS kod:


Kod:
.menu {
      background:#673AB7;
      height:40px;
      font-family: 'Roboto', sans-serif;
      font-size:14px;
  }
  .menu * {
      transition:.25s ease;
  }
  .menu >li {
       list-style:none;
       float:left;
  }
  .menu >li >a{
      line-height:40px;
      display:inline-block;
      padding:0 10px;
      color:#fff;
      font-weight:bold;
      text-decoration:none;
  }
  .menu >li >a:hover {
      background:rgba(255,255,255,.1);  
  }
  .menu >li:after {
      clear:both;
  }
  .acilankat {
      position:relative;
  }
/*WebZeyrek.NET*/
  .acilankat >ul {
      position:absolute;
      width:150px;
      padding:0;
      margin:0;
      background:#512DA8;
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transform:rotate(10deg) translatey(30px);
      border-bottom-left-radius:2px;
      border-bottom-right-radius:2px;
      top:40px;
      left:0;
      transition-delay:.5s;
  }
  .acilankat >ul >li {
      list-style:none;
  }
  .acilankat >ul >li >a {
      color:#fff;
      font-weight:bold;
      text-decoration:none;
      padding:10px;
      display:block;
  }
/*WebZeyrek.NET*/
  .acilankat >ul >li >a:hover {
      background:rgba(0,0,0,.1);
      padding-left:15px;
  }
  .acilankat:hover >ul {
      opacity:1;
      visibility:visible;
      pointer-events:visible;
      transform:rotate(0deg) translatey(0px);
      transition-delay:0s;
  }
  .acilankat-iki {
      position:relative;
  }
  .acilankat-iki >ul{
      position:absolute;
      width:150px;
      padding:0;
      margin:0;
      background:#673AB7;
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transform:translatex(-5px);
      left:150px;
      top:0;
      border-left:1px solid #512DA8;
  }
  .acilankat-iki >ul >li {
      list-style:none;
  }
  .acilankat-iki >ul >li >a {
      color:#fff;
      font-weight:bold;
      text-decoration:none;
      padding:10px;
      display:block;
  }
 
  .acilankat-iki >ul >li >a:hover {
      background:rgba(255,255,255,.1);
      padding-left:15px;
  }
/*WebZeyrek.NET*/
 
  .acilankat-iki:hover >ul {
      opacity:1;
      visibility:visible;
      pointer-events:visible;
      transform:rotate(0deg) translatey(0px);
  }

https://onizle.koddostu.com/ Önizlemek için bu adrese şu kodları ekleyin;


Kod:
<div class="menu">
  <li><a href="#">Ana Sayfa</a></li>
  <li><a href="#">Arama</a></li>
  <li><a href="#">Üye Listesi</a></li>
  <li class="acilankat"><a href="#">Kategoriler</a>
  <ul>
  <li><a href="#">1. Kategori</a></li>
  <li class="acilankat-iki"><a href="#">2. Kategori ></a>
  <ul>
  <li><a href="#">1. Kategori</a></li>
  <li><a href="#">2. Kategori</a></li>
  <li><a href="#">3. Kategori</a></li>
  <li class="acilankat-iki"><a href="#">4. Kategori ></a>
  <ul>
  <li><a href="#">1. Kategori</a></li>
  <li><a href="#">2. Kategori</a></li>
  <li><a href="#">3. Kategori</a></li>
  <li><a href="#">4. Kategori</a></li>
  <li><a href="#">5. Kategori</a></li>
  <li><a href="#">6. Kategori</a></li>
  </ul>
  </li>
  <li><a href="#">5. Kategori</a></li>
  <li><a href="#">6. Kategori</a></li>
  <li><a href="#">7. Kategori</a></li>
  </ul>
  </li>
  <li><a href="#">3. Kategori</a></li>
  <li><a href="#">4. Kategori</a></li>
  </ul>
  </li>
  <li><a href="#">Yetkili Listesi</a></li>
  <li><a href="#">Yardım</a></li>
 
</div>

<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');
  .menu {
      background:#673AB7;
      height:40px;
      font-family: 'Roboto', sans-serif;
      font-size:14px;
  }
  .menu * {
      transition:.25s ease;
  }
  .menu >li {
       list-style:none;
       float:left;
  }
  .menu >li >a{
      line-height:40px;
      display:inline-block;
      padding:0 10px;
      color:#fff;
      font-weight:bold;
      text-decoration:none;
  }
  .menu >li >a:hover {
      background:rgba(255,255,255,.1);  
  }
  .menu >li:after {
      clear:both;
  }
  .acilankat {
      position:relative;
  }
  .acilankat >ul {
      position:absolute;
      width:150px;
      padding:0;
      margin:0;
      background:#512DA8;
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transform:rotate(10deg) translatey(30px);
      border-bottom-left-radius:2px;
      border-bottom-right-radius:2px;
      top:40px;
      left:0;
      transition-delay:.5s;
  }
  .acilankat >ul >li {
      list-style:none;
  }
  .acilankat >ul >li >a {
      color:#fff;
      font-weight:bold;
      text-decoration:none;
      padding:10px;
      display:block;
  }
  .acilankat >ul >li >a:hover {
      background:rgba(0,0,0,.1);
      padding-left:15px;
  }
  .acilankat:hover >ul {
      opacity:1;
      visibility:visible;
      pointer-events:visible;
      transform:rotate(0deg) translatey(0px);
      transition-delay:0s;
  }
  .acilankat-iki {
      position:relative;
  }
  .acilankat-iki >ul{
      position:absolute;
      width:150px;
      padding:0;
      margin:0;
      background:#673AB7;
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transform:translatex(-5px);
      left:150px;
      top:0;
      border-left:1px solid #512DA8;
  }
  .acilankat-iki >ul >li {
      list-style:none;
  }
  .acilankat-iki >ul >li >a {
      color:#fff;
      font-weight:bold;
      text-decoration:none;
      padding:10px;
      display:block;
  }
 
  .acilankat-iki >ul >li >a:hover {
      background:rgba(255,255,255,.1);
      padding-left:15px;
  }
 
  .acilankat-iki:hover >ul {
      opacity:1;
      visibility:visible;
      pointer-events:visible;
      transform:rotate(0deg) translatey(0px);
  }
</style>
kaynak:
Kod:
https://www.webzeyrek.net/thread-817.html
Güzel olmuş.
Ara
Cevapla PGM
Teşekkür verenler:
mehmetext Çevrimiçi
Onursal üye
Yorum Sayısı: 5,262
Konu Sayısı: 400
Üyelik Tarihi: 12-11-2014
Rep Puanı: 131
Teşekkürler: 99
175 mesaj içinde 904 teşekkür verildi.

Kullanıcı Adı Değişiklikleri: mehmetext
SanalPara (SP): 6,693 SP
#5
10-06-2017 Saat: 16:05
Teşekkürler.
Murat, hoverli falan olduğu için ss koymak istemedim.
5bo0ov6.png
React.js • Next.js • Tailwind CSS
"Son Tema Ekibi Lideri"
https://destek.10tl.net/showthread.php?tid=99345
WWW Ara
Cevapla PGM
Teşekkür verenler:
yusufkoc Çevrimdışı
-
Yorum Sayısı: 2,361
Konu Sayısı: 150
Üyelik Tarihi: 16-04-2017
Rep Puanı: 53
Teşekkürler: 8
4 mesaj içinde 874 teşekkür verildi.

Kullanıcı Adı Değişiklikleri: yusufkoc
SanalPara (SP): 479 SP
#6
10-06-2017 Saat: 16:17
Elinize sağlık hocam.
WWW Ara
Cevapla PGM
Teşekkür verenler:
mehmetext Çevrimiçi
Onursal üye
Yorum Sayısı: 5,262
Konu Sayısı: 400
Üyelik Tarihi: 12-11-2014
Rep Puanı: 131
Teşekkürler: 99
175 mesaj içinde 904 teşekkür verildi.

Kullanıcı Adı Değişiklikleri: mehmetext
SanalPara (SP): 6,693 SP
#7
10-06-2017 Saat: 16:20
Teşekkürler.
5bo0ov6.png
React.js • Next.js • Tailwind CSS
"Son Tema Ekibi Lideri"
https://destek.10tl.net/showthread.php?tid=99345
WWW 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