Jumbo Navstyle

 

 

Jumbo Navstyle is like CSS except simpler.

In Navstyle, you have 3 different classes; each representing an element of a Navbar - All you have to do is specify the properties of each of these elements in a CSS-like manner.

 

To begin with Navstyle, just copy the following Navstyle definition and place it directly inside a m_navslice DIV in your template's HTML file:

 

<!navstyle

        Nav {
            text-color:#333333;
            alignment:left;
            style:horizontal;
        }
        
        MainButton {
            image-default:assets/main_up.png;
            image-over:assets/main_over.png;
            image-down:assets/main_down.png;
            image-current:assets/main_current.png;
            width:auto;
            side-padding:20;
            height:25;
        }
        
        DropDownButton {
            image-default:assets/dropdown_up.png;
            image-over:assets/dropdown_over.png;
            image-down:assets/dropdown_down.png;
            image-current:assets/dropdown_current.png;
            width:150;
            height:25;
        }

!>

Don't forget to include the <!navstyle and !> tags in your definition.

Your DIV's HTML should look something like this:

 

<div id="topnav" class="m_navslice">

# Navstyle definition goes here

</div>

 

Once you've done this, you can add, remove and modify properties for each class to suit your design goals.

Here are tables of allowable properties and values for each class:

 

 

Nav

Property	Allowable Values	Purpose
text-color	HTML hex color code preceded by the # character	The default color of all text within your navbar
alignment	[left, right, center]	The alignment of buttons within the navbar - If the navbar is vertical, the alignment will affect where the drop-down menus will appear. For example, if the alignment property is set to right; the drop-down menu will popup on the left of the main buttons.
style	[horizontal, vertical]	Whether this navbar will stack its buttons horizontally or vertically.

 

 

MainButton

 

Property	Allowable Values	Purpose
image-default	The path of an image file (relative to your HTML file's directory). This property can also be set to none	[Optional] This image will serve as the default state of the main buttons within your navbar.
image-over	The path of an image file (relative to your HTML file's directory). This property can also be set to none	[Optional] This image will serve as the mouse-over state of the main buttons within your navbar.
image-down	The path of an image file (relative to your HTML file's directory). This property can also be set to none	[Optional] This image will serve as the mouse-down state of the main buttons within your navbar.
image-current	The path of an image file (relative to your HTML file's directory). This property can also be set to none	[Optional] This image will serve as the current-page state of the main buttons within your navbar. A button will be in it's 'current' state if the page that it links to is the same as the one that the user is currently viewing.
width	Either auto or an interger representing a width in pixels	This is the width of main buttons within the navbar - If this property is set to auto, the buttons will be utomatically sized to fit their inner text - If this is the case, make sure that your images are wide enough or can tile horizontally.
side-padding	An integer representing a width in pixels	[Optional] This property is only useful if you've set the width property to auto - This specifies the amount of padding that should be on each side of text within a button.
height	An integer representing a width in pixels	This is the height of main buttons within the navbar.

 

 

DropDownButton

 

Property	Allowable Values	Purpose
image-default	The path of an image file (relative to your HTML file's directory). This property can also be set to none	[Optional] This image will serve as the default state of the drop-down buttons within your navbar.
image-over	The path of an image file (relative to your HTML file's directory). This property can also be set to none	[Optional] This image will serve as the mouse-over state of the drop-down buttons within your navbar.
image-down	The path of an image file (relative to your HTML file's directory). This property can also be set to none	[Optional] This image will serve as the mouse-down state of the drop-down buttons within your navbar.
image-current	The path of an image file (relative to your HTML file's directory). This property can also be set to none	[Optional] This image will serve as the current-page state of the drop-down buttons within your navbar. A button will be in it's 'current' state if the page that it links to is the same as the one that the user is currently viewing.
width	An interger representing a width in pixels	This is the width of drop-down buttons within the navbar. Note that unlike main buttons, this cannot be auto.
height	An integer representing a width in pixels	This is the height of drop-down buttons within the navbar.

 

Note that you can reuse the same image for multiple states.

 

The above Navstyle classes have equivalent (although more complex) representations in CSS. For this reason, you can extend your Navstyle definition with plain CSS - Just add the necessary style definitions in your template's CSS file. This could be useful if you need to specify gaps between buttons, or if you just need more a complex style for your navbar.

 

You can refer to navbar elements in CSS as follows:

 

Navstyle Class	CSS Equivalent
Nav	Refer to it in CSS using your special Jumbo DIV's id.   E.g. #topnav { ... }
MainButton	m_mainbutton class. If you have multiple navbars in your template,  you should prepend the class name with the relevant CSS DIV id.   E.g. #topnav .m_mainbutton { ... }
DropDownButton	m_dropdownbutton class. If you have multiple navbars in your template, you should prepend the class name with the relevant CSS DIV id.   E.g. #topnav .m_dropdownbutton { ... }

 

Once you're finished your template, you can upload it to Jumbo during setup or via the control panel > template manager.

The control panel can be accessed from Livemode - The link to the control panel is located directly above the Jumbo Live Panel.

Jumbo will notify you if it finds a mistake in your Navstyle definition so that you can try again.