vb.org Archive - Miscellaneous Hacks

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- Modification Graveyard (https://vborg.vbsupport.ru/forumdisplay.php?f=224)

- - Miscellaneous Hacks - Sweet Menu (https://vborg.vbsupport.ru/showthread.php?t=297901)

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:

Code:

                <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.

Demo is included in the file. open index.html

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

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

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

Quote:

Originally Posted by Black Snow (Post 2420581)

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 ?

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

Quote:

Originally Posted by Spangle (Post 2420584)

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

Yes, find:

Code:

top: 200,

And change to 100 or whatever you want to get the higher or lower down.

Quote:

Originally Posted by Spangle (Post 2420584)

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.

Quote:

Originally Posted by Spangle (Post 2420584)

Will they inherit theme colours ?

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

Quote:

Originally Posted by faisaly.com (Post 2420574)

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.

Quote:

Originally Posted by Black Snow (Post 2420593)

Yes, find:

Code:

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

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

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

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

Quote:

Originally Posted by Spangle (Post 2420584)

Yes

Yes

No

Quote:

Originally Posted by GaryT (Post 2429267)

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?

Quote:

Originally Posted by Black Snow (Post 2429297)

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/file...hics/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.

Hello
I also like the sweet menu right is it possible

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

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

Quote:

Originally Posted by Black Snow (Post 2420477)

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.

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01388 seconds Memory Usage 1,776KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (3)bbcode_code_printable (1)bbcode_php_printable (10)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (20)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: