Version: 0.1
How can i use?

Navigasyon/ Menü

<div class="hb-navigation"> <ul class="hb-menu"> <li class="menu-item"><a class="menu-link"><span>ELEKTRONİK</span></a></li> <li class="menu-item"><a class="menu-link link" href="javascript:;"><i class="hb-navigation-icon moda"></i><span>MODA TAKI</span></a></li> <li class="menu-item"><a class="menu-link"><span>EV, YAŞAM, KIRTASİYE, OFİS</span></a></li> <li class="menu-item"><a class="menu-link"><span>OTO, BAHÇE, YAPI MARKET</span></a></li> <li class="menu-item"><a class="menu-link"><span>ANNE, BEBEK OYUNCAK</span></a></li> <li class="menu-item"><a class="menu-link"><span>SPOR OUTDOOR</span></a></li> <li class="menu-item"><a class="menu-link"><span>KOZMETİK KİŞİSEL BAKIM</span></a></li> <li class="menu-item"><a class="menu-link"><span>SÜPERMARKET PETSHOP</span></a></li> <li class="menu-item"><a class="menu-link"><span>KİTAP, MÜZİK FİLM, HOBİ</span></a></li> </ul> </div>

First Menu Style/ First menu

<div class="hb-navigation-vertical"> <ul class="hb-vertical-menu"> <li><a class="hb-vertical-menu-title">Bilgisayar Tablet<i class="icon hb-icon-next_arrow"></i></a></li> <li><a class="hb-vertical-menu-title">Yazıcılar & Tarayıcılar<i class="icon hb-icon-next_arrow"></i></a></li> <li><a class="hb-vertical-menu-title">Telefon<i class="icon hb-icon-next_arrow"></i></a></li> <li><a class="hb-vertical-menu-title">Akıllı Ev & Yaşam<i class="icon hb-icon-next_arrow"></i></a></li> <li><a class="hb-vertical-menu-title">BTV, Görüntü & Ses Sistemleri<i class="icon hb-icon-next_arrow"></i></a></li> <li><a class="hb-vertical-menu-title">Beyaz Eşya<i class="icon hb-icon-next_arrow"></i></a></li> <li><a class="hb-vertical-menu-title">Elektrikli Ev Aletleri<i class="icon hb-icon-next_arrow"></i></a></li> <li><a class="hb-vertical-menu-title">Foto & Kamera<i class="icon hb-icon-next_arrow"></i></a></li> <li><a class="hb-vertical-menu-title">Isıtma ve Soğutma<i class="icon hb-icon-next_arrow"></i></a></li> <li><a class="hb-vertical-menu-title">Oyun & Oyun Konsolları<i class="icon hb-icon-next_arrow"></i></a></li> </ul> </div>

Navigation Submenu/ Submenu

