Making a reusable menu [SOLVED]
Hello all
I'm new to Jquery, and was trying to do something I thought would be simple. I have a simple menu on the site I'm working on:
-
<div id="link">
<dl>
<dt>heading 1</dt>
<dd>
<ul>
<li><a>Link1</a></li>
<li><a>Link2</a></li>
<li><a>Link3</a></li>
</ul>
</dd>
<dt>heading 2</dt>
<dd>
<ul>
<li><a>Link1</a></li>
<li><a>Link2</a></li>
<li><a>Link3</a></li>
</ul>
</dd>
<dt>heading 3</dt>
<dd>
<ul>
<li><a>Link1</a></li>
<li><a>Link2</a></li>
<li><a>Link3</a></li>
</ul>
</dd>
</dl>
</div>
I had put some simple effects on it; hiding the <dd>'s and revealing them when the headings in the <dt>'s were clicked. I wanted to put the whole menu into a separate file or function that could be shared, but I never got even that far because I couldn't get Jquery to insert the code nicely.
I tried using (#link).append("..."); and this worked as long as I had all of the html in one line.
-
(#link).append("<div id="link"><dl><dt>heading 1</dt><dd><ul><li><a>Link1</a></li><li><a>Link2</a></li><li><a>Link3</a></li></ul></dd>....");
... which is a mess to read. But if I tried to tab it or spaced it on different lines, Nothing would show up.
(#link).load("menu.html"); worked in terms of bringing in the html but my animation code wasn't applied to it. (a timing issue?)
Anyway, I'm presuming that I'm overlooking something simple, as it seems like Jquery has the tools to do what I'm trying to do, but they're not working the way I'd expect them to. Any thoughts would be apprecated.