CSS - вставить Div в середине неупорядоченного списка У меня есть меню, которое в действительности неупорядоченный список

Question

:

 <ul class="nav navbar-nav"> 
      <li><a href="#">O nás</a></li> 
      <li><a href="#"> Místo</a></li> 
      <li><a href="#">Program</a></li> 
      <li><a href="#">Svatební dary</a></li> 
      <li><a href="#">Fotogalerie</a></li> 
      <li><a href="#">formulá</a></li> 
      <li><a href="#">na Potvrzení účasti</a></li> 
     </ul> 

Я не знаю, количество элементов в меню заранее, генерируется меню dynammicaly. Мне нужно отобразить div с логотипом в середине меню с тем же количеством элементов по бокам логотипа (или, если количество элементов в меню равно 5, дисплей 2 слева и 3 справа)

  <div> 
       <a href="#"> 
       <div class="logo">Filip a Denisa</div> 
       <div id="slogan">21. Srpna 2014</div> 
       </a> 
      </div> 

ли этот сценарий можно сделать с помощью CSS3, или мне нужно использовать либо CSS + JS или PHP для создания меню сразу же по мере необходимости?

Answer 1

Это может быть сделано только после того, как страница загружается яваскрипта или Jquery мой друг, вот рабочий пример в Jquery, надеюсь, что помогает:

$(document).ready(function(){ 

var liCount = $(".nav.navbar-nav li").length, 
    DivCont = '<li>'+ 
       '<div>'+ 
        '<a href="#">'+ 
        '<div class="logo">Filip a Denisa</div>'+ 
        '<div id="slogan">21. Srpna 2014</div>'+ 
        '</a>'+ 
       '</div>'+ 
       '</li>'; 

if(liCount % 2==0){ 
    var halfCount = liCount/2; 
    $(".nav.navbar-nav li:eq("+ halfCount +")").before(DivCont); 
}else{ 
    var halfCount = Math.floor(liCount/2); 
    $(".nav.navbar-nav li:eq("+ halfCount +")").before(DivCont); 
} 

}); 

А вот Fiddle: http://jsfiddle.net/qe8dqapa/