MyBBDepo - Türkiyenin MyBB Deposu Forumuna Hoşgeldiniz
Eğer sitemize yaptığınız ilk ziyaretiniz ise, lütfen öncelikle Forum Kurallarını okuyunuz. Forumumuzda bilgi alışverişinde bulunabilmeniz için Kayıt olmalısınız. Üye olmayanlar forumumuzdan yararlanamazlar.
Eğer zaten kayıtlı kullanıcı iseniz, lütfen kullanıcı adınız ve şifreniz ile, Giriş yapınız. (Sitemize üyelik ücretsizdir).
mehmeteq avatar
Konuyu Oyla:
  • Derecelendirme: 0/5 - 0 oy
  • 1
  • 2
  • 3
  • 4
  • 5

Derecelendirme: 0/5 - 0 oy

Açılır Menü | kraljmehmet


Sponsor Reklam

Çevrimdışı mehmeteq
 Tarih: 10-06-2017, Saat:20:58
#1
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
Cevapla
Bunu Beğenenler: EmreKRMN
Sponsor Reklam
Sponsor Reklam

 


Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
Kod İkonlu Menü Tasarımı usameavci 4 1,646 21-02-2014, Saat:20:31
Son Yorum: usameavci
  Mbz Navigation Menü HTML Kodu ByMekan 3 2,568 07-09-2012, Saat:18:45
Son Yorum: WampiR



Konuyu Okuyanlar: 1 Ziyaretçi