Выпадающее меню на нескольких страницах с помощью jquery

Question

У меня было выпадающее меню, которое мне нужно использовать на нескольких страницах, есть ли способ закодировать выпадающее меню на другой странице и использовать его на нескольких страницах. (Что-то вроде, когда я нажимаю на изображении выпадающего меню должно появиться, у меня был то же изображение на нескольких страницах, когда я нажимаю это изображение выпадающего меню должно отображаться)

Fiddle: http://jsfiddle.net/exuY9/1/

<ul id="container"> 

    <li class="draggable"> 
     <div class="header"> 
      <h1>1</h1> 
      <div class="button"></div> 
      <div class="button dropmenu" id="menuwrap"> 
       <a href="#" class="dropdown"><img src="../images/Forward.JPG"></a> 
       <ul class="menucontainer" style="margin:0px" id="dr1"> 
        <li><a href="#">One</a></li> 
        <li><a href="#">Two</a></li> 
        <li><a href="#">Three</a></li> 
       </ul> 
      </div> 
      <div class="button"></div> 
     </div> 
    </li> 

    <li class="draggable"> 
     <div class="header"> 
      <h1>2</h1> 
      <div class="button minimize"></div> 
      <div class="button dropmenu" id="menuwrap2"> 
       <a href="#" class="dropdown"><img src="../images/Forward.JPG"></a> 
       <ul class="menucontainer" style="margin:0px" id="dr2"> 
        <li><a href="#">One</a></li> 
        <li><a href="#">Two</a></li> 
        <li><a href="#">Three</a></li> 
       </ul> 
      </div> 
      <div class="button maximize"></div> 
     </div> 
    </li> 

</ul> 

Answer 1

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

<ul class="menucontainer" style="display:none;"> 
    <li><a href="#">One</a></li> 
    <li><a href="#">Two</a></li> 
    <li><a href="#">Three</a></li> 
</ul> 

Затем с JQuery вы добавляете клон этого элемента к каждому элементу dropmenu ...

$(".dropmenu").append($(".menucontainer").clone()); 

Я отредактировал скрипку, чтобы показать, как это работает: http://jsfiddle.net/promatik/bHJvs/
Я удалил все неиспользованные вещи, чтобы показать, что вы просили ...

---

Там еще один способ сделать это, если вы не хотите, чтобы этот блок кода HTML был скрыт в нижней части страницы, вы можете просто добавить элемент с помощью jQuery:

$(".dropmenu").append($('<ul class="menucontainer"><li><a href="#">One</a></li><li><a href="#">Two</a></li><li><a href="#">Three</a></li></ul>'));`