jQuery Dropdown (Aşağı Açılır) Menu Örneği
Anasayfa  ›  jQuery  ›  Kod

jQuery Dropdown (Aşağı Açılır) Menu Örneği

in
jQuery aşağı açılır (dropdown) menü ile tasarım işi ile uğraşanların veya yeni yeni kodlama ile bir şeyler yapmaya çalışanlar için güzel bir örnek teşkil edecektir. Web sayfalarınızda rahatlıkla kullanabilirsiniz. Animasyon efekti ile sade ve şık bir görünüme sahiptir.
jQuery kullanımı için;
HTML açıklamasını ve sırasız listeleri kullanarak açılan menüyü aşağıdaki gibi oluşturun.
<div class="vui-menu">
  <dl class="vui-main">
      <dd class="vui-item">
          <a href="#" class="vui-item-value">
              <span class="vui-item-value-icon"></span>
              <span class="vui-item-value-text">Home</span>
          </a>
      </dd>
      <dd class="vui-item">
          <a href="#" class="vui-item-value">
              <span class="vui-item-value-icon"></span>
              <span class="vui-item-value-text">About</span>
          </a>
      </dd>
      <dd class="vui-item">
          <a href="#" class="vui-item-value">
              <span class="vui-item-value-icon"></span>
              <span class="vui-item-value-text">Front-End</span>
          </a>
          <ul class="vui-children">
              <li class="vui-child-item">
                  <a href="#" class="vui-child-value">
                      <span class="vui-child-value-icon"></span>
                      <span class="vui-child-value-text">HTML5</span>
                  </a>
              </li>
              <li class="vui-child-item">
                  <a href="#" class="vui-child-value">
                      <span class="vui-child-value-icon"></span>
                      <span class="vui-child-value-text">CSS/CSS3</span>
                  </a>
              </li>
              <li class="vui-child-item">
                  <a href="#" class="vui-child-value">
                      <span class="vui-child-value-icon"></span>
                      <span class="vui-child-value-text">JavaScript</span>
                  </a>
              </li>
          </ul>
      </dd>
      <dd class="vui-item">
          <a href="#" class="vui-item-value">
              <span class="vui-item-value-icon"></span>
              <span class="vui-item-value-text">Back-End</span>
          </a>
          <ul class="vui-children">
              <li class="vui-child-item">
                  <a href="#" class="vui-child-value">
                      <span class="vui-child-value-icon"></span>
                      <span class="vui-child-value-text">PHP</span>
                  </a>
              </li>
              <li class="vui-child-item">
                  <a href="#" class="vui-child-value">
                      <span class="vui-child-value-icon"></span>
                      <span class="vui-child-value-text">Java</span>
                  </a>
              </li>
              <li class="vui-child-item">
                  <a href="#" class="vui-child-value">
                      <span class="vui-child-value-icon"></span>
                      <span class="vui-child-value-text">.Net</span>
                  </a>
              </li>
          </ul>
      </dd>
  </dl>
</div>
Açılır menü için gerekli CSS stilleri. Aşağıdaki CSS snippet'lerini web sayfanıza kopyalayın ve yerleştirin.
.vui-menu {
  position: relative;
  display: block;
  padding: 0;
  margin: 0 auto;
  max-width: 1000px;
  height: 40px;
  background: #B10000;
  z-index: 999;
}

/* a */


.vui-menu a, .vui-menu a:hover { text-decoration: none; }

/* dl */


.vui-menu .vui-main {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border-width: 0;
  list-style: none outside none;
  font-size: 0;
  vertical-align: top;
}

/* dl dd */


.vui-menu .vui-item {
  position: relative;
  float: left;
  display: inline;
  height: 100%;
  padding: 0;
  margin: 0 auto;
  border-width: 0;
  list-style: none outside none;
}

/* dl dd a */


.vui-menu .vui-item-value {
  position: relative;
  float: left;
  display: inline;
  overflow: hidden;
  height: 100%;
  padding: 0;
  margin: 0;
  border-width: 0;
  cursor: pointer;
  z-index: 95;
}

/* dl dd a icon */


.vui-menu .vui-item-value .vui-item-value-icon {
  position: absolute;
  top: 10px;
  left: 5px;
  display: block;
  overflow: hidden;
  height: 20px;
  width: 20px;
  margin: 0;
  padding: 0;
  border-width: 0;
  background: url(arrow.gif) no-repeat center center;
  cursor: pointer;
}

/* dl dd a text */


.vui-menu .vui-item-value .vui-item-value-text {
  float: left;
  display: inline;
  height: 20px;
  margin: 10px 15px 10px 30px;
  line-height: 20px;
  text-align: center;
  font-size: 14px;
  font-weight: normal;
  color: #FFF;
  cursor: pointer;
}

/* dl dd ul */


.vui-menu .vui-children {
  position: absolute;
  left: 0;
  float: left;
  display: inline;
  visibility: hidden;
  overflow: hidden;
  padding: 0;
  margin: 0 auto;
  border: none;
  list-style: none outside none;
  background: #000;
  z-index: 90;
}

/* dl dd ul li */


.vui-menu .vui-child-item {
  float: left;
  display: inline;
  height: 30px;
  margin: 0 auto;
  clear: both;
}

/* dl dd ul li a */


.vui-menu .vui-child-value {
  position: relative;
  float: left;
  display: inline;
  height: 100%;
  margin: 0 auto;
  font-size: 12px;
  clear: both;
  cursor: pointer;
}

/* dl dd ul li a icon */


.vui-menu .vui-child-value-icon {
  position: absolute;
  top: 5px;
  left: 5px;
  display: block;
  overflow: hidden;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border-width: 0;
  background: url(arrow.gif) no-repeat center center;
  cursor: pointer;
}

/* dl dd ul li a text */


.vui-menu .vui-child-value-text {
  float: left;
  display: inline;
  overflow: hidden;
  height: 20px;
  margin: 5px 15px 5px 30px;
  white-space: nowrap;
  line-height: 20px;
  font-weight: normal;
  color: #FFF;
  cursor: pointer;
}

.vui-menu .vui-current-bar-box {
  position: absolute;
  top: -3px;
  left: 0;
  height: 3px;
  width: 100%;
  overflow: hidden;
}

.vui-menu .vui-current-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  background: #000;
}

.vui-menu .vui-item-hover { background: #C00; }

.vui-menu .vui-item-hover .vui-item-value-text { color: #FFF; }

.vui-menu .vui-item-hover .vui-item-value-icon { }

.vui-menu .vui-child-hover { background: #555; }

.vui-menu .vui-child-hover .vui-child-value-text { color: #FFF; } 
Veya doğrudan stil style.csssayfasını sayfaya ekleyin.
<link rel="stylesheet" href="style.css"> 
jQuery JavaScript kitaplığını ve jQuery vmcMenu eklentisinin JavaScript'ini vmc.menu.min.jssayfanın altına ekleyin.
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="vmc.menu.min.js"></script>
Efektler için jQuery hafifletme eklentisini ekleyin.
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> 
Açılır menüyü sıfırlayın.
$(function () {
  $('.vui-menu').vmcMenu();
});
Bu harika jQuery eklentisi vomoc tarafından geliştirilmiştir . Daha İleri Düzey Kullanımlar için lütfen demo sayfasını kontrol edin veya resmi web sitesini ziyaret edin 
Umarım faydalı olmuştur. Görüş ve önerilerinizi yorum bölümünde bekliyorum.
Önceki
Sonraki
Uzman Öğretici

yazılan gönderi: