Açılır Menü | kraljmehmet

FacebookPaylaş
#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/wz-acilir-menu-kraljmehmet.html
Son Düzenleme: 11-06-2017, Saat: 15:18, Düzenleyen: kraljmehmet.
Ara
#2
Teşekkürler
Ara
#3
Rica ederim.
Ara
#4
Teşekkürler
Ara
« Önceki Konu | Sonraki Konu »
Konuyu Okuyanlar:
1 Ziyaretçi
Hızlı Menü:
task