style_settings.html

Visual QuickMenu 6.5汉化版---JS导航栏特效生成器

You can add some snap to the animation effect with the accelerator setting.  Usually a value in the range of .1 to 2.0 works well.
</div>

<div class="ctitle" id=box_position>box_position <span class="rname">[Position]</span></div>
<div class="icontent" style="margin-bottom:10px;">
valid values are center, top, left, top-left.  The position determines the starting point from where the box will grow and shrink back to.
</div>

</div>


<!--***********************************fade subs-->

<div class="ctitle" style="color:#111111;margin-top:20px;">Add-On: Fade Subs</div>
<div class="icontent" style="">
The fade subs animation applies to sub menus.  When displayed the sub menu will fade in and then fade out when hidden.
</div>
<div style="padding:10px;">

<div class="ctitle" id=fade_in_frames>fade_in_frames <span class="rname">[Fade In Frames]</span></div>
<div class="icontent" style="margin-bottom:10px;">
This is the total number of animation frames to use during the fade in animation.  A lower number results in a faster animation while larger numbers produce smoother, yet slower animations.
</div>

<div class="ctitle" id=fade_out_frames>fade_out_frames <span class="rname">[Fade Out Frames]</span></div>
<div class="icontent" style="margin-bottom:10px;">
This is the total number of animation frames to use during the fade out animation.  A lower number results in a faster animation while larger numbers produce smoother, yet slower animations.
</div>


</div>


<!--***********************************bump subs-->

<div class="ctitle" style="color:#111111;margin-top:20px;">Add-On: Bump Subs</div>
<div class="icontent" style="">
The bump subs animation applies to sub menus.  When displayed the sub menu will start at a 
slightly offset position and slide to its final and correct location.
</div>
<div style="padding:10px;">

<div class="ctitle" id=bump_animation_frames>bump_animation_frames <span class="rname">[Frames]</span></div>
<div class="icontent" style="margin-bottom:10px;">
This is the total number of animation frames to use.  A lower number results in a faster animation while larger numbers produce smoother, yet slower animations.
</div>

<div class="ctitle" id=bump_distance>bump_distance <span class="rname">[Distance]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Defined using any integer value greater than 0.  The distance determines how for the bump animation will travel.
</div>

<div class="ctitle" id=bump_main_direction>bump_main_direction <span class="rname">[Main Direction]</span></div>
<div class="icontent" style="margin-bottom:10px;">
valid values are up, down, left, right.  The default value is up.  This determines the direction that the bump animation will travel for the 1st level sub menus which belong to main parent items.
</div>

<div class="ctitle" id=bump_sub_direction>bump_sub_direction <span class="rname">[Sub Direction]</span></div>
<div class="icontent" style="margin-bottom:10px;">
valid values are up, down, left, right.  The default value is up.  This determines the direction that the bump animation will travel for 2nd level and greater sub menus.
</div>

<div class="ctitle" id=bump_auto_switch_main_left_right_directions>bump_auto_switch_main_left_right_directions <span class="rname">[Auto Switch Direction]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to true or false.  The default value is false.  When true 1st level sub menus will automatically bump left or right.  The direction is determined by which side of the item a previous sub menu was last visible.  This feature works best with horizontal main menus which have little or no show delay set on the sub menu visibility.
</div>

</div>


<!--***********************************slide subs-->

<div class="ctitle" style="color:#111111;margin-top:20px;">Add-On: Slide Subs</div>
<div class="icontent" style="">
This addon slides sub menus into position from customizable directions.  A unique animation feature is included for dropping subs off screen when hidding sub menus.
</div>
<div style="padding:10px;">

<div class="ctitle" id=slide_animation_frames>slide_animation_frames <span class="rname">[Frames]</span></div>
<div class="icontent" style="margin-bottom:10px;">
This is the total number of animation frames to use, however if combined with an 
accelerator the number may be lower than what you specify resulting in a quicker animation sequence.
<br>
<br>
The lower the number the faster your animation will be, the higher the number the slower your animation will run.
</div>

<div class="ctitle" id=slide_accelerator>slide_accelerator <span class="rname">[Accelerator]</span></div>
<div class="icontent" style="margin-bottom:10px;">
You can add some snap to the animation effect with the accelerator setting.  Usually a value in the range of .1 to 2.0 works well.
</div>

<div class="ctitle" id=slide_left_right>slide_left_right <span class="rname">[Main Right]</span></div>
<div class="icontent" style="margin-bottom:10px;">
By default 1st level subs slide in from the top, setting this value to true will force 1st level subs to slide from the left.  This works best with vertically oriented main menu items.
</div>

<div class="ctitle" id=slide_left_right>slide_left_right <span class="rname">[Sub Right]</span></div>
<div class="icontent" style="margin-bottom:10px;">
By default 2st level subs slide in from the top, setting this value to true will force 2nd level subs to slide from the left.  This works best with vertically oriented sub menu items.
</div>

<div class="ctitle" id=slide_offxy>slide_offxy <span class="rname">[Offset XY]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Define with an integer value.  The offset applies to the left position of the sub for left to right animations and to the top position for top to bottom animations.
<br>
<br>
The offset does not affect the final location of the sub menu, rather the location from which the slide appears.  The offset is 
useful for sub menus which appear on top of there parent containers.  By 
offsetting the slide the animation can be made to appear as if its sliding in from under the parent container even though its final resting spot is over the container.
</div>

