Reply To: is html 'import' possible?

Home Forums Older releases 0.9.x is html 'import' possible? Reply To: is html 'import' possible?

#2489
Laurent
Participant

I was looking to do the same thing. I want to use the SmartMenu on 100s of pages, but I wanted to maintain only one file with the menu bar as it changes from time to time.

You are right, this is a question of timing for loading the external file.
After fiddling around a little bit, here is the code that works. It basically wait for the content to be inserted/loaded before initiating the menu. Therefore it should work.

Replace the initial code to initiate the SmartMenus:


$(function() {
  $('#main-menu').smartmenus();
});

With this code which will load the file /YourMenuFile.html and then once completed, will initiate the smartmenus and only then.


<!-- SmartMenus jQuery init -->
<script type="text/javascript">
    $(function() { 
	    $("#includedContent").load("/YourMenuFile.html", function() {
		$('#main-menu').smartmenus();
		});
	});
</script>

In the Header of your pages, you can add the following DIV.


<!-- Beginning of the header page with the SmartMenus -->
<div data-role="header" id="includedContent"></div> 
<!-- end of the page header -->

And your file /YourMenuFile.html would look like that , just your list menu.


<ul id="main-menu" class="sm sm-blue">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a>
    <ul>
      <li><a href="#">Item 2-1</a></li>
      <li><a href="#">Item 2-2</a></li>
      <li><a href="#">Item 2-3</a></li>
    </ul>
  </li>
  <li><a href="#">Item 3</a></li>
</ul>

Enjoy!

Register

You will be emailed a link to set your password.

Login

Lost password?