Sexy sliding JavaScript side bar menu using mootools 30Apr07
When trying to conceive ways in which space could be saved on a web page I decided a sliding menu would work well as shown in the images below.
Now for this solution I decided to use mootools due to the smoothness of their effects, however, this could just as easily be developed in script.aculo.us or other JavaScript libraries.
code
The code is very simple and is as follows:
CSS
body{
position:relative;
paddign:0px;
font-size:100%;
}
h2{
color:#FFFFFF;
font-size:90%;
font-family:arial;
margin:10px 10px 10px 10px;
font-weight:bold;
}
h2 span{
font-size:105%;
font-weight:normal;
}
ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
li{
margin:0px 10px 3px 10px;
padding:2px;
list-style-type:none;
display:block;
background-color:#DA1074;
width:177px;
}
li a{
width:100%;
}
li a:link,
li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:70%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0px;
width:100%;
}
li a:hover{
color:#FFFFFF;
text-decoration:underline;
}
#sideBar{
position: absolute;
width: auto;
height: auto;
top: 200px;
right:-7px;
background-image:url(images/background.gif);
background-position:top left;
background-repeat:repeat-y;
}
#sideBarTab{
float:left;
height:137px;
width:28px;
}
#sideBarTab img{
border:0px solid #FFFFFF;
}
#sideBarContents{
overflow:hidden !important;
}
#sideBarContentsInner{
width:200px;
}
HTML
<div id="sideBar">
<a href="#" id="sideBarTab">
<img src="images/slide-button.gif" alt="sideBar" title="sideBar" />
</a>
<div id="sideBarContents" style="width:0px;">
<div id="sideBarContentsInner">
<h2>side<span>bar</span></h2>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</ul>
</div>
</div>
</div>
As shown the code is not overly complex. The HTML comprises a containing DIV (with an ID of sideBar), then within this we have a linked tab image (with an ID of sideBarTab) followed by the contents of the side bar contained in a DIV (with an ID of sideBarContents) and sub contained within another DIV (with an ID of sideBarContentsInner).
The sideBarContents DIV has an inline style applied setting the width to zero. This is to allow the JavaScript to resize the region using mootools (Some browsers are a bit buggy when trying to change styles that are set in an external stylesheet). This DIV is also set to have an overflow hidden producing the effect that the content is sliding in.
Points to note within the CSS include the width set on the sideBarContentsInner DIV. This width should be adjusted as required to meet your deign requirements (It is set to 200px for the purpose of the demonstration).
Also to reposition the bar simply adjust the postioning styles applied on the sideBar DIV (i.e. right and top).
Finally you will need to include mootools.js and side-bar.js to the head of the document in the order shown for this to work. Have a play with the demo below and download the code.
demo
The sliding JavaScript side bar menu demo.
pitfalls
Currently with this version I believe there may be some CSS issues in Safari but as yet I haven’t had the time to fully test and fix potential bugs.
The next pitfall to note is the lack of degradability with JavaScript turned off, however, this will be fixed as stated below.
future
I am planning to develop a new version of the side bar that will degrade gracefully back into the structure of the site when JavaScript is turned off. This will provide a more accessible version.
Further improvements include adding a key press event to the tab allowing users without a mouse to produce the same effect (again important for accessibility).
Other considered enhancements include the introduction of multiple tabs. This would allow for greater “storage space”, whilst also providing flexibility and scalability.
download
Download the sliding JavaScript side bar menu.
- Advance Vista Styled CSS Menu
- JavaScript Clone Object Function
- JavaScript GUID Generator
- Playstation 3 (PS3) and BTHomeHub network issues (80710723)
- HTML Forms on the fly
- Script of the week
- PHP UK Postcode Validation
- What makes a successful blog?
- Free SEO internet marketing book
- JavaScript Table Row Highlighter Class using Mootools
- Sexy Sliding Menu for script.aculo.us -
Posted by and lamictal - Simple JavaScript Slide Show Using script.aculo.us -
Posted by speshdiv - Sexy sliding JavaScript side bar menu using mootools -
Posted by 「side-bar.js」 設置説明 javascript | 頭脳外部メモリー 「独学で趣味を満喫」 - Sexy sliding JavaScript side bar menu using mootools -
Posted by Sexy Sliding Javascript Menu Bar « DesignbyNoble - Sexy sliding JavaScript side bar menu using mootools -
Posted by 60 More AJAX- and Javascript Solutions For Professional Coding | Web Tools | Web Design & Graphic Design Blog - facebook application development part one -
Posted by Hurry
I don’t think onClick is particularly intuitive. Considering it’s out the way (by some measure) wouldn’t it make more sense to react on hover?
yeah thats very possible. The only thing I was trying to avoid was for the slide to start without the user knowing what was going on. With so many flash banner adds that stretch over the content totally stopping users from reading the copy I decided that I didnt want to provide an on hover just incase it looked a bit spamy. I get your point though and it can be easily implemented. Maybe a better more eye catching deign is the way to go?
Dear Sir or Madam, i really liked you sliding menu! although could i use it for my webside works? and how could i change the manu position from right to left and middle to top like? also how to change the menu images inot others? THANKS EVER SO MUCH!!!
wow..this is sexy..great work.
(pink bLack)
Wow this is a nice (sexy) menu.
Good Work
I have a question what modules of mootools did you use, of i have a another application of a slideshow so that i dont have double modules..
Hello, this is awesome! I too would like to know which modules were used; as to not interfere with other mootools implementations.
Is there any way to get the tab to follow the content box when the slide menu is on the left side. Currently it will follow the content box when positioned to the right side of the screen but not the left. Thanks.
I Andy
I would like to start the slidebar open and then onclick closed.
I try to modify in the css #sidebar - right: 250px but not work well.
Please you have suggestion.
Thanks
Euugh! Sliding menus are as bad as blinking text and sliding banners, they belong in 1997 not 2007
Just to say it doesn’t work with Konqui.
With CSS hype, it was easyer to use NOT( FF && IE ) navigator. With DIY2.0 it seem’s to be 90’s come again.
Here about your site(side-bar.js) in Javanese!
http://youmos.com/news/side_bar_menu_js
Thanks!
Thanks for the link youmos.
Wow… great job
Thanks…
There’s a little typo in the css :
body{padding:0px; /* paddign^^ */}
and a bug on opera fixed by a :
#sideBarContents{float:left;}
Really good mootools use… I like it, and will use it
how to add it in php-fusion , same like here :
http://www.phpfusion-themes.com
wow!! … amazing menu .. thanks a lot!!
Hi Andy,
re: degrading with JS turned off
Why don’t you just collapse the sidebar menu via mooTools when the page is initially loaded. That way when Javascript is off the side menu will be expanded and usable as per usual.
I’ve used that technique quite a few times for jQuery snippets I’ve done and it always works a treat. JS users get what you intend, everyone else gets a static version that works just as well.
Just found that the right: -7px will result in a scrollbar on the bottom of the browser. Adjust it to 0 and it works nicely.
Additionally, when using this on a templated page, a click on the opener will send you back to index.php as the link event is not stopped. So, simply replace the event click like this:
$(’sideBarTab’).addEvent(’click’, function(event) { event = new Event(event).stop(); extendContract()});
This will prevent the link to get passed through.
I like it so far. You can always improve it by adding a way to add more child menus?
Hello folks. While redesigning my blog I discovered the Sexy sliding bar. made a little change in the js and html to suppress the Safari problem. Probably not the best solution but efficient: just put the minimal width at 1px. Tested on Safari 2 and Firefox 2 (OSX Tiger)
in html code:
in side-bar.js:
if(isExtended == 0){
sideBarSlide(0, height, 1, width);
…
else{
sideBarSlide(height, 0, width, 1);
…
Can somebody please teach me how to get this amazing menu????
Jaliefa
Just download the sample provided, it all works and you can do whatever you like with it.
hello people if you need more about css you can check http://webmaster-labs.blogspot.com/ here.
what’s a cool!! thank you.
This is a great menu and I’m having great fun playing around with it, so thank you very much!
However, do you know if there is a way to “float” or “position” the menu above layers without having to use position:absolute?
The reason being is I’m designing a fixed width site and not a fluid one and would love the menu to sit on my right hand column.
Cheers
Also, is there any chance of revising the menu for a “top bar” so that it comes in from the top of the page?
Making the bar come from the top of the page should not be very difficult and I am working on it over the next week or so, so come back soon to see the results.
and opera?????
Cheers Andy, look forward to it.
Efwe, see Alcarin’s comment regarding Opera here, http://www.andrewsellick.com/35/sexy-sliding-javascript-side-bar-menu-using-mootools#comment-3100
Hi,
great work - lovin’ it.
I would also be interested in a “mouseover” version.
Keep up the good work.
Cheers
too…………good…………
Hello,
Great script, I’ve used it on my site.
One question here, how to remove the ‘#’ in the URL when clicking the menu?
e.g., http://gallery.zzvo.com/main.php#
remove the ‘#’ at the end of the URL?
Thanks.
Hi Jesse,
Great implementation. Looks fantastic. To remove the # you need to simply stop the event. This can be achieved with the following example:
$(’element’).addEvent(’click’, function(e){
e = new Event(e);
e.stop();
});
Hope that helps. I’m currently rewriting the code into a class and trying to include as many of the features that have been requested as I can so come back soon to see the all new Sexy Sliding side bar.
Hi, andy
Thanks for your encouragement.
Code added, Problem solved. Take a look at my gallery site:
http://gallery.zzvo.com/
I have a suggestion, can you turn it to supporting auto HEIGHT?
I’ve removed some features, coz my menu is dynamic and unfixed height.
It caused problem with unfixed height. Fixed width is ok, no problem.
Looking forward to the new code.
It works great and I am very happy that I got it here thanks a lot
Very nice, thanks for the work.
I want to use this on my site with a custom image, but in IE the image doesn’t show, and in FF the arrow doesn’t flip. How can I get it to flip when opened?
Thanks in advance.
Nevermind- I got it. Thanks for for the fantastic sidebar!
hey man,
Thank you very much for the wonderful… Slide-in-bar.. It is awesome and simply cool…
Thanks a lot..
regards
nair
Cool menu and I would love to use it only if I could figure it out. Is there a way to move this tab from the side of the page. I have a center element or a container that has margin: auto for left and right. So to hang this tab menu off this element causes it to push this center container down. How do I work around this without making the container position: absolute?
I must say, this is one of my favourite tutorials. Check the website that I made. I tried my best to change the look to give it a more unique style. I couldn’t change the pink because its one of my favourite colours! And no, it doesn’t belong to the ’90s old fashion design. It only depends on how you use it. Am I right Andrew?
Hey everybody,
Very nice job but how can I do to make multiple slide-in bar?
Thx
Regards
cool work. very nice sliding movement
Great work, Andrew!
Here is a jQuery version for the Sexy Sidebar.
diffucult
Great menu!
Do you have an idea when you will be working on the your future plans for this menu (accessibility optimization etc.)? I am working this menu into a clients site right now but accessibility is very important to him especially the visibility of the menu when javascript is off.
Thanks!
any update andy?
has anyone managed to have more then one of these on a single page??
thanks
thanks