Modifying the Cobalt Javascript drop-down menu
The Javascript Dropdown Menu is contained in the jr_drowdown_menu.tpl file found in the skins/Flashback directory (or the jr_index_js.tpl file found in the skins/Cobalt directory if you are using the original Cobalt skin). You can add to or change any menu by adding/modifying any entry. Each entry looks similar to this:
menu1[1]='<a href="index.php?t=jr_genres&m=audio"> » weekly charts by audio genre</a>'
In this entry, menu1 refers to the menu number (all menus will begin with "menu"), [1] refers to the numerical order of the entry, and section of the entry in single quotes ( ' ) is what will appear on the dropdown menu.
Adding a Javascript Dropdown Menu
Javascript menus can easily be added to the navigation bar of your jamroom. For each new menu, you will need to add the following code:
//Contents for menu #
var menu# = new Array()
Where you replace the # with the next menu number. After that, add entries below the new menu you created with the appropriate menu#. You're new menu should look similar to this:
//Contents for menu #
var menu # = new Array()
menu #[1]='<a href="index.php?t=jr_genres&m=audio"> » weekly charts by audio genre</a>'
Where each of the menu# are the same. You can add as many entries to the menu as you need.
If you need to use any smarty syntax in your menu, such as {$BAND_ID} or any other smarty variables, you need to escape from the javascript first by using the {literal}[/literal} tags. For instance, you might have an entry like this:
menu3[1]='<a href="{/literal}{$ARTIST_URL}{literal}"> » link to your page</a>'
Note: When using smarty syntax inside the javascript menus, your first literal tag will be the closing literal tag ({/literal}), and your second tag will be the opening literal tag ({literal}). This is because their is already a {literal} tag at the beginning of the template, so you must "close" it to use the smarty syntax and then "re-open" it again to continue using javascript.
How do I change the colors and formatting of the Javascript Dropdown Menu?
The colors and formatting of the Javascript Dropdown Menu are found in two files: Flashback.css and jr_dropdown_menu.tpl (or Cobalt.css and jr_index_js.tpl for the original Cobalt skin). In the Flashback.css file, you will want to modify the following section to change the dropdown menu:
/* --- DROP DOWN MENU ----------- */
#dropmenudiv {
position: absolute;
border: 2px solid black;
border-bottom-width: 0;
font-size: 10px;
line-height: 16px;
z-index: 100;
}
#dropmenudiv a {
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 2px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}
#dropmenudiv a:hover {
background-color: #002946;
}
The bold lines are the lines that typically get changed. Currently, the color of the text for the dropdown menu is controlled by the a css entry found in the Flashback.css (Cobalt.css) file. If you would like the dropdown menu text to have a different color than the rest of the links on your site, then you can add color entries to #dropmenudiv a and/or #dropmenudiv a:hover.
The background color for the dropdown menu is found in the jr_dropdown_menu.tpl (jr_index_js.tpl) file. The following lines also contain formatting for the dropdown menu:
var menuwidth='200px' //default menu width
var menubgcolor='#001926' //menu bgcolor
var disappeardelay=100 //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="no" //hide menu when user clicks within menu?
The bold line above is the line that typically gets changed.
How do I add a Javascript Dropdown Menu I have created?
First, you must create a new menu button. If you do not know how to create a new button for the navigation bar, see this guide: http://www.jamroom.net/Jamroom3_Navigation_Bar_Buttons.
The code that you add for your new button should be modeled after the following code:
{if $selected == ' page_variable'}
<li><a href=" URL TO PAGE" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this,event,menu #,'220px')" onMouseout="delayhidemenu()" class="current"> BUTTON TEXT</a></li>
{else}
<li><a href=" URL TO PAGE" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this,event,menu #,'220px')" onMouseout="delayhidemenu()"> BUTTON TEXT</a></li>
{/if}
Each navigation bar button with a dropdown menu should reference the correct menu# that should appear for that button.
You can add as many dropdown menus as you like.
|
