menuAim
Başlık ekledik, resim ekledik ama bir türlü konuya nereden başlayacağıma karar veremedim. Örnekler hep birbirine benzediği  için farklı açıklama bulup yazmak biraz zor oluyor. Konuya  böyle başlayınca anlatımda rahat oluyor tabi. :=) menuAim adında bir jQuery uygulaması tarafından Ben Kamens  geliştirilmiş, sizlerin daha kolay yatay drop down  ve resimli menü örnekleri hazırlayabilmeniz için. Oldukça kullanışlı ve birçok web sitesi için kullanılmaya değer.

Drop down menü örneklerini az çok bilirsiniz. Genel olarak bu tarz yapılan örneklerde mouse kategori linklerinin üzerine geldiği anda alt kategoriler  açılır. Buraya kadar her şey normal ve en çok kullanılan özelliklerden biridir. Bazı web sitelerinde mouse kategori linklerinin üzerine geldiği anda alt kategoriler açılır ve bu alt kategorilerin üzerinde mousenizi gezdirdiğiniz  anda sağ tarafta alt kategori ile alakalı resim görüntülenir. Aynı manşet haber örnekleri gibi düşünün. 1, 2, 3, 4 gibi numaralandırılmış manşet alanında hangi rakamın üzerine mouse gelse o rakam ile ilişkilendirilmiş resim çıkar karşınıza.

menuAim uygulaması da bu tarz örnekler  hazırlayabilmeniz için  oldukça kolay bir yoldur. Hiç bir kod  bilgisine ihtiyacınız yok. Zaten örnek bir tane koduyla beraber bulunuyor. Kategorileri çoğaltmak istediğiniz zaman kopyala yapıştır yoluyla bunu yapabilirsiniz. Ayrıca açılan alt linkler  tooltip (bilgilendirme balonu) benzeri bir çerçeve içinde açılıyorlar ve resimli alt linklerin çıkması için üst kategori linkine tıklamanız gerekiyor. Tooltip çerçevesinin tekrar kapanması içinde yine aynı şekilde linke tıklamanız gerekiyor.

 Kullanım

  • Head  etiketleri arasına eklenmesi gereken bölümler.

