18 Feb 2025
Support Center
»
Knowledgebase
»
Technical FAQs
»
Creating a Persistent Membership Menu
Creating a Persistent Membership Menu
Solution
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:
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.
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.
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>
Article Details
Article ID:
231
Created On:
22 Nov 2011 04:15 PM
This answer was helpful
This answer was not helpful
Back
Login
[Lost Password]
Email:
Password:
Remember Me:
Search
-- Entire Support Site --
Knowledgebase
Article Options
Print Article
PDF Version
Add to Favorites
Home
|
Register
|
Submit a Ticket
|
Knowledgebase
|
News
Language:
English (U.S.)
Help Desk Software By Kayako eSupport v3.60.04