Miscellaneous Hacks - Sweet Menu

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.

[ahobilam]

Is there any mod or article to create a jquery menu for Forums like this one:

[fxdigi-cash]

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

examples:

PHP Code:

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]

Originally Posted by Spangle

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]

Originally Posted by GaryT

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]

Originally Posted by Black Snow

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

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]

Originally Posted by Black Snow

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.