<div class="hb-navigation-sub-menu hb-container"> <div class="hb-part hb-contain-lg-5 hb-contain-md-5 hb-contain-tb-3 hb-contain-tbs-3"> <div class="hb-column hb-col-lg-3 hb-col-md-3 hb-col-tb-3 hb-col-tbs-3 hb-col-4"> <div class="hb-navigation-sub-menu-container"> <ul class="hb-sub-menu-column hb-column hb-col-lg-1 hb-col-md-1 hb-col-tb-1 hb-col-tbs-1"> <li><a>Mobilya</a> <ul class="hb-sub-menu-children"> <li><a>Yatak Odası</a> <ul class="hb-sub-menu-children"> <li><a class="hb-sub-menu-item">Gardırop, </a><a class="hb-sub-menu-item">Komodin, </a><a class="hb-sub-menu-item">Baza, </a><a class="hb-sub-menu-item">Başlık</a></li> </ul> </li> <li><a>Oturma Odası</a> <ul class="hb-sub-menu-children"> <li><a class="hb-sub-menu-item">Kanepe ve Koltuk, </a><a class="hb-sub-menu-item">Puf / Minder</a></li> </ul> </li> <li><a>Yemek Odası</a></li> <li><a>Tv Sehpaları/Üniteleri</a></li> <li><a>Çalışma Odası</a></li> <li><a>Antre / Hol</a></li> <li><a>Genç Odası</a></li> <li><a>Bebek Odası</a></li> <li><a>Mutfak</a></li> </ul> </li> </ul> <ul class="hb-sub-menu-column hb-column hb-col-lg-1 hb-col-md-1 hb-col-tb-1 hb-col-tbs-1"> <li><a>Ev Tekstili</a> <ul class="hb-sub-menu-children"> <li><a class="hb-sub-menu-item">Yatak Odası Ürünleri, </a><a class="hb-sub-menu-item">Halı, </a><a class="hb-sub-menu-item">Perde, </a><a class="hb-sub-menu-item">Kilim, </a><a class="hb-sub-menu-item">Banyo Tekstili, </a><a class="hb-sub-menu-item">Ev Dekorasyon Ürünleri, </a><a class="hb-sub-menu-item">Yataklar, </a><a class="hb-sub-menu-item">Nevresim Takımları, </a><a class="hb-sub-menu-item">Yastık, </a><a class="hb-sub-menu-item">Yorgan, </a><a class="hb-sub-menu-item">Yatak Örtüsü</a></li> </ul> </li> <li><a>Ev Dekorasyon</a> <ul class="hb-sub-menu-children"> <li><a class="hb-sub-menu-item">Tasarım Ürünleri, </a><a class="hb-sub-menu-item">Duvar Saatleri, </a><a class="hb-sub-menu-item">Duvar Kağıtları, </a><a class="hb-sub-menu-item">Tablolar, </a><a class="hb-sub-menu-item">Aynalar</a></li> </ul> </li> <li><a>Elektrik & Aydınlatma</a> <ul class="hb-sub-menu-children"> <li><a class="hb-sub-menu-item">Abajur, </a><a class="hb-sub-menu-item">Ampuller, </a><a class="hb-sub-menu-item">Aplik, </a><a class="hb-sub-menu-item">Avize</a></li> </ul> </li> <li><a>Ev ve Mutfak Gereçleri</a> <ul class="hb-sub-menu-children"> <li><a class="hb-sub-menu-item">Mutfak Gereçleri, </a><a class="hb-sub-menu-item">Ev Gereçleri, </a><a class="hb-sub-menu-item">Tencereler, </a><a class="hb-sub-menu-item">Yemek Takımları, </a></li> </ul> </li> </ul> <ul class="hb-sub-menu-column hb-column hb-col-lg-1 hb-col-md-1 hb-col-tb-1 hb-col-tbs-1"> <li><a>Ofis / Kırtasiye</a> <ul class="hb-sub-menu-children"> <li><a class="hb-sub-menu-item">Kırtasiye Ürünleri, </a><a class="hb-sub-menu-item">Ofis Makineleri, </a><a class="hb-sub-menu-item">Okul Ürünleri, </a><a class="hb-sub-menu-item">Fotokopi Kağıdı, </a><a class="hb-sub-menu-item">Projeksiyon Sistemleri, </a><a class="hb-sub-menu-item">Piller ve Şarj Cihazları, </a><a class="hb-sub-menu-item">Ofis Sarf Malzemeleri</a></li> </ul> </li> <li><a>Ofis Mobilyaları</a> <ul class="hb-sub-menu-children"> <li><a class="hb-sub-menu-item">Ofis Koltukları, </a><a class="hb-sub-menu-item">Para Kasaları, </a><a class="hb-sub-menu-item">Ofis Masaları, </a><a class="hb-sub-menu-item">Masa Takımları, </a><a class="hb-sub-menu-item">Ofis Dolapları, </a><a class="hb-sub-menu-item">Ayaklı Küllük</a></li> </ul> </li> <li><a>Elektrikli Ev Aletleri</a> <ul class="hb-sub-menu-children"> <li><a class="hb-sub-menu-item">Elektrikli Mutfak Aletleri, </a><a class="hb-sub-menu-item">Ütüler, </a><a class="hb-sub-menu-item">Süpürgeler, </a><a class="hb-sub-menu-item">Çay Makineleri, </a><a class="hb-sub-menu-item">Kahve Makineleri, </a><a class="hb-sub-menu-item">Tost Makinesi, </a><a class="hb-sub-menu-item">Blender</a></li> </ul> </li> </ul> </div> </div> <div class="hb-column hb-col-lg-2 hb-col-md-2 hb-col-tb-3 hb-col-tbs-3 hb-col-1"> <div class="hb-banner-container"><a class="hb-banner"><img src="//design.hepsiburada.net/assets/storefront/banners/22-09-2016_1474560514907_1.png" /></a><a class="hb-banner"><img src="//design.hepsiburada.net/assets/storefront/projeksiyon_1809.png" /></a><a class="hb-banner"><img src="//design.hepsiburada.net/assets/storefront/banners/08-01-2017_1483731692959_1.png" /></a><a class="hb-banner"><img src="//design.hepsiburada.net/assets/storefront/banners/17-01-2017_1484652321623_1.png" /></a></div> </div> </div> </div>

Navigasyon - Mobile/ Mobile Menü

