style_settings.html

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

<div class="icontent" style="margin-bottom:10px;">
Set to any integer value.  The y offset will adjust the tab shape which appears between your standard menu items vertically from its default position.
</div>

<div class="ctitle" id=tabscss_apply_far_left>tabscss_apply_far_left <span class="rname">[Apply Left]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to true or false.  When true the tab shape will be added before the first main menu item.
</div>

<div class="ctitle" id=tabscss_apply_far_right>tabscss_apply_far_right <span class="rname">[Apply Right]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to true or false.  When true the tab shape will be added after the last main menu item.
</div>

<div class="ctitle" id=tabscss_apply_middles>tabscss_apply_middles <span class="rname">[Apply Between]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to true or false.  When true the tab shape will be added between each main menu item.
</div>

<div class="ctitle" id=tabscss_bg_color>tabscss_bg_color <span class="rname">[Background Color]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to any valid CSS color.  The background color appears inside of the shape, this color may also be set to transparent.
</div>

<div class="ctitle" id=tabscss_border_color>tabscss_border_color <span class="rname">[Border Color]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to any valid CSS color.  This is the color of the arch or angled line which comprises the tabbed corners.  Typically this color will match the color of your main menu item borders. 
</div>


</div>


<!--***********************************Rounded Subs-->

<div class="ctitle" style="color:#111111;margin-top:20px;">Add-On: Rounded Subs (CSS Imageless)</div>
<div class="icontent" style="">
Rounded subs use CSS and QuickMenu code to draw a duplicate container with rounded or angled edges.  This duplicate container sits inside the standard sub menu container to create a single rounded container effect.
<br>
<br>
Because rounded subs use a duplicate container, it's best to set the standard sub menu container colors to transparent and remove any borders.  When applying this add-on a dialog will appear asking if you would like to automatically apply any existing border and background colors from the standard containers to the rounded corner containers.  Choosing yes in this dialog will also automatically set your standard container colors transparent and remove the borders.
<br>
<br>
Like all QuickMenu add-ons and features, rounded corners are fully scalable and will automatically size to your content and conform to new menu items which may be dynamically generated by a server side database.
</div>
<div style="padding:10px;">

<div class="ctitle" id=rcorner_size>rcorner_size <span class="rname">[Size]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to any integer value greater than 0.  This sets the size of the rounded or angled corners.
</div>

<div class="ctitle" id=rcorner_border_color>rcorner_border_color <span class="rname">[Border Color]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to any valid CSS color.  This is the color of the edge or border which outlines the rounded corners.
</div>

<div class="ctitle" id=rcorner_bg_color>rcorner_bg_color <span class="rname">[Background Color]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to any valid CSS color.  The background color may also be set transparent.
</div>

<div class="ctitle" id=rcorner_opacity>rcorner_opacity <span class="rname">[Opacity]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to any decimal value between 0 and 1.  A value of .5 is equal to 50% opacity.  The opacity is applied to the rounded container only, menu items within the container will remain fully opaque.  This option works best when sub menu item background colors are set transparent.
</div>

<div class="ctitle" id=rcorner_angle_corners>rcorner_angle_corners <span class="rname">[Angled]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to true or false.  When true the corners will angle at 45 degrees.  When false the corners will have a rounded effect.
</div>

<div class="ctitle" id=rcorner_apply_corners>rcorner_apply_corners <span class="rname">[Apply Where]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Defines which corners receive the rounding effect, corners without the rounding will be squared.  Use true and false values 
separated by commas... {  true, true, true, true  }  The values start at the top-left...  top-left, top-right, bottom-right, bottom-left.
</div>

<div class="ctitle" id=rcorner_top_line_auto_inset>rcorner_top_line_auto_inset <span class="rname">[Top Inset]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to true or false.  When true the top border of the rounded container will be inset the same distance as the main menu item to which it belongs.  This effect works with sub menus that are wider then their parent main items.
<br>
<br>
This feature is best used for blending the rounded container with the main menu items,  the adobe template uses this feature for a 
seamless integration between the items and sub containers.
</div>

</div>


<!--***********************************Rounded Items-->

<div class="ctitle" style="color:#111111;margin-top:20px;">Add-On: Rounded Items (CSS Imageless)</div>
<div class="icontent" style="">
Rounded items may be applied in various assortments to both main menu and sub menu items.  Each rounded item is a duplicate item box with text that sits on-top of the standard items.  
<br>
<br>
Because rounded items are duplicates, any existing item border and background colors should be made transparent or they will be visible at the rounded items corners and edges.  Rounded item boxes are absolute positioned containers and as such they do not expand the natural size of the menu items and containers.  To size, match, and line things up you may have to 
tweak the standard item CSS style settings.  Typically this involves adding 
additional padding in the standard CSS to create extra space to help accommodate the rounded items which they will contain.
<br>
<br>
Text descriptions for the items are automatically applied to the standard item and rounded items which sit on top.  Some very advanced layouts may be created by combining rounded items with the rounded subs add-on.  A good understanding of padding and the standard CSS styling options is 
recommended before attempting to apply this advanced add-on to an existing menu.  It may be easier to work from a rounded item template such as the adobe implementation.
</div>
<div style="padding:10px;">

