Sexy sliding JavaScript side bar menu using mootools
Apr
30
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
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
<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.
really nice article, thank you very much..
[...] JavaScript+CSS-based navigation menus in a brief overview. Among other things Slashdot Menu and Sexy Sliding Menu displayed [...]
Hi
Great navbar – loved it so much I decided to modify it into a subscription box. However I seem to have a problem when re clicking the tab. The content then reappears 200px down the page. Is this a bug cause it seems to be happening on the downloaded file as well.
Thanks again for a great nav – and can’t wait for the multitab to come out.