DROPDOWNS

Interactive, toggleable, contextual overlays for your design!

How it works

Any single element can be turned into a dropdown with the following pattern: First create .jtbDropdown div to wrap all elements, then create the trigger of the dropdown with .jtbDropdownTrigger, after all add your dropdown content with .jtbDropdownContent and voila. Your dropdown is ready!

			Copy
			<div class="jtbDropdown">
	<button class="jtbButton jtbDropdownTrigger">Dropdown Trigger</button>
	<div class="jtbDropdownContent">
		<a href="#">Action</a>
		<a href="#">Action</a>
		<hr>
		<a href="#">Another action</a>
	</div>
</div>
		

Content items

Even there is no restrictions in the content of dropdowns, we have created some good attributes for <a> tags.

You can disable the link with adding .disabled class to them or if you want to make the link active just apply .active class to it.

			Copy
			<div class="jtbDropdown">
	<button class="jtbButton jtbDropdownTrigger">Dropdown Trigger</button>
	<div class="jtbDropdownContent">
		<a href="#" class="active">Action</a>
		<a href="#" class="disabled">Action</a>
		<hr>
		<a href="#">Another action</a>
	</div>
</div>
		

Positioning

There are also different positioning possibilities for dropdowns in JTB_MD. If you want to position your dropdown on the right side of the trigger, you can use .jtbDropdownContentRight or, like the right positioning, with .jtbDropdownContentLeft you can align your dropdown box on the left side of the trigger.

			Copy
			<div class="jtbDropdown">
	<button class="jtbButton jtbDropdownTrigger">This one is really long dropdown trigger</button>
	<div class="jtbDropdownContent jtbDropdownContentLeft">
		<a href="#">Action</a>
		<a href="#">Action</a>
		<hr>
		<a href="#">Another action</a>
	</div>
</div>

<div class="jtbDropdown">
	<button class="jtbButton jtbDropdownTrigger">This one is really long dropdown trigger</button>
	<div class="jtbDropdownContent jtbDropdownContentRight">
		<a href="#">Action</a>
		<a href="#">Action</a>
		<hr>
		<a href="#">Another action</a>
	</div>
</div>
		

Javascript behaviour

Initializing

Javascript behaivours of jtbDropdowns has been written in dropdown.js plugin of jtb_md.js. To avoid any problematic behaviour on dropdowns; do not remove this plugin manually.

Methods

You can use the jtbDropdown methods to make the dropdowns perform an action.

Show

If you want to make a spesific dropdown visible, you can easily call the jtbDropdown function with parameter show.

				Copy
				$('#dropdownGroupID').jtbDropdown('show')
			

Hide

If you want to make a spesific dropdown invisible, you can easily call the jtbDropdown function with parameter hide.

				Copy
				$('#dropdownGroupID').jtbDropdown('hide')
			

Toggle visibility

If you want to change a spesific dropdown's visibility, you can easily call the jtbDropdown function with parameter toggle.

				Copy
				$('#dropdownGroupID').jtbDropdown('toggle')