Jamroom Logo Jamroom 5 Core
is now Open Source!
Follow Jamroom on Twitter!

Updating the Jamroom Cobalt Skin with new Link Buttons Index Integrating the Jamroom Flash Player

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&amp;m=audio">&nbsp;&nbsp;&raquo; 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&amp;m=audio">&nbsp;&nbsp;&raquo; 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}">&nbsp;&nbsp;&raquo; 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/Jamroom4_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.


Updating the Jamroom Cobalt Skin with new Link Buttons page 89 of 171 Integrating the Jamroom Flash Player
Solutions Products Support Community Company
Social Media Platform
Social Networking Software
Musician Website Manager
Community Builder
Jamroom 5
Jamroom 5 Modules
Jamroom Marketplace
Support Forum
Documentation
Support Center
Contact Support
Community Forum
Member Sites
Developers
About Us
Contact Us
Privacy Policy
©2003 - 2024 The Jamroom Network