Tweet



 
A very easy to use, cross platform, jQuery based UI toolkit, that’s still small in size, has the features you need, and doesn’t get in your way of doing things! Put jQuery and jKit on all your pages and HTML becomes so much better. And the best thing? You really don’t have to be a programmer to create a trully amazing website! jKit has 99% of all the features you ever need. You don’t have to check out dozens of plugins, learn how to use them, only to find out they don’t work in a specific browser. And even if jKit doesn’t have that one feature you need right now, jKit is fully extendable with plugins and command replacements, all that and your API always stays the same.

Hi, stranger

jKit is growing almost daily, if you don’t find what you need, let us know with a post on the community forum or our social pages. Hey, who knows, maybe it’s already on our ToDo list.

Content Summary

jKit Button

If you like jKit, use and want to support the project, here’s a small button you can use to link to the jKit website.

Btw, if you did something really nice with jKit, send us a link to your work and if we like it, we would sure love to feature it.

Menu command

Create a dropdown menu that works on all browsers, especially mobiles.

Basic Usage (HTML)

data-jkit="[menu]"

Advanced Init (JavaScript)

$('#myelement').jKit('menu', {  });

Options

OptionValuesDefaultDescription
autoactive“yes” or “no”noIf yes, set any href inside the menu that matches the current url to active

Events

This command has no events.

Examples

Normal use case:

The most common use as a dropdown menu. The CSS in this example is from: link:

Source:
<div style="height:160px;"><ul class="dropdown" data-jkit="[menu]">
	<li><a href="#">Main 1</a>
      		<ul class="sub_menu">
      			 <li><a href="#">Sub 1A</a></li>
      			 <li><a href="#">Sub 1B</a></li>
      			 <li><a href="#">Sub 1C</a></li>
      			 <li><a href="#">Sub 1D</a></li>
      		</ul>
      	</li>
	<li><a href="#">Main 2</a>
      		<ul class="sub_menu">
      			 <li><a href="#">Sub 2A</a></li>
      			 <li><a href="#">Sub 2B</a></li>
      		</ul>
      	</li>
	<li><a href="#">Main 3</a>
      		<ul class="sub_menu">
      			 <li><a href="#">Sub 3A</a></li>
      			 <li><a href="#">Sub 3B</a></li>
      			 <li>
				<a href="#">Sub 3C</a>
				<ul>
      					<li><a href="#">Sub 3C1</a></li>
      					<li><a href="#">Sub 3C2</a></li>
      				</ul>
			</li>
      		</ul>
      	</li>
</ul></div>

With “autoactive” enabled:

Sets an active class to the currently active href:

Source:
<div style="height:160px;"><ul class="dropdown" data-jkit="[menu:autoactive=yes]">
	<li><a href="#">Main 1</a>
      		<ul class="sub_menu">
      			 <li><a href="menu.html">Should be active</a></li>
      			 <li><a href="#">Sub 1B</a></li>
      			 <li><a href="#">Sub 1C</a></li>
      			 <li><a href="#">Sub 1D</a></li>
      		</ul>
      	</li>
	<li><a href="#">Main 2</a>
      		<ul class="sub_menu">
      			 <li><a href="#">Sub 2A</a></li>
      			 <li><a href="#">Sub 2B</a></li>
      		</ul>
      	</li>
	<li><a href="#">Main 3</a>
      		<ul class="sub_menu">
      			 <li><a href="#">Sub 3A</a></li>
      			 <li><a href="#">Sub 3B</a></li>
      			 <li>
				<a href="#">Sub 3C</a>
				<ul>
      					<li><a href="#">Sub 3C1</a></li>
      					<li><a href="#">Sub 3C2</a></li>
      				</ul>
			</li>
      		</ul>
      	</li>
</ul></div>

Example CSS

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
ul.dropdown {
 position: relative;
 z-index: 597;
 float: left;
}
ul.dropdown li {
 float: left;
 min-height: 1px;
 line-height: 1.3em;
 vertical-align: middle;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}
ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}
ul.dropdown ul li {
 float: none;
}
ul.dropdown ul ul {
 top: 1px;
 left: 99%;
}
ul.dropdown li:hover > ul {
 visibility: visible;
}
ul.dropdown-vertical {
 width: 200px;
}
ul.dropdown-vertical ul {
 top: 1px;
 left: 99%;
}
ul.dropdown-vertical li {
 float: none;
}
ul.dropdown-vertical-rtl {
 float: right;
}
ul.dropdown-vertical-rtl ul,
ul.dropdown-horizontal > li.dropdown-vertical-rtl ul ul {
 left: auto !important;
 right: 99%;
}
ul.dropdown-horizontal li.dropdown-vertical-rtl ul {
 left: auto;
 right: 0;
}
ul.dropdown-vertical-rtl li,
li.dropdown-vertical-rtl li {
 text-align: right;
}
ul.dropdown {
 font-weight: bold;
}
ul.dropdown li {
 padding: 7px 10px;
 border-style: solid;
 border-width: 1px 1px 1px 0;
 border-color: #fff #d9d9d9 #d9d9d9;
 background-color: #f6f6f6;
 color: #000;
}
ul.dropdown li.hover,
ul.dropdown li:hover,
ul.dropdown li.on {
 background-color: #eee;
 color: #000;
}
ul.dropdown a:link,
ul.dropdown a:visited	{ color: #000; text-decoration: none; }
ul.dropdown a:hover		{ color: #000; }
ul.dropdown a:active	{ color: #ffa500; }
ul.dropdown a.active:link,
ul.dropdown a.active:visited	{ color: #f33; text-decoration: none; }
ul.dropdown a.active:hover		{ color: #f00; }
ul.dropdown a.active:active	{ color: #ffa500; }
/* -- level mark -- */
ul.dropdown ul {
 width: 150px;
 margin-top: 1px;
}
ul.dropdown ul li {
 font-weight: normal;
}
/* -- Components override -- */
ul.dropdown-horizontal ul *.dir {
 padding-right: 15px;
 background-image: url(https://jquery-jkit.com/files/images/default/nav-arrow-right.png);
 background-position: 100% 50%;
 background-repeat: no-repeat;
}
ul.dropdown-upward *.dir {
 background-image: url(https://jquery-jkit.com/files/images/default/nav-arrow-top.png);
}
ul.dropdown-vertical *.dir,
ul.dropdown-upward ul *.dir {
 background-image: url(https://jquery-jkit.com/files/images/default/nav-arrow-right.png);
}
ul.dropdown-vertical-rtl *.dir,
ul.dropdown-horizontal > li.dropdown-vertical-rtl ul *.dir {
 padding-right: 10px;
 padding-left: 15px;
 background-image: url(https://jquery-jkit.com/files/images/default/nav-arrow-left.png);
 background-position: 2px 50%;
}

Replacements

There are currently no replacements for this command.

[ Learn more about replacements ]

 

Discussions

Do you have questions or do you want to suggest new features? Than head over to our new community:

[ jKit Community ]