Sweet Menu

[Black Snow]

Sweet Menu takes an ordinary unordered list of links and makes it a sweet looking menu. It does this by utilizing jQuery and it?s plugin system. Simply include the jQuery library, the Sweet Menu plugin, and make a simple jQuery call and you are on your way to a sweet looking menu!

Installation

1. Upload the files from the attached zip file in your forum root.

2. Go to AdminCp > Styles & Templates > Common Templates

Add this to the very bottom of your HEADER template:
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.easing.js"></script>
<script type="text/javascript" src="jquery.sweet-menu-1.0.js"></script>

<script type="text/javascript">
$(document).ready(function(){

$('#exampleMenu').sweetMenu({
top: 200,
padding: 8,
iconSize: 40,
easing: 'easeOutBounce',
duration: 500,
icons: [
'images/home.png',
'images/comments.png',
'images/red_heart.png',
'images/male_user.png',
'images/yellow_mail.png',
'images/computer.png'
]
});
});
</script>

<style type="text/css">

.sweetMenuAnchor{
border-top: 1px solid #ffffff;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
border-top-right-radius: 4px;
-moz-border-radius-topright: 4px;
border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
color: #0071bb;
font-size: 24px;
font-weight: bold;
text-align: right;
text-transform: uppercase;
font-family: arial;
text-decoration: none;
background-color: #888888;
opacity: 0.6;
z-index: 9999;
}

.sweetMenuAnchor span{
display: block;
padding-top: 10px;
}
</style>


<ul id="exampleMenu">
<li><a href="YOUR_LINK">Home</a></li>
<li><a href="YOUR_LINK">Blog</a></li>
<li><a href="YOUR_LINK">CMS</a></li>
<li><a href="YOUR_LINK">Hire Me</a></li>
<li><a href="YOUR_LINK">Contact</a></li>
<li><a href="YOUR_LINK">My Apps</a></li>
</ul>


3. Make sure you replace YOUR_LINK with actual links on your forum. You can set them to external links too if you wish.

Please Note that help is only given for members who have Marked as Installed.

[Brandon Sheley]

screenshot or demo?

[Black Snow]

Demo is included in the file. open index.html

You don't see how it works with a screenshot.

[faisaly.com]

Works ok but i want on the right side not left...

[Black Snow]

Please Note that help is only given for members who have Marked as Installed.

[Spangle]

Please Note that help is only given for members who have Marked as Installed.

Hmm would like a couple of questions answered before installing

The tabs are a bit low down the page, can they be moved higher ?

The tabs are way too big, can they be made smaller ?

Will they inherit theme colours ?

[faisaly.com]

marked installed, but needed answer before I installed it cuz i wanted to know about position...

[Black Snow]

The tabs are a bit low down the page, can they be moved higher ?
Yes, find:
top: 200,
And change to 100 or whatever you want to get the higher or lower down.

The tabs are way too big, can they be made smaller ?
It requires some additional modification to reduce the size height wise if this is what you want to make smaller. I will post that later.

Will they inherit theme colours ?
As of now, no. Perhaps in a future update.

[Black Snow]

Works ok but i want on the right side not left...

This will require a lot of code changes. I will post another version soon.

[Spangle]

Yes, find:
top: 200,
And change to 100 or whatever you want to get the higher or lower down.


It requires some additional modification to reduce the size height wise if this is what you want to make smaller. I will post that later.


As of now, no. Perhaps in a future update.
Thanks for the quick reply, I will keep an eye on this one to see if they are made smaller and can inherit theme colours

[ahobilam]

Is there any mod or article to create a jquery menu for Forums like this one:
https://dl.dropboxusercontent.com/u/24348664/images/jquery-menu.jpg

[fxdigi-cash]

There are billions of sites about what you want, ahobilam...

examples:

http://www.htmldrive.net/categorys/show/1/Menu-Navigation
http://apycom.com/menus/1-dim-gray.html

http://www.studiodm.net/?p=379


I recommend the last site for you.

Cheers

[K4GAP]

After tweaking the images and other settings, I like this menu quite well.
Thanks for your efforts in sharing this.

[K4GAP]

Hmm would like a couple of questions answered before installing

The tabs are a bit low down the page, can they be moved higher ?

The tabs are way too big, can they be made smaller ?

Will they inherit theme colours ?

Yes

Yes

No

[Black Snow]

After tweaking the images and other settings, I like this menu quite well.
Thanks for your efforts in sharing this.
Thanks for the feedback. Do you mind sharing a link to your forum or posting a screenshot of what you have done?

[K4GAP]

Thanks for the feedback. Do you mind sharing a link to your forum or posting a screenshot of what you have done?

http://www.livinginkentucky.com/files/graphics/sweet.png

Reduced images to 1/2 their original size and changed padding setting. Also made images grey scale to match my style. And, removed one link as I didn't need so many.

[gil]

Hello
I also like the sweet menu right is it possible

[StonePilot]

So I have to download it to see if I want to download it? :-)

[MistViper]

Yeah, surely it should be possible to include a screenshot like many mods do here?

[xxfullclipxx]

Demo is included in the file. open index.html

You don't see how it works with a screenshot.

Should attach one to the actual post. i dont want to download stuff i may not have any use for you know. i am sure i am not the only one either. its not a huge deal breaker but it would make it better to be able to see what this is doing before even having to download it.