Свернутое меню, высота вопроса

Question

В настоящее время я настраиваю меню, включающее подменю, построенное на категориях Wordpress. В принципе, я извлекаю все категории верхнего уровня, а затем создаю подменю для каждого, со всеми сообщениями из этой родительской категории.

Так структура выглядит следующим образом:

<ul class="menuCat"> 
    <li> <a href="#" title="lifestyle">lifestyle</a> 
     <ul class="show-hide"> 
     <li><a href="http://localhost/wordpress/article-7/">Article #7</a></li> 
     <li><a href="http://localhost/wordpress/article-5/">Article #5</a></li> 
     <li><a href="http://localhost/wordpress/hello-world/">Article #3</a></li> 
     </ul> 
    </li> 
    <li> <a href="#" title="musique">musique</a> 
     <ul class="show-hide"> 
     <li><a href="http://localhost/wordpress/article-8/">Article #8</a></li> 
     <li><a href="http://localhost/wordpress/article-7/">Article #7</a></li> 
     <li><a href="http://localhost/wordpress/article-2/">Article #2</a></li> 
     <li><a href="http://localhost/wordpress/article-1/">Article #1</a></li> 
     <li><a href="http://localhost/wordpress/hello-world/">Article #3</a></li> 
     </ul> 
    </li> 
</ul> 
<div id="content">... 

В подменю устанавливаются display:none. Когда нажата категория, появляется подменю ul (с помощью jQuery toggle) в главном меню. Я запускаю его локально, поэтому я не могу дать вам живой пример, но способ его работы такой же, как когда вы нажимаете ссылку «категории» здесь: http://wpshower.com/demo/?theme=imbalance.

Моя проблема заключается в том, что с этой структурой и для чего я хочу визуально достичь (c.f previous url), я не вижу другого варианта, который помещает блок подменю в абсолютную позицию. Но если я это сделаю, мне нужно нажать остальную часть контента вниз, когда вызывается меню. То, что я пробовал до сих пор, заключается в том, чтобы установить margin-top в зависимости от высоты текущего просматриваемого подменю. К сожалению, ни высота, ни внешнийHeight не могли помочь мне ...

Любые идеи?

Спасибо!

Answer 1

Можете ли вы подробнее рассказать о том, почему вам необходимо установить абсолютное значение? Мне кажется, что вы можете достичь того, чего хотите, имея все подменю, статически расположенные под меню верхнего уровня, используя jQuery, чтобы одновременно показывать только один.

Если они статически расположены, подменю будет подталкивать содержимое под ним вниз, когда оно расширяется, и пока все только одно подменю всегда будут отображаться: none; вы даже не узнаете, что это там.

Для этого, однако, вам нужно будет изменить структуру вашего html. Элементы подменю должны находиться в div ниже списка меню верхнего уровня, а не внутри него.

<ul class="menuCat"> 
    <li> <a href="#" title="lifestyle">lifestyle</a> 
    </li> 
    <li> <a href="#" title="musique">musique</a> 
    </li> 
</ul> 
<div id="submenu-container"> 
     <ul class="show-hide lifestyle"> 
     <li><a href="http://localhost/wordpress/article-7/">Article #7</a></li> 
     <li><a href="http://localhost/wordpress/article-5/">Article #5</a></li> 
     <li><a href="http://localhost/wordpress/hello-world/">Article #3</a></li> 
     </ul> 
     <ul class="show-hide musique"> 
     <li><a href="http://localhost/wordpress/article-8/">Article #8</a></li> 
     <li><a href="http://localhost/wordpress/article-7/">Article #7</a></li> 
     <li><a href="http://localhost/wordpress/article-2/">Article #2</a></li> 
     <li><a href="http://localhost/wordpress/article-1/">Article #1</a></li> 
     <li><a href="http://localhost/wordpress/hello-world/">Article #3</a></li> 
     </ul> 
</div> 
<div id="content"></div> 

$(function() { 
    $('.menuCat > li').click(function (e) { 
     var target = $('.show-hide.' + e.target.title); 
     $('.show-hide').not(target).hide(); 
     target.toggle(); 
    }); 
}); 



ul.menuCat li { 
    display:inline-block; 
    vertical-align: top; 
} 
ul.show-hide { 
    display: none; 
    background-color:lightgrey; 
} 
#content { 
    height: 200px; 
    width: 100%; 
    background-color: red; 
} 

Для примера посмотреть демо: http://jsfiddle.net/ijoukov/PCgxR/

Answer 2

Некоторых новости, я думаю, что я не могу изменить структуру HTML, так как подменит построены в то же время, что и родительский элемент списка, в пределах 'start_el' функция wordpress. Эта функция вызывается для каждой категории ссылок в меню.