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