Блог

У меня есть меню навигации, и моя цель-создать меню, как из Trendyol.com

Здесь html-код

 lt;div class="sub-nav-outer"gt; lt;div class="normal-column"gt;  lt;div class="category-box"gt;  lt;a href="/demo/ru/category/13/" class="sub-category-header"gt;Giyimlt;/agt;  lt;ul class="sub-item-list"gt;  lt;ligt;lt;a href="/demo/ru/category/20/"gt;Elbiselt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/21/"gt;Tişörtlt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/22/"gt;Gömleklt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/23/"gt;Kot Pantolonlt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/24/"gt;Kot Ceketlt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/25/"gt;Pantolonlt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/26/"gt;Montlt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/27/"gt;Bluzlt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/28/"gt;Ceketlt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/29/"gt;Eteklt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/30/"gt;Kazaklt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/31/"gt;Tesettürlt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/32/"gt;Büyük Bedenlt;/agt;lt;/ligt;  lt;/ulgt;  lt;/divgt; lt;/divgt; lt;div class="normal-column"gt;  lt;div class="category-box"gt;  lt;a href="/demo/ru/category/14/" class="sub-category-header"gt;Ayakkabılt;/agt;  lt;ul class="sub-item-list"gt;  lt;ligt;lt;a href="/demo/ru/category/33/"gt;Topuklu Ayakkabılt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/34/"gt;Sneakerlt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/35/"gt;Günlük Ayakkabılt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/36/"gt;Babetlt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/37/"gt;Sandaletlt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/38/"gt;Terliklt;/agt;lt;/ligt;  lt;/ulgt;  lt;/divgt; lt;/divgt; lt;div class="normal-column"gt;  lt;div class="category-box"gt;  lt;a href="/demo/ru/category/15/" class="sub-category-header"gt;Aksesuar amp;amp; Çantalt;/agt;  lt;ul class="sub-item-list"gt;  lt;ligt;lt;a href="/demo/ru/category/39/"gt;Çantalt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/40/"gt;Saatlt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/41/"gt;Takılt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/42/"gt;Şapkalt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/43/"gt;Cüzdanlt;/agt;lt;/ligt;  lt;/ulgt;  lt;/divgt; lt;/divgt; lt;div class="normal-column"gt;  lt;div class="category-box"gt;  lt;a href="/demo/ru/category/16/" class="sub-category-header"gt;İç Giyimlt;/agt;  lt;ul class="sub-item-list"gt;  lt;ligt;lt;a href="/demo/ru/category/44/"gt;Pijama Takımılt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/45/"gt;Geceliklt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/46/"gt;Sütyenlt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/47/"gt;İç Çamaşırı Takımlarılt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/48/"gt;Fantezi Giyimlt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/49/"gt;Çoraplt;/agt;lt;/ligt;  lt;/ulgt;  lt;/divgt; lt;/divgt; lt;div class="normal-column"gt;  lt;div class="category-box"gt;  lt;a href="/demo/ru/category/17/" class="sub-category-header"gt;Lüks amp;amp; Designerlt;/agt;  lt;ul class="sub-item-list"gt;  lt;ligt;lt;a href="/demo/ru/category/50/"gt;Lüks Çantalt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/51/"gt;Lüks Giyimlt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/52/"gt;Lüks Ayakkabılt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/53/"gt;Tasarım Giyimlt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/54/"gt;Tasarım Ayakkabılt;/agt;lt;/ligt;  lt;/ulgt;  lt;/divgt; lt;/divgt; lt;div class="normal-column"gt;  lt;div class="category-box"gt;  lt;a href="/demo/ru/category/18/" class="sub-category-header"gt;Kozmetiklt;/agt;  lt;ul class="sub-item-list"gt;  lt;ligt;lt;a href="/demo/ru/category/55/"gt;Parfümlt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/56/"gt;Göz Makyajılt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/57/"gt;Cilt Bakımlt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/58/"gt;Saç Bakımılt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/59/"gt;Makyajlt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/60/"gt;Ağız Bakımlt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/61/"gt;Cinsel Sağlıklt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/62/"gt;Vücut Bakımlt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/63/"gt;Hijyenik Pedlt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/64/"gt;Duş Jeli amp;amp; Kremlerilt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/65/"gt;Epilasyon Ürünlerilt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/66/"gt;Rujlt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/67/"gt;Güneş Kremilt;/agt;lt;/ligt;  lt;/ulgt;  lt;/divgt; lt;/divgt; lt;div class="normal-column"gt;  lt;div class="category-box"gt;  lt;a href="/demo/ru/category/19/" class="sub-category-header"gt;Spor amp;amp; Outdoorlt;/agt;  lt;ul class="sub-item-list"gt;  lt;ligt;lt;a href="/demo/ru/category/68/"gt;Sweatshirtlt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/69/"gt;Tişörtlt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/70/"gt;Spor Sütyenilt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/71/"gt;Taytlt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/72/"gt;Eşofmanlt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/73/"gt;Koşu Ayakkabısılt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/74/"gt;Spor Çantasılt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/75/"gt;Spor Ekipmanlarılt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/76/"gt;Outdoor Ayakkabılt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/77/"gt;Kar Botult;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/78/"gt;Outdoor Ekipmanlarılt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/79/"gt;Sporcu Besinlerilt;/agt;lt;/ligt;  lt;ligt;lt;a href="/demo/ru/category/80/"gt;Sporcu Aksesuarlarılt;/agt;lt;/ligt;  lt;/ulgt;  lt;/divgt; lt;/divgt;  

Я уже пытался читать элементы по высоте, и если элемент не превышал высоту 233 пикселей, то я пытался перенести его в другой или предыдущий родительский элемент в Jquery, но безрезультатно.

 $(".sub-nav-outer").each(function () {  var T = $(this).find(".category-box");  var R = T.height();   if(Rlt;233) {  T.detach().appendTo($('lt;divgt;', {class: 'normal-column',}).appendTo('.sub-nav-outer'));  } })  

Может быть, я неправильно извлекаю данные из самой базы данных в php? У меня больше нет вариантов, как еще это сделать. Надеюсь на вашу помощь, спасибо.