This is a sample module to showcase the functionality of the S5 Flex Menu system. This menu system contains up to 40 module positions and you can publish any module to any of these positions under any menu item.
The floating menu feature is a great way for your users to easily navigate your website! The floating menu will show at the top of your browser once the screen reaches a certain point. You can determine the exact point at which this occurs via the template specific area of Vertex. NOTE: This is a Vertex addition and is not guaranteed to work with all Vertex Templates. Some custom CSS may need to be adjusted per template. This feature is not supported by IE7/8.
Features at a glance:
Set a background image to the menu, gradient or solid color
Set to snap or smooth scroll in
Determine at which point as you scroll down your page that the menu drops in
and many more features, just check out the screenshot below
Parallax backgrounds as well as other background options are built directly into the Vertex Framework. Parallax causes the background image of an element to scroll at a different speed than your browser. For an example of this view the homepage of the Velocity template here and watch the background of the top_row1 area as you scroll down the page. This feature is found under "Backgrounds" tab in Vetex, where you can control the background for many areas of your website.
Features:
Set the scroll speed of the images
Set background repeat style
Set background image size, 100%, cover, contain, etc
Set custom backgrounds for all s5 rows in the framework.
Note - The tool tips script is by default disabled. If you wish to use it you must enable this script in the template's configuration area. This also includes site shaper installations.
This is a sample blockquote. Use <blockquote><p>Your content goes here!</p></blockquote> to create a blockquote.
<div class="s5_greenbox"> <div class="point"> Your text here </div> </div>
<div class="s5_redbox"> <div class="point"> Your text here </div> </div>
<div class="s5_bluebox"> <div class="point"> Your text here </div> </div>
<div class="s5_graybox"> <div class="point"> Your text here </div> </div>
This is a styled box. Use <div class="black_box">Your content goes here!</div>
This is a styled box. Use <div class="gray_box">Your content goes here!</div>
This is a styled box. Use <div class="red_box">Your content goes here!</div>
This is a styled box. Use <div class="blue_box">Your content goes here!</div>
This is a styled box. Use <div class="green_box">Your content goes here!</div>
This is a styled box. Use <div class="yellow_box">Your content goes here!</div>
This is a styled box. Use <div class="orange_box">Your content goes here!</div>
This is an image with the "boxed" class applied:
This is an image with the "boxed_black" class applied:
This is an image with the "padded" class applied:
This is an image with the "full_width" class applied. This can also be done automatically in the template configuration. Be sure to review our Vertex Guide here for other full width image options.
There is also a class readon_border_white that appears like the two classes above, but because of the white background here it would not be visilble. It used on the homepage inside of the S5 Image and Content Fader module.
There is also a class large_readon_border_white that appears like the two classes above, but because of the white background here it would not be visilble. It used on the homepage inside of the S5 Image and Content Fader module.
This is a customer quote box, you simply need to change out the text, image name, and the three hex colors in code shown below to ones of your choice:
We had the best vacation we have ever had
“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam molestie mi a nunc porta facilisis. Mauris varius volutpat interdum. In quis congue velit, sit amet.”
// Matt and Trish Green
<div class="s5_cust_quote">
<div class="s5_cust_quote_img_wrap">
<img style="border:solid 3px #2AB98E" src="images/customer_quote1.jpg" alt="" />
</div>
<div class="s5_custom_quote_text_wrap">
<div style="background:#2AB98E;border-bottom:solid 3px #3D8A73"
class="s5_custom_quote_text">
<h4>We had the best vacation we have ever had</h4>
<span>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam molestie
mi a nunc porta facilisis. Mauris varius volutpat interdum. In quis congue velit,
sit amet.”</span>
// Matt and Trish Green
</div>
</div>
<div style="clear:both"></div>
</div>
This is a sample code div. Use <div class="code">Your content goes here!</div> to create a code div.
To use the price table on your site grab the following example code below and add to your site. The price table is fully responsive and can display up to 7 price columns. Once you have determined the number of columns you will be using set the wrapper div to the number of columns that you've added. You can use the wrapping classes of "s5_pricetable_1" to "s5_pricetable_7".
Make any Youtube, Vimeo, etc video you embed to your site work with responsive by wrapping with a DIV with a class of "s5_video_container". The below Youtube Video will shrink when the area its contained in gets too small for it:
All content and images shown are for demo purposes only
This site is intended to exemplify a live website and does not make any claim of any kind to the validity of non-Shape5 content, images or posts published.
Drop Down Menu 
Menu Module Example
Grouped Child Menu
S5 Vertex Framework 
Template Specific Features 
Vertex Template Features
J! Stuff
Joomla and Vertex Tutorials 
Continued Vertex Features
