[b]update:[/b] I improved the onload function so that it is compatible with the tracker code [b]update 2:[/b] It floats now [b]Sexy profile in 5 steps[/b] Works in IE & FF. Please check for functionality w/ Opera, I've also included a bug fix in the CSS for Opera, so it should work, but as usual, I'm not sure since I don't have Opera browser [b]Screenshot:[/b] [img]http://h1.ripway.com/shakiro/images/sidebar.JPG[/img] [b]Preview: [url=http://profiles.friendster.com/shakiro][sub]+rep me[/sub][/url][/b] [b]Step 1:[/b] Download this [url=http://www.andrewsellick.com/examples/sliding-side-bar/sliding-side-bar.rar]winrar file[/url] [quote][b]contents:[/b] * mootools.js * side-bar.js * index.html (the original example of the code) * some default images for the tab[/quote] [b]Step 2:[/b] upload [color=green][b]mootools.js[/b][/color] and [color=blue][b]side-bar.js[/b][/color] [b]Step 3:[/b] create a subfolder which you will call [b]images[/b], to hold the tab images & background You can upload and save these 3 images to replace the defaults found in the winrar file: [quote] [img]http://h1.ripway.com/shakiro/images/background.gif[/img] [b]background.gif[/b] * this has a transparent left area, so that you won't see a white space below the tab [img]http://h1.ripway.com/shakiro/images/slide-button.gif[/img] [b]slide-button.gif[/b] * inactive tab - dark grey and blue w/ transparent corners [img]http://h1.ripway.com/shakiro/images/slide-button-active.gif[/img] [b]slide-button-active.gif[/b] * active tab - dark grey and blue w/ transparent corners [align=center]** save as the same names in bold[/align][/quote] [b]Step 4:[/b] copy & paste this code into your js <">[b]Now:[/b] Edit the paths to [color=green][b]mootools.js[/b][/color], [color=blue][b]side-bar.js[/b][/color], and [color=red][b]slide-button.gif[/b][/color] for the image in the [b]sexy[/b] var to where you've uploaded them [b]Also:[/b] Edit the links and hrefs for your menu. They are in the [b]sexy[/b] variable [b]You can:[/b] add or remove as many links as you want. just follow the following format for each link: [quote]<li><a href="#">Link One</a></li>[/quote] [b]The 5th & Final Step:[/b] The CSS * insert the following body style into your CSS: [quote]body { [b]position:relative; padding:0px;[/b] }[/quote] * but if you already have a body style in your CSS, just insert this part into it [quote][b]position:relative; padding:0px;[/b][/quote] * copy & insert this anywhere in your style sheet(CSS): <"> [b]Also:[/b] if you want your links to have a different background color, change the [b]#33ccff[/b] from the code you've just pasted [b]That's it! You're done Preview: [url=http://profiles.friendster.com/shakiro][sub]+rep me[/sub][/url] credits: [url=http://www.andrewsellick.com/35/sexy-sliding-javascript-side-bar-menu-using-mootools]www.andrewsellick.com[/url] - for the script me - for profile integration [img]http://h1.ripway.com/shakiro/69.gif[/img][/b]

Last edited by shakiro214 (2008-05-31 11:59:44)