<div class="ctitle" id=slide_drop_subs>slide_drop_subs <span class="rname">[Drop Subs]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to true or false.  When set to true, the sub menu hide animation will drop down and off the screen or to a set position instead of reverse sliding up or left.
</div>

<div class="ctitle" id=slide_drop_subs_height>slide_drop_subs_height <span class="rname">[Drop Height]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to any integer value greater than 0.  This setting requires the drop subs setting to be true.
<br>
<br>
The height determines how far the sub menu will drop before disappearing.
</div>

<div class="ctitle" id=slide_drop_subs_disappear>slide_drop_subs_disappear <span class="rname">[Drop Hide]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to true or false, the default value is false.  This setting requires the drop sub setting to be true and a drop height.
<br>
<br>
By default dropped subs gradually hide as if sliding behind another object.  Setting this option to true will cause the sub to disappear without the added effect when it reaches the set drop height.
</div>

</div>



<!--***********************************Merge subs-->

<div class="ctitle" style="color:#111111;margin-top:20px;">Add-On: Merge Subs</div>
<div class="icontent" style="">
This effect create a duplicate clone of the sub menu to be displayed, sets the new sub and the original to a custom opacity level, then merges the two into one by sliding them into each other.
</div>
<div style="padding:10px;">

<div class="ctitle" id=merge_frames>merge_frames <span class="rname">[Frames]</span></div>
<div class="icontent" style="margin-bottom:10px;">
This is the total number of animation frames to use.  A lower number results in a faster animation while larger numbers produce smoother, yet slower animations.
</div>

<div class="ctitle" id=merge_updown>merge_updown <span class="rname">[Main Up]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to true or false. The default value is false.  When true, the 1st level subs will merge from the top and bottom rather than from the left and right.
</div>

<div class="ctitle" id=merge_sub_subs_updown>merge_sub_subs_updown <span class="rname">[Subs Up]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to true or false. The default value is false.  When true, all 2nd level and higher subs will merge from the top and bottom rather than from the left and right.
</div>

<div class="ctitle" id=merge_opacity>merge_opacity <span class="rname">[Opacity]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to a decimal value between 0 and 1.  This sets the opacity of the merging sub menus.
</div>

</div>



<!--***********************************Hover Fill-->

<div class="ctitle" style="color:#111111;margin-top:20px;">Add-On: Hover Fill Items</div>
<div class="icontent" style="">
This effect creates an animated fill effect on hovered items.  The animation may be faded or grown from any direction.  The fill box is fully CSS customizable and can include background images, borders, and custom colors.
</div>
<div style="padding:10px;">

<div class="ctitle" id=hoverfill_apply_to>hoverfill_apply_to <span class="rname">[Apply To]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to parent, non-parent, all.  The default value is all.
<br>
<br>
Parents are items with child sub menus, use this setting to tell your users that certain items will display a sub menu with additional links.
</div>


<div class="ctitle" id=hoverfill_main_type>hoverfill_main_type <span class="rname">[Main Animation type]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to none, grow, fade. Grow will cause the fill box to expand from a custom direction and may combine a fade effect if specified.
</div>

<div class="ctitle" id=hoverfill_main_direction>hoverfill_main_direction <span class="rname">[Main Grow Direction]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to center, up, down, left, right. The direction is only valid when the animation type is set to grow.
</div>

<div class="ctitle" id=hoverfill_main_step_size>hoverfill_main_step_size <span class="rname">[Main Grow Step Size]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to an integer value greater than 0. The step size determines how many pixels to grow the fill between each animation frame.  The higher the value the faster the animation will run, values between 1 and 5 work well.
</div>

<div class="ctitle" id=hoverfill_main_fade_in>hoverfill_main_fade_in <span class="rname">[Main Grow Fade In]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to true or false. When true, grow animations will also fade from transparent to opaque as they fill the item area.
</div>

<div class="ctitle" id=hoverfill_main_fade_type_steps>hoverfill_main_fade_type_steps <span class="rname">[Main Fade In Steps]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to an integer value greater than 0. The setting works with the fade animation type and has no bearing on the 'grow fade in' option.  The setting determines the number of frames to use with a fade animation, the higher the value the slower the animation effect will be.
</div>

<div class="ctitle" id=hoverfill_main_offset_width>hoverfill_main_offset_width <span class="rname">[Main Offset Width]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to any positive or negative integer value. This will offset the width of the hoverfill area in pixels by the specified amount.  This is typically usefull for adjusting the width when using bordered edges, as a bordered edge will add extra size.  To offset this extra size of a border use a negative value.
</div>

<div class="ctitle" id=hoverfill_main_offset_height>hoverfill_main_offset_height <span class="rname">[Main Offset Height]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to any positive or negative integer value. This will offset the height of the hoverfill area in pixels by the specified amount.  This is typically usefull for adjusting the width when using bordered edges, as a bordered edge will add extra size.  To offset this extra size of a border use a negative value.