Js ve Css dosya adresleri : 

    <link href="css/bootstrap.css" rel="stylesheet">
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="../jquery.menu-aim.js"></script>
    <script src="js/bootstrap.min.js"></script>

 JavaScript : 

    <script>

        var $menu = $(".dropdown-menu");
        $menu.menuAim({
            activate: activateSubmenu,
            deactivate: deactivateSubmenu
        });

        function activateSubmenu(row) {
            var $row = $(row),
                submenuId = $row.data("submenuId"),
                $submenu = $("#" + submenuId),
                height = $menu.outerHeight(),
                width = $menu.outerWidth();

            // Show the submenu
            $submenu.css({
                display: "block",
                top: -1,
                left: width - 3,  // main should overlay submenu
                height: height - 4  // padding for main dropdown's arrow
            });

            // Keep the currently activated row's highlighted look
            $row.find("a").addClass("maintainHover");
        }

        function deactivateSubmenu(row) {
            var $row = $(row),
                submenuId = $row.data("submenuId"),
                $submenu = $("#" + submenuId);

            // Hide the submenu and remove the row's highlighted look
            $submenu.css("display", "none");
            $row.find("a").removeClass("maintainHover");
        }

        $(document).click(function() {
            $(".popover").css("display", "none");
            $("a.maintainHover").removeClass("maintainHover");
        });

    </script>

 Css : 

    <style>
        .navbar .popover {
            width: 400px;
            -webkit-border-top-left-radius: 0px;
            -webkit-border-bottom-left-radius: 0px;
            border-top-left-radius: 0px;
            border-bottom-left-radius: 0px;
            overflow: hidden;
        }

        .navbar .popover-content {
            text-align: center;
        }

        .navbar .popover-content img {
            height: 212px;
            max-width: 250px;
        }

        .navbar .dropdown-menu {
            -webkit-border-top-right-radius: 0px;
            -webkit-border-bottom-right-radius: 0px;
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;

            -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
        }

        .navbar .dropdown-menu > li > a:hover {
            background-image: none;
            color: white;
            background-color: rgb(0, 129, 194);
            background-color: rgba(0, 129, 194, 0.5);
        }

        .navbar .dropdown-menu > li > a.maintainHover {
            color: white;
            background-color: #0081C2;
        }
    </style>
  •  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="#">A dropdown example</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Explore the Monkeys</a>
                <ul class="dropdown-menu" role="menu">
                    <li data-submenu-id="submenu-patas">
                        <a href="#">Patas</a>
                        <div id="submenu-patas" class="popover">
                            <h3 class="popover-title">Patas</h3>
                            <div class="popover-content"><img src="img/patas.png"></div>
                        </div>
                    </li>
                    <li data-submenu-id="submenu-snub-nosed">
                        <a href="#">Golden Snub-Nosed</a>
                        <div id="submenu-snub-nosed" class="popover">
                            <h3 class="popover-title">Golden Snub-Nosed</h3>
                            <div class="popover-content"><img src="img/snub-nosed.png"></div>
                        </div>
                    </li>
                    <li data-submenu-id="submenu-duoc-langur">
                        <a href="#">Duoc Langur</a>
                        <div id="submenu-duoc-langur" class="popover">
                            <h3 class="popover-title">Duoc Langur</h3>
                            <div class="popover-content"><img src="img/duoc-langur.png"></div>
                        </div>
                    </li>
                    <li data-submenu-id="submenu-pygmy">
                        <a href="#">Baby Pygmy Marmoset</a>
                        <div id="submenu-pygmy" class="popover">
                            <h3 class="popover-title">Baby Pygmy Marmoset</h3>
                            <div class="popover-content"><img src="img/pygmy.png"></div>
                        </div>
                    </li>
                    <li data-submenu-id="submenu-tamarin">
                        <a href="#">Black Lion Tamarin</a>
                        <div id="submenu-tamarin" class="popover">
                            <h3 class="popover-title">Black Lion Tamarin</h3>
                            <div class="popover-content"><img src="img/tamarin.png"></div>
                        </div>
                    </li>
                    <li data-submenu-id="submenu-monk">
                        <a href="#">Monk Saki</a>
                        <div id="submenu-monk" class="popover">
                            <h3 class="popover-title">Monk Saki</h3>
                            <div class="popover-content"><img src="img/monk.png"></div>
                        </div>
                    </li>
                    <li data-submenu-id="submenu-gabon">
                        <a href="#">Gabon Talapoin</a>
                        <div id="submenu-gabon" class="popover">
                            <h3 class="popover-title">Gabon</h3>
                            <div class="popover-content"><img src="img/gabon.png"></div>
                        </div>
                    </li>
                    <li data-submenu-id="submenu-grivet">
                        <a href="#">Grivet</a>
                        <div id="submenu-grivet" class="popover">
                            <h3 class="popover-title">Grivet</h3>
                            <div class="popover-content"><img src="img/grivet.png"></div>
                        </div>
                    </li>
                    <li data-submenu-id="submenu-red-leaf">
                        <a href="#">Red Leaf</a>
                        <div id="submenu-red-leaf" class="popover">
                            <h3 class="popover-title">Red Leaf</h3>
                            <div class="popover-content"><img src="img/red-leaf.png"></div>
                        </div>
                    </li>
                    <li data-submenu-id="submenu-king-colobus">
                        <a href="#">King Colobus</a>
                        <div id="submenu-king-colobus" class="popover">
                            <h3 class="popover-title">King Colobus</h3>
                            <div class="popover-content"><img src="img/colobus.png"></div>
                        </div>
                    </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

 


Ali senin düşüncelerini merak ediyor. Bir yorum yaz

  1. Armağan dedi ki:

    çok hoşuma gitti ve kendi sitem için böyle birşeyi kullanmak isterim. 1 haftadır html css öğrenmeye çalışıyorum az çok bilgi sahibi oldum ve bunu alıp kendi sitemde koymadan önce değişiklik yapmak istiyorum. bu kodları kullanmamda bir sakınca varmı? ücretli falan mı oluyor bunlar? kodlarını görebildiğimiz herşeyi kullanabilir miyiz gibi sorular aklıma geliyor bu tip paylaşımlar görünce. menuaim.js programıyla hiç kod bilmeden aynısını yapabilir miyim acaba? lütfen mazur görün yeni başladığım için belki basit şeyler soruyorum ama benim için önemli şeyler 🙂

    • Ali dedi ki:

      Istedigin kadar degistirebilirsin. Mit lisansi altinda ucretsiz olarak yayinlaniyor. Istersen gelistir baska kisilere yapacagin tasarimlar icin para al ticaret yap 🙂