Creating a Persistent Membership Menu

Article Details

URL:	http://support.nanacast.com/index.php?_m=knowledgebase&_a=viewarticle&kbarticleid=231
Article ID:	231
Created On:	22 Nov 2011 04:15 PM

Answer

Creating a Persistent Membership Menu  (difficulty : Intermediate)

Simply put, a persistent menu is a menu where the CSS and HTML code only have to be edited in one spot to achieve global changes.

This is handy when you are constructing a large membership with many episodes, and need a menu system that you can modify without having to tediously make the changes in each episode.

Below are the steps required:

1. Add: var theElement = document.getElementById('ElementForMenuToBeInsertedInto'); into your "advanced membership customization" box in Nanacast. Replace "ElementForMenuToBeInsertedInto" with the ID of the element where the menu will be. (i,e header). MAKE SURE ALL SCRIPT IS WRITTEN WITHIN <script></script> TAGS.
   
2. Add: var myMenu = "<div id='myMenu'>" + "<a href='http://www.google.com'>" +"Item1" + "</a>" + "<a href='http://www.google.com'>" +"Item2" + "</a>" +  "<a href='http://www.google.com'>" +"Item3" + "</a>" + "<a href='http://www.google.com'>" +"Item4" + "</a>" + "</div>";  into the same location as above. To Change and Add menu items, copy and paste additional lines of: +  "<a href='http://www.google.com'>" +"Item3" + "</a>" + Make sure each separate tag is contained within double quotes as well as a plus symbol. Change the hyperlink reference "href" to whichever URL you are going to use per menu item.
3. In EACH MEMBERSHIP, add this line: theElement.innerHTML = myMenu;  between script tags. This will fundamentally inject the HTML in contained within the myMenu variable into the designated element. 

 Now you can access your menu from within the "advanced membership customization".  Just add <style> </style> tags and access your new menu by its id. (#myMenu{} in this example)
Access the menu items separately by writing: #myMenu li{}

Your final code should look like this:

<script>
var theBod = document.getElementById('header');
var myMenu = "<div id='myMenu'>" + "<a href='http://www.google.com'>" +"Item1" + "</a>" + "<a href='http://www.google.com'>" +"Item2" + "</a>" +  "<a href='http://www.google.com'>" +"Item3" + "</a>" + "<a href='http://www.google.com'>" +"Item4" + "</a>" + "</div>";
</script>
<style>
#myMenu{
    width:300px;
    }
#myMenu a{
    background:red;
    float:left;
    padding:10px;
    list-style:none;
    text-decoration:none;
}
</style>

and in each episode:
<script>
theBod.innerHTML = myMenu;
</script>