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.

[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]

Originally Posted by Black Snow

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]

Originally Posted by Spangle

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.

Originally Posted by Spangle

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.

Originally Posted by Spangle

Will they inherit theme colours ?

As of now, no. Perhaps in a future update.

[Black Snow]

Originally Posted by faisaly.com

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]

Originally Posted by Black Snow

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