<div class="ctitle" id=ritem_size>ritem_size <span class="rname">[Size]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to any integer value greater than 0.  This sets the size of the rounded or angled corners.
</div>

<div class="ctitle" id=ritem_apply>ritem_apply <span class="rname">[Apply]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to main, sub, main-sub, parents, titles, dividers.  You can apply the rounding to multiple item areas by combining these values and 
separating them with a dash '-'...  { main-titles }  This would apply rounded items to all main menu items and title elements within the menu.
</div>

<div class="ctitle" id=ritem_angle_corners>ritem_angle_corners <span class="rname">[Angled]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to true or false.  When true the corners will angle at 45 degrees.  When false the corners will have a rounded effect.
</div>

<div class="ctitle" id=ritem_main_apply_corners>ritem_main_apply_corners <span class="rname">[Main Apply Where]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Defines which corners receive the rounding effect, corners without the rounding will be squared.  Use true and false values 
separated by commas... {  true, true, true, true  }  The values start at the top-left...  top-left, top-right, bottom-right, bottom-left.
</div>

<div class="ctitle" id=ritem_sub_apply_corners>ritem_sub_apply_corners <span class="rname">[Sub Apply Where]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Defines which corners receive the rounding effect, corners without the rounding will be squared.  Use true and false values 
separated by commas... {  true, true, true, true  }  The values start at the top-left...  top-left, top-right, bottom-right, bottom-left.
</div>

<div class="ctitle" id=ritem_show_on_actives>ritem_show_on_actives <span class="rname">[Actives Only]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to true or false.  When true the rounded item effect will only appear while its child sub menu is visible.  If the item is not a parent and does not have a child sub menu then the rounding effect will no become visible.
</div>

</div>


<!--***********************************Drop Shadows-->

<div class="ctitle" style="color:#111111;margin-top:20px;">Add-On: Drop Shadows (CSS Imageless)</div>
<div class="icontent" style="">
Drop shadows are duplicate containers which sit under the existing sub menu container and are offset to create a shadow effect at any edge.
<br>
<br>
The shadow container is automatically sized to the same dimensions of the standard container.  If your standard container is 
transparent then the entire shadow container will be visible.  This effect works best when the sub menu container has a background color set.
<br>
<br>
This add-on can also be used to create semi-opaque sub menus.  To do this set the offset to 0, specify a color, and set the opacity to any desired level.  The standard menu container and item background color CSS styles should also be set transparent, this will make the semi-opaque drop shadow box the visible container.
</div>
<div style="padding:10px;">

<div class="ctitle" id=shadow_offset>shadow_offset <span class="rname">[Offset]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to any integer value.  Use negative values to create a shadow on the top and left or positive values for a shadow at the bottom and right.
</div>

<div class="ctitle" id=shadow_color>shadow_color <span class="rname">[Color]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to any valid CSS color.  This determines the color of the shadow.
</div>

<div class="ctitle" id=shadow_opacity>shadow_opacity <span class="rname">[Opacity]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to any decimal value between 0 and 1.  A value of .5 is equal to 50% opacity.  The opacity is applied to the drop shadow container only, menu items within the container will remain fully opaque.
</div>

</div>


<!--***********************************Drop Shadows-->

<div class="ctitle" style="color:#111111;margin-top:20px;">Add-On: Match Widths (CSS Imageless)</div>
<div class="icontent" style="">
Match widths are applied to all 1st level sub menus, these are sub menus which belong to a main menu item.  This add-on will automatically size the sub menus to match the width of the main item to which they belong.
<br>
<br>
This add-on is designed to work best with horizontally oriented main menus.
<div style="padding:10px;">

<div class="ctitle" id=mwidths_active>mwidths_active <span class="rname">[Active]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to true or false.  When true the match widths add-on will be active and applied to your 1st level subs.
</div>

</div>


<!--***********************************Item Bullets-->

<div class="ctitle" style="color:#111111;margin-top:20px;">Add-On: Item Bullets (Image Based)</div>
<div class="icontent" style="">
Image based item bullets use custom defined images to create static, however, and active images.  Typically these bullets are applied to the parent items within a menu to indicate that a sub menu with additional links is available for a given menu item.
</div>
<div style="padding:10px;">

<div class="ctitle" id=ibullets_apply_to>ibullets_apply_to <span class="rname">[Apply To]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to parents, non-parents, 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=ibullets_main_image>ibullets_main_image <span class="rname">[Main Static Image]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Specify the location and file name of the image to display.  Use relative or fully qualified (http://) paths.  The static image is the default visible image.
</div>

<div class="ctitle" id=ibullets_main_image_hover>ibullets_main_image_hover <span class="rname">[Main Hover Image]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Specify the location and file name of the image to display.  Use relative or fully qualified (http://) paths.  The hover image is visible while the mouse is over the menu item to which it belongs.
</div>