Picture Menu
Welcome to the demo / documentation page for this jQuery plugin. On the top of the page you'll see different demo's for this plugin. The documentation can be found below! The meaning for this plugin is to create good looking menu's! Well, at least I think they are good looking! And I know there are far more plugins just like this one. But I wanted to make my own!
Version 1.2.0 (9 feb)
New feature:
- Use menu item as link without submenu!
- Make the menu link go in new browser
Version 1.1.1 (19 jan)
Bugfix IE7:
- Tested and works in IE 7, 8 and 9
- Tested and works in Firefox
- Tested and works in Chrome
- Tested and works in Safari
Version 1.1.0 (18 jan)
Some new features:
- Set default menu item open.
- Leave active menu item open.
- Remember active menu item using cookies.
- Use debug function.
Version 1.0.0 (12 jan)
Added the basic features.
- Creating the menu.
- Custom width for menu items.
- Custom height for menu.
- Custom width for inactive menu items.
- Custom width for active menu items.
- Make inactive menu items transparent.
- Set a custum anumation time.
- Set (or remove) border width.
Sorry for the ad
Examples
Let's look at some demo's for your inspiration!
Example 1
<script type="text/javascript">
$(document).ready(function() {
$(".MainMenu1").pictureMenu();
});
</script>
This is the basic menu! The menu items have a default width of 75px. When you hover an menu item, it will stretch (in 350 miliseconds) to the maximum possible width and then the submenu will appear. The other inactive menu items shrink to 40px. When you leave the menu, it will restore to it's original size and the open submenu wel disappear!
Example 2
<script type="text/javascript">
$(document).ready(function() {
$(".MainMenu2").pictureMenu({
animateTime: 600,
menuActiveWidth: 600,
useMenuActiveWidth: true
menuInactiveHide: 0.2,
});
});
</script>
This is the same menu as example 1, only there are a few differences. The animation time is set to 600 (animateTime). So now it takes 600 miliseconds to complete an animation. Also the active menu items stretches to 600px instead of 100% (menuActiveWidth and useMenuActiveWidth)! The other inactive menu items will almost disappear to 20% opacity (menuInactiveHide)
Example 3
<script type="text/javascript">
$(document).ready(function() {
$(".MainMenu3").pictureMenu({
menuHeight: 200,
menuInactiveHide: 0.5,
menuBorder: 0,
useMenuWidth: false
});
});
</script>
This example is a bit different. First, this menu is set to 200px height (menuHeight). Also the menu items stretch automaticly to 100% width (useMenuWidth). We also removed the border between the menu items (menuBorder).
Example 4
<script type="text/javascript">
$(document).ready(function() {
$(".MainMenu4").pictureMenu({
animateTime: 600,
menuInactiveHide: 0.2,
menuWidthHover: 75,
menuActiveWidth: 400,
useMenuActiveWidth: true,
leaveActiveOpen: true,
leaveActiveOpenCookie: true
});
});
</script>
The only thing different with this example is that the active menu is default open (leaveActiveOpen). When you refresh your page it will stay open if you have cookies enabled (leaveActiveOpenCookie). When the session stops, the cookie will remove automaticly!
Example 5
<script type="text/javascript">
$(document).ready(function() {
$(".MainMenu5").pictureMenu({
menuHeight: 200,
animateTime: 600,
menuInactiveHide: 0.2,
menuWidthHover: 75,
menuAutoOpen: 3,
leaveActiveOpen: true,
leaveActiveOpenCookie: true
});
});
</script>
Unlike example 4, this example has a default open menu item (menuAutoOpen). If there is no cookie found, it will automaticly open a default menu item!
Example 6
<script type="text/javascript">
$(document).ready(function() {
$(".MainMenu5").pictureMenu({
menuHeight: 200,
menuInactiveHide: 0.7,
menuWidthHover: 75,
menuAutoOpen: 1,
leaveActiveOpen: true
});
});
</script>
This example has menu items without sub menu's in it.
Sorry for the ad
Documentation
How to use it!
Well that is simple. Make sure you have a place to put your menu:
<div class="MainMenu">
</div>
Then add a few menu items in it. Make sure that your first picture is the picture you want to use as a background! The second picture is text in this case. You can choose not to use it!
<div class="MainMenu">
<div>
<img src="img/menu-1.png" />
<img src="img/text-1.png" />
</div>
<div>
<img src="img/menu-2.png" />
<img src="img/text-2.png" />
</div>
<div>
<img src="img/menu-3.png" />
<img src="img/text-3.png" />
</div>
</div>
To add a submenu, just put an unordered list in it with the class "submenu". Then choose if you want a "light" or a "dark" menu!
<div class="MainMenu">
<div>
<img src="img/menu-1.png" />
<img src="img/text-1.png" />
<ul class="submenu light">
<li><a href="#">Submenu 1.1</a></li>
<li><a href="#">Submenu 1.2</a></li>
<li><a href="#">Submenu 1.3</a></li>
<li><a href="#">Submenu 1.4</a></li>
<li><a href="#">Submenu 1.5</a></li>
<li><a href="#">Submenu 1.6</a></li>
</ul>
</div>
<div>
<img src="img/menu-2.png" />
<img src="img/text-2.png" />
<ul class="submenu light">
<li><a href="#">Submenu 2.1</a></li>
<li><a href="#">Submenu 2.2</a></li>
<li><a href="#">Submenu 2.3</a></li>
<li><a href="#">Submenu 2.4</a></li>
<li><a href="#">Submenu 2.5</a></li>
<li><a href="#">Submenu 2.6</a></li>
</ul>
</div>
<div>
<img src="img/menu-3.png" />
<img src="img/text-3.png" />
</div>
</div>
If you don't want to use a submenu, but just 1 link, just put an <a href="#"> in your menu item! Use target="_blank" to make the link go in new browser
<div class="MainMenu">
<div>
<img src="img/menu-1.png" />
<img src="img/text-1.png" />
<ul class="submenu light">
<li><a href="#">Submenu 1.1</a></li>
<li><a href="#">Submenu 1.2</a></li>
<li><a href="#">Submenu 1.3</a></li>
<li><a href="#">Submenu 1.4</a></li>
<li><a href="#">Submenu 1.5</a></li>
<li><a href="#">Submenu 1.6</a></li>
</ul>
</div>
<div>
<img src="img/menu-2.png" />
<img src="img/text-2.png" />
<ul class="submenu light">
<li><a href="#">Submenu 2.1</a></li>
<li><a href="#">Submenu 2.2</a></li>
<li><a href="#">Submenu 2.3</a></li>
<li><a href="#">Submenu 2.4</a></li>
<li><a href="#">Submenu 2.5</a></li>
<li><a href="#">Submenu 2.6</a></li>
</ul>
</div>
<div>
<img src="img/menu-3.png" />
<img src="img/text-3.png" />
<a href="http://www.google.com/" target="_blank"></a>
</div>
</div>
And that's it for the markup. Now just do some jQuery magic and youre ready!
<script type="text/javascript">
$(document).ready(function() {
$(".MainMenu").pictureMenu();
});
</script>
The options!
Here is a list of options with the default value. You can edit these options to make your menu better (or worse)!