Figure Navigation

[TS-VCSC-Spacer height=”20″]

Features

[TS-VCSC-Divider divider_border_thick=”2″][TS_VCSC_Fancy_List list_type=”image” marker_image=”http://tekanewascripts.com/composium/wp-content/plugins/ts-visual-composer-extend/images/bullets/bullet_arrow_blue.png”]

  • Auto Numeration with standard numbers, roman numbers or letters
  • Use Font Icons instead of auto numerator; auto-numbering will continue to numerate in right order but skip items with custom icon
  • Define custom colors for handle, button and text
  • Select between hexagon, square or circle shape for handle
  • Apply custom background to navigation element (color, pattern or image)
  • Open any section automatically on page load
  • Opening can be triggered via hover or click event
  • Can also be used to show steps or processes
  • Add CSS3 or standard tooltip to navigation element
  • Fully responsive; option to define minimum width for navigation sections

[/TS_VCSC_Fancy_List]

[TS-VCSC-Spacer height=”20″]

Letters (Hover) + Tooltip

[TS-VCSC-Divider divider_border_thick=”2″][TS_VCSC_Figure_Navigation_Container numbering=”letter”][TS_VCSC_Figure_Navigation_Item figure_image=”16129″ figure_active=”true” handle_border_color=”#dd9933″ figure_title=”Tiger” figure_note=”Panthera Tigris” button_text=”Read More” button_color=”#dd9933″ tooltip_content=”Panthera Tigris” button_link=”url:http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FTiger||target:%20_blank”]

The tiger (Panthera tigris) is the largest cat species, reaching a total body length of up to 3.38 m (11.1 ft) over curves and weighing up to 388.7 kg (857 lb) in the wild. Its most recognisable feature is a pattern of dark vertical stripes on reddish-orange fur with a lighter underside.

[/TS_VCSC_Figure_Navigation_Item][TS_VCSC_Figure_Navigation_Item figure_image=”16119″ handle_border_color=”#dd9933″ figure_title=”Lion” figure_note=”Panthera Leo” button_text=”Read More” button_color=”#dd9933″ tooltip_content=”Panthera Leo” button_link=”url:http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FLion||target:%20_blank”]

The lion (Panthera leo) is one of the five big cats in the genus Panthera and a member of the family Felidae. With some males exceeding 250 kg (550 lb) in weight, it is the second-largest living cat after the tiger.

[/TS_VCSC_Figure_Navigation_Item][TS_VCSC_Figure_Navigation_Item figure_image=”16116″ handle_border_color=”#dd9933″ figure_title=”Jaguar” figure_note=”Panthera Onca” button_text=”Read More” button_color=”#dd9933″ tooltip_content=”Panthera Onca” button_link=”url:http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FJaguar||target:%20_blank”]

The jaguar is a big cat, a feline in the Panthera genus, and is the only Panthera species found in the Americas. The jaguar is the third-largest feline after the tiger and the lion, and the largest in the Western Hemisphere.

[/TS_VCSC_Figure_Navigation_Item][TS_VCSC_Figure_Navigation_Item figure_image=”16126″ handle_border_color=”#dd9933″ figure_title=”Cheetah” figure_note=”Acinonyx Jubatus” button_text=”Read More” button_color=”#dd9933″ tooltip_content=”Acinonyx Jubatus” button_link=”url:http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FCheetah||target:%20_blank”]

The cheetah is a large feline inhabiting most of Africa and parts of Iran, and can run faster than any other land animal — as fast as 112 to 120 km/h (70 to 75 mph) in short bursts covering distances up to 500 m (1,600 ft).

[/TS_VCSC_Figure_Navigation_Item][/TS_VCSC_Figure_Navigation_Container][TS-VCSC-Spacer height=”20″]

[TS-VCSC-Spacer height=”20″]

Roman Numbers (Hover)

[TS-VCSC-Divider divider_border_thick=”2″][TS_VCSC_Figure_Navigation_Container numbering=”roman”][TS_VCSC_Figure_Navigation_Item figure_image=”16168″ figure_background_shape=”square” handle_border_color=”#edd121″ figure_title=”Cologne” figure_note=”Founded 38 BC” button_text=”Read More” button_color=”#edd121″ button_link=”url:http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FCologne||target:%20_blank”]

Cologne is located on both sides of the Rhine River. The city’s famous Cologne Cathedral (Kölner Dom) is the seat of the Catholic Archbishop of Cologne. The University of Cologne (Universität zu Köln) is one of Europe’s oldest and largest universities.

[/TS_VCSC_Figure_Navigation_Item][TS_VCSC_Figure_Navigation_Item figure_image=”16144″ figure_background_shape=”square” handle_border_color=”#edd121″ figure_title=”Frankfurt (Main)” figure_note=”Founded 794 AD” button_text=”Read More” button_color=”#edd121″ button_link=”url:http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FFrankfurt||target:%20_blank”]

Frankfurt is the largest financial centre in continental Europe and ranks among the world’s leading financial centres. It is home to the European Central Bank, Deutsche Bundesbank, Frankfurt Stock Exchange and several large commercial banks.

[/TS_VCSC_Figure_Navigation_Item][TS_VCSC_Figure_Navigation_Item figure_image=”16158″ figure_active=”true” figure_background_shape=”square” handle_border_color=”#edd121″ figure_title=”Potsdam” figure_note=”Founded 993 AD” button_text=”Read More” button_color=”#edd121″ button_link=”url:http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FPotsdam||target:%20_blank”]

Potsdam was a residence of the Prussian kings and the German Kaiser, until 1918. Around the city there are a series of interconnected lakes and cultural landmarks, in particular the parks and palaces of Sanssouci, the largest World Heritage Site in Germany.

[/TS_VCSC_Figure_Navigation_Item][TS_VCSC_Figure_Navigation_Item figure_image=”16162″ figure_background_shape=”square” handle_border_color=”#edd121″ figure_title=”Dresden” figure_note=”Founded 1206 AD” button_text=”Read More” button_color=”#edd121″ button_link=”url:http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FDresden||target:%20_blank”]

Dresden has a long history as the capital and royal residence for the Electors and Kings of Saxony, who for centuries furnished the city with cultural and artistic splendor. The city was known as the Jewel Box, because of its baroque and rococo city center.

[/TS_VCSC_Figure_Navigation_Item][/TS_VCSC_Figure_Navigation_Container]

[TS-VCSC-Spacer height=”20″]

Standard Numbers (Click)

[TS-VCSC-Divider divider_border_thick=”2″][TS_VCSC_Figure_Navigation_Container trigger=”click”][TS_VCSC_Figure_Navigation_Item figure_image=”16047″ figure_background_shape=”circle” figure_background_type=”pattern” figure_background_pattern=”http://tekanewascripts.com/composium/wp-content/plugins/ts-visual-composer-extend/images/pattern/88.jpg” handle_border_color=”#3fbf52″ figure_title=”Knowledge” figure_note=”Albert Einstein” button_text=”Read More” button_color=”#6295ad” button_link=”url:http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FAlbert_Einstein||target:%20_blank”]

The gift of fantasy has meant more to me than my talent for absorbing positive knowledge.

[/TS_VCSC_Figure_Navigation_Item][TS_VCSC_Figure_Navigation_Item figure_image=”16043″ figure_background_shape=”circle” figure_background_type=”pattern” figure_background_pattern=”http://tekanewascripts.com/composium/wp-content/plugins/ts-visual-composer-extend/images/pattern/87.jpg” handle_border_color=”#dd3333″ figure_title=”Positive Action” figure_note=”Dalai Lama” button_text=”Read More” button_color=”#dd9933″ button_link=”url:http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FDalai_Lama||target:%20_blank”]

In order to carry a positive action we must develop here a positive vision.

[/TS_VCSC_Figure_Navigation_Item][TS_VCSC_Figure_Navigation_Item figure_image=”16046″ figure_background_shape=”circle” figure_background_type=”pattern” figure_background_pattern=”http://tekanewascripts.com/composium/wp-content/plugins/ts-visual-composer-extend/images/pattern/17.jpg” handle_border_color=”#1e73be” figure_title=”Reinforcement” figure_note=”B.F. Skinner” button_text=”Read More” button_color=”#cccccc” button_font=”#686868″ button_link=”url:http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FB._F._Skinner||target:%20_blank”]

The way positive reinforcement is carried out is more important than the amount.

[/TS_VCSC_Figure_Navigation_Item][TS_VCSC_Figure_Navigation_Item figure_image=”16044″ figure_background_shape=”circle” figure_background_type=”pattern” figure_background_pattern=”http://tekanewascripts.com/composium/wp-content/plugins/ts-visual-composer-extend/images/pattern/31.jpg” handle_border_color=”#dd9933″ figure_title=”Positive Thinking” figure_note=”Zig Ziglar” button_text=”Read More” button_color=”#9e062e” button_link=”url:http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FZig_Ziglar||target:%20_blank”]

Positive thinking will let you do everything better than negative thinking will.

[/TS_VCSC_Figure_Navigation_Item][/TS_VCSC_Figure_Navigation_Container]

[TS-VCSC-Spacer height=”20″]

Full-Width Navigation as “Toggles” / Multiple Open

[TS-VCSC-Divider divider_border_thick=”2″][TS_VCSC_Figure_Navigation_Container width_full=”true” trigger=”click” multiple=”true”][TS_VCSC_Figure_Navigation_Item figure_image=”16047″ figure_maxheight_set=”true” figure_maxheight_value=”100″ handle_border_color=”#0066bf” figure_title=”Step 1″ figure_note=”Brainstorming” button_text=”Read More” button_color=”#6295ad” button_link=”url:http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FAlbert_Einstein||target:%20_blank”]

In in commodo magna. Duis quis interdum leo. Nullam faucibus iaculis auctor. Aliquam ante arcu, tincidunt efficitur molestie et, sagittis ut sem. Aenean eget viverra enim, eget vulputate est. Quisque sed varius elit. In imperdiet, erat non faucibus porta, magna sem elementum ex, ut viverra turpis velit sit amet risus. Nullam consectetur aliquam aliquet. Proin accumsan ipsum libero, ut iaculis turpis imperdiet eget. Sed commodo vitae ex in vulputate. Donec a purus nisl. Vestibulum non urna enim. Sed et dui quam. Cras erat tellus, luctus a purus ac, ullamcorper sodales orci. Phasellus at dignissim purus, sodales volutpat nibh.

[/TS_VCSC_Figure_Navigation_Item][TS_VCSC_Figure_Navigation_Item figure_image=”16043″ figure_maxheight_set=”true” figure_maxheight_value=”100″ handle_border_color=”#0066bf” figure_title=”Step 2″ figure_note=”Planning Stage” button_text=”Read More” button_color=”#dd9933″ button_link=”url:http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FDalai_Lama||target:%20_blank”]

Donec leo erat, fringilla at hendrerit at, mattis ac magna. Suspendisse libero felis, suscipit ut varius sit amet, pharetra a justo. Quisque elementum consequat quam non malesuada. Etiam posuere, neque nec consequat sagittis, neque orci sagittis nunc, non malesuada velit libero nec nisl. Fusce libero tellus, rutrum sed libero id, tempus pretium ipsum. Ut quis malesuada est. Etiam at dignissim felis. Nunc mollis, tellus ut egestas volutpat, sem arcu venenatis metus, vitae vehicula est turpis et nisl.

[/TS_VCSC_Figure_Navigation_Item][TS_VCSC_Figure_Navigation_Item figure_image=”16046″ figure_maxheight_set=”true” figure_maxheight_value=”100″ handle_border_color=”#0066bf” figure_title=”Step 3″ figure_note=”Implementation Stage” button_text=”Read More” button_color=”#cccccc” button_font=”#686868″ button_link=”url:http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FB._F._Skinner||target:%20_blank”]

Sed nec nisl mollis, cursus purus et, gravida sem. In ultricies nunc volutpat, accumsan nisi nec, imperdiet arcu. Vivamus ut pharetra odio. Vivamus commodo magna eu lacus tempor, fringilla dictum nulla placerat. Nullam porttitor eu elit eu blandit. Ut dapibus ex metus, nec congue ligula efficitur eu. Donec venenatis gravida dignissim. Cras commodo auctor facilisis. Praesent vulputate tortor elementum lacus tincidunt, quis iaculis nibh porta. Aliquam a lacus purus. Quisque in tincidunt ante, eu aliquet magna. Suspendisse a malesuada urna. Sed quis nunc in urna porta volutpat in ut risus.

[/TS_VCSC_Figure_Navigation_Item][TS_VCSC_Figure_Navigation_Item figure_image=”16044″ figure_maxheight_set=”true” figure_maxheight_value=”100″ handle_border_color=”#0066bf” figure_title=”Step 4″ figure_note=”Marketing and Sales” button_text=”Read More” button_color=”#9e062e” button_link=”url:http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FZig_Ziglar||target:%20_blank”]

Mauris dapibus luctus diam eu posuere. Phasellus tincidunt elementum leo, non imperdiet augue egestas ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus ullamcorper, nisi at faucibus fermentum, lacus nisi ornare dui, quis volutpat ex sapien eget ligula. Sed vitae finibus magna, ac elementum mi. Cras sed vehicula sem. Cras ultricies tincidunt tempus. Mauris vel ante dignissim, venenatis lectus ac, tincidunt purus. Sed quis gravida elit, nec scelerisque felis. Donec laoreet dignissim nisi ut tempor. Duis cursus ornare dui at imperdiet. Quisque ac lacinia mauris. Quisque hendrerit gravida velit, sed tempor nibh suscipit ac. Fusce non ullamcorper odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec quis enim mi.

[/TS_VCSC_Figure_Navigation_Item][/TS_VCSC_Figure_Navigation_Container]

[TS-VCSC-Spacer height=”20″]

In in commodo magna. Duis quis interdum leo. Nullam faucibus iaculis auctor. Aliquam ante arcu, tincidunt efficitur molestie et, sagittis ut sem. Aenean eget viverra enim, eget vulputate est. Quisque sed varius elit. In imperdiet, erat non faucibus porta, magna sem elementum ex, ut viverra turpis velit sit amet risus. Nullam consectetur aliquam aliquet. Proin accumsan ipsum libero, ut iaculis turpis imperdiet eget. Sed commodo vitae ex in vulputate. Donec a purus nisl. Vestibulum non urna enim. Sed et dui quam. Cras erat tellus, luctus a purus ac, ullamcorper sodales orci. Phasellus at dignissim purus, sodales volutpat nibh.

Donec leo erat, fringilla at hendrerit at, mattis ac magna. Suspendisse libero felis, suscipit ut varius sit amet, pharetra a justo. Quisque elementum consequat quam non malesuada. Etiam posuere, neque nec consequat sagittis, neque orci sagittis nunc, non malesuada velit libero nec nisl. Fusce libero tellus, rutrum sed libero id, tempus pretium ipsum. Ut quis malesuada est. Etiam at dignissim felis. Nunc mollis, tellus ut egestas volutpat, sem arcu venenatis metus, vitae vehicula est turpis et nisl.

Pellentesque hendrerit gravida molestie. Nam placerat varius placerat. Phasellus molestie pulvinar feugiat. Morbi hendrerit neque vitae sapien ullamcorper, at ullamcorper nunc luctus. Praesent consectetur augue eu ipsum imperdiet congue. Proin eget nibh quis ante varius interdum. Aliquam ut malesuada nunc, quis imperdiet metus.

Sed nec nisl mollis, cursus purus et, gravida sem. In ultricies nunc volutpat, accumsan nisi nec, imperdiet arcu. Vivamus ut pharetra odio. Vivamus commodo magna eu lacus tempor, fringilla dictum nulla placerat. Nullam porttitor eu elit eu blandit. Ut dapibus ex metus, nec congue ligula efficitur eu. Donec venenatis gravida dignissim. Cras commodo auctor facilisis. Praesent vulputate tortor elementum lacus tincidunt, quis iaculis nibh porta. Aliquam a lacus purus. Quisque in tincidunt ante, eu aliquet magna. Suspendisse a malesuada urna. Sed quis nunc in urna porta volutpat in ut risus.

Mauris dapibus luctus diam eu posuere. Phasellus tincidunt elementum leo, non imperdiet augue egestas ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus ullamcorper, nisi at faucibus fermentum, lacus nisi ornare dui, quis volutpat ex sapien eget ligula. Sed vitae finibus magna, ac elementum mi. Cras sed vehicula sem. Cras ultricies tincidunt tempus. Mauris vel ante dignissim, venenatis lectus ac, tincidunt purus. Sed quis gravida elit, nec scelerisque felis. Donec laoreet dignissim nisi ut tempor. Duis cursus ornare dui at imperdiet. Quisque ac lacinia mauris. Quisque hendrerit gravida velit, sed tempor nibh suscipit ac. Fusce non ullamcorper odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec quis enim mi.