Models are dialog box /popup that is displayed on top of the current page. This can be used to show any important message or any information. This snippet is an example of showing more information on the clicked object. It is a simple example of buttons to show the model. Here the buttons are having the image out planets and styled using CSS. A click on any button or image displays model with the information of planets. To open the model set the data-target to model to be opened. To create a Model you need to define the model class with a dialog containing, header, body, and footer if needed and id as a reference to a button click. A close button dismisses button can be seen at the bottom and at top of the model. You can use this snippet to display the information in dialogue in the form of Model. You can style the model accordingly.
This is an elegant looking accordion, with HTML and CSS style. The HTML is simple with the container having panel-group with the heading, title body defined for accordion. The data-toggle and accordion-toggle define the behavior of the accordion once clicked on it. The collapse class indicates it has a collapsible behavior for each panel. The .in is added to the first panel for the collapsible class which indicates the data to be shown by default. The first panel is shown by default and is in the expandable state. An accordion is used to show the extra information or paragraph with images and links. You can use this styled accordion on your page. The styling and color combination would give and stylish look to your website.
This is a simple snippet using HTML tags. Though it looks like an accordion it is much more. It is a plain HTML details tag which specifies the additional details that the user can use and hide on demand. Unlink accordion, it is not collapsible unless it is clicked. This snippet can be used on any website to show the small amount of information for a particular section. Take a look at CSS, each tag is styled. The hovering function is used for the summary, once you hover the mouse on summary the styling is set for the borders of summary tag, along with the colours set for the details and summary in open state. The styling would enhance these simple tags and gives it look as collapsible or accordion. This can be used in your website easily to enhance your paragraphs.
This snippet shows examples of Accordion and toggles using Velocity.js. Velocity.js is an animation engine for the UI, which works with or without JQuery. It is fast it features colour animation, transforms, loops, easings, SVG support, and scrolling. It can be used instead of Jquery and CSS. Here, the snippet deals with bootstrap 3 combined with Velocity.js v1.2. You can see the Accordion and Toggle behaviour created using bootstrap classes. The HTML is similar for both the example, take a look at the CSS and JQuery. Jquery uses the Velocity for creating the animation effect for fading the panels once clicked to see the accordion and toggling behaviour. The animations are smoothly done. This would be used in websites with large content. You can use this code with your personal tweak to blend with your page.
Whether it is "traditional top bar" navigation or sticky navigation at the bottom or sides, we can have animations for the menu when selected. These animations can be blended with all types of navigation bars. We are looking at the series of collections of animations used for the menu items in a navigation bar. This is the third example in this series; the code uses the combination of HTML and CSS to create the animation. It is a simple navigation bar with a menu like any other blog. Check out the menu when you trigger the hovering event, this will create a left border along with the text of the menu. The font and other styling properties are perfect matches for any format website. These animations give a special effect to navigation bars. You can use this kind of animations for your personal website.