<div class="hb-navigation-mobile"><i class="icon hb-icon-hamburger_menu"></i> <div class="menu-content"> <div class="menu-my-account"><i class="icon hb-icon-user_icon"></i> <div class="menu-my-account-info"> <div class="menu-my-account-caption">Hesabım</div> <div class="menu-my-account-name">Volkan Tağal</div> </div> <div class="menu-my-account-items-content"> <ul class="menu-my-account-items"> <li class="my-account-item"><a class="my-account-item-link">Ana Sayfa</a></li> <li class="my-account-item"><a class="my-account-item-link">Siparişlerim</a></li> </ul> </div> </div> <ul class="hb-menu"> <li class="menu-item active"><a class="menu-link"><span>ELEKTRONİK</span><i class="icon hb-icon-down_arrow"></i></a> <ul class="sub-menu"> <li class="sub-menu-item active"><a class="sub-menu-item-link"><span>Bilgisayar/Tablet</span><i class="icon hb-icon-indent_icon"></i><i class="icon hb-icon-down_arrow"></i></a> <ul class="sub-sub-menu"> <li class="sub-sub-menu-item"><a>Dizüstü Bilgisayar<i class="icon hb-icon-indent_icon"></i></a> <ul> <li> <a>Notebook</a></li> <li><a>2'si 1 arada</a></li> <li><a>Oyun Bilgisayarları</a></li> </ul> </li> <li class="sub-sub-menu-item"><a>Tablet<i class="icon hb-icon-indent_icon"></i></a> <ul> <li> <a>Notebook</a></li> <li><a>2'si 1 arada</a></li> <li><a>Oyun Bilgisayarları</a></li> </ul> </li> </ul> </li> <li class="sub-menu-item"><a class="sub-menu-item-link"><span>Yazıcılar/Tarayıcılar</span><i class="icon hb-icon-indent_icon"></i><i class="icon hb-icon-down_arrow"></i></a> <ul class="sub-sub-menu"> <li class="sub-sub-menu-item"><a>Dizüstü Bilgisayar<i class="icon hb-icon-indent_icon"></i></a> <ul> <li> <a>Notebook</a></li> <li><a>2'si 1 arada</a></li> <li><a>Oyun Bilgisayarları</a></li> </ul> </li> <li class="sub-sub-menu-item"><a>Tablet<i class="icon hb-icon-indent_icon"></i></a> <ul> <li> <a>Notebook</a></li> <li><a>2'si 1 arada</a></li> <li><a>Oyun Bilgisayarları</a></li> </ul> </li> </ul> </li> <li class="sub-menu-item"><a class="sub-menu-item-link"><span>Telefon</span><i class="icon hb-icon-indent_icon"></i><i class="icon hb-icon-down_arrow"></i></a></li> <li class="sub-menu-item"><a class="sub-menu-item-link"><span>Tv Görüntü & Ses Sistemleri</span><i class="icon hb-icon-indent_icon"></i><i class="icon hb-icon-down_arrow"></i></a></li> <li class="sub-menu-item"><a class="sub-menu-item-link"><span>Beyaz Eşya</span><i class="icon hb-icon-indent_icon"></i><i class="icon hb-icon-down_arrow"></i></a></li> <li class="sub-menu-item"><a class="sub-menu-item-link"><span>Elektrikli Ev Aletleri</span><i class="icon hb-icon-indent_icon"></i><i class="icon hb-icon-down_arrow"></i></a></li> </ul> </li> <li class="menu-item"><a class="menu-link link" href="javascript:;"><span>MODA TAKI</span><i class="icon hb-icon-down_arrow"></i></a> <ul class="sub-menu"> <li class="sub-menu-item"><a>Dizüstü Bilgisayar<i class="icon hb-icon-indent_icon"></i></a> <ul> <li> <a>Notebook</a></li> <li><a>2'si 1 arada</a></li> <li><a>Oyun Bilgisayarları</a></li> </ul> </li> <li class="sub-menu-item"><a>Tablet<i class="icon hb-icon-indent_icon"></i></a> <ul> <li> <a>Notebook</a></li> <li><a>2'si 1 arada</a></li> <li><a>Oyun Bilgisayarları</a></li> </ul> </li> </ul> </li> <li class="menu-item"><a class="menu-link"><span>EV, YAŞAM, KIRTASİYE, OFİS</span><i class="icon hb-icon-down_arrow"></i></a></li> <li class="menu-item"><a class="menu-link"><span>OTO, BAHÇE, YAPI MARKET</span><i class="icon hb-icon-down_arrow"></i></a></li> <li class="menu-item"><a class="menu-link"><span>ANNE, BEBEK OYUNCAK</span><i class="icon hb-icon-down_arrow"></i></a></li> <li class="menu-item"><a class="menu-link"><span>SPOR OUTDOOR</span><i class="icon hb-icon-down_arrow"></i></a></li> <li class="menu-item"><a class="menu-link"><span>KOZMETİK KİŞİSEL BAKIM</span><i class="icon hb-icon-down_arrow"></i></a></li> <li class="menu-item"><a class="menu-link"><span>SÜPERMARKET PETSHOP</span><i class="icon hb-icon-down_arrow"></i></a></li> <li class="menu-item"><a class="menu-link"><span>KİTAP, MÜZİK FİLM, HOBİ</span><i class="icon hb-icon-down_arrow"></i></a></li> </ul> </div> </div>