Download

Wow! What can it do?

Sweet Christmas son! What can't it do!? A lot of things actually. What is does do is organize your lists into neat and tidy expandable menus, perfect for sidebar navigation, or ANY bar navigaion. And because the style is determined by your CSS, you can make it look virtually however you want!

The example on the left shows a vertical style menu, with the state saved. Go on, expand one of the menus and refresh the page.

The menu above shows a nav bar drop down style.

Ummm... Aren't there other plugins out there already do this?

Maybe there is, asshole, but they're all complete bullshit! Superfish? More like.... StupidFish... uh, yeah.

Have you ever tried to use those things? They take hours to configure and they still don't work like you want them to. With the Lame plugin, you'll be up and running within minutes! It's like our motto says, "Just SET IT and FORGET IT!" (this is not our actual motto, nor will you be up and running in minutes).

Sorry. So how do I get started?

It's quite easy. Just follow our easy 93 step program below

NOTICE: It has been brought to our attention that steps 2 - 93 had no relation to using this plugin, whatsoever. It consisted mostly of severely racist diatribe, intersected with hardcore erotic Harry Potter fan fiction, so obscene in content that it bordered on terrorism. As such, it has been removed.

This HTML...

<ul class="menu" id="mycookiename">
	<li><a href="#">Header Link (no children)</a></li>
	<li>
		<a href="#">Parent Link</a>
		<ul>
			<li><a href="#">Child Link</a></li>
			<li><a href="#">Child Link</a></li>
			<li><a href="#">Child Link</a></li>
			<li><a href="#">Child Link</a></li>
		</ul>
	</li>
	<li>
		<a href="#">Parent Link</a>
		<ul>
			<li><a href="#">Child Link</a></li>
			<li><a href="#">Child Link</a></li>
			<li><a href="#">Child Link</a></li>
		</ul>
	</li>
	<li>
		<a href="#">Parent Link</a>
		<ul>
			<li><a href="#">Child Link</a></li>
			<li><a href="#">Child Link</a></li>
			<li><a href="#">Child Link</a></li>
		</ul>
	</li>
	<li>
		<a href="#">Parent Link</a>
		<ul>
			<li><a href="#">Child Link</a></li>
			<li><a href="#">Child Link</a></li>
			<li><a href="#">Child Link</a></li>
		</ul>
	</li>
</ul>

Plus this stuff..

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="jquery.lame.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
			$(".menu").lame();
	});
</script>

Equals this

Bravo. You've created a list. *clap... clap... clap...*

Very funy, smartass. Click on one of the parent links, or look at the examples at the top. Did you expect CSS to be included? Do you want me to wipe for you too?

Maybe...

Check it or wreck it.

/* HORIZONTAL STYLE */
.menu_h {
	list-style: none;
	padding: 0;
	font: 10px Arial;
}

.menu_h li {
	float: left;
}

.menu_h li a {
	display: block;
	padding: 10px;
	color: #ffffff;
	background: #000000;
	text-transform: uppercase;
}

.menu_h li a:hover {
	background: #333333;
}

.child_menu_h {
	position: absolute;
	display: none;
	list-style: none;
	padding: 0;
	width: 150px;
	background: #ffffff;
}

.child_menu_h li {
	float: none;
}

.sub_child_menu_h {
	position: absolute;
	display: none;
	list-style: none;
	padding: 0;
	width: 150px;
	margin-left: 150px;
	margin-top: -33px;
	
}

.sub_child_menu_h li a {
	background: #ff0000;
}

/* END HORIZONTAL STYLE */

Park it or spark it.

/* VERTICAL STYLE */

.menu_v {
	list-style: none;
	padding: 0;
	font: 11px Arial;
	width: 200px;
}

.menu_v li a {
	display: block;
	padding: 10px;
	color: #ffffff;
	background: #000000;
	text-transform: uppercase;
}

.menu_v li a:hover {
	background: #333333;
}

.child_menu_v {
	display: none;
	list-style: none;
	padding: 0;
	width: 200px;
	background: #ffffff;
}

.child_menu_v li a {
	background: #ff0000;
}

/* END VERTICAL STYLE */

Okay, but what's the deal with jquery.cookie.js

Good question Jimmy.

Timmy.

Don't interrupt me Jimmy. Now, by using jquery.cookie, we can remember which menu's are expanded and display them appropriately when the user navigates across your site.

This is turned off by default, so if it's something you need, then don't ignore the following, if no, then do.

<script type="text/javascript">

	$(document).ready(function() {
		$(".menu").lame(
			{
				speed :	'fast',
				save : true,
				action : 'click', 
				effect : 'slide',
				close : false
			}	
		);
	});

</script>

As you can see, we have a few options available to us.

speed - this takes 'slow', 'normal', 'fast', or a speed value in milliseconds.
save - true or false. You need jquery.cookie.js in order to save menu states. This is inactive if action is set to 'hover'.
action - 'click' or 'hover'.
effect - 'slide' or 'fade'.
close - true or false. This is inactive if action is set to 'hover'. This closes a menu when the mouse leaves the parent.

Cool. So maybe this isn't a complete waste of time after all.

It sure is Jimmy. It sure is.

Questions and comments to ryan@trainwrecked.net