A need to start off by thanking Heather who very kindly reworked the Sexy Sliding Menu to work from the left hand side and here it is.
code
html
There arent many changes here from the original in fact the only change within the HTML was to move the tab after the tab content region so as to align the tab on the right hand side of the content.
<div id="sideBarContents" style="display:none;">
<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>
<a href="#" id="sideBarTab"><img src="images/slide-button-left.gif" alt="sideBar" title="sideBar" /></a>
</div>
css
The CSS again also did not require a great deal of modification. The main changes were to absolutely position the tab and its contents to the left hand side and repositioning the contents background image.
Simple image amends were made and can be found in the download at the bottom of this article.
body{
font-size:75%;
}
a{
outline: none;
}
a:active{
outline: none;
}
#sideBar{
text-align:left;
}
#sideBar h2{
color:#FFFFFF;
font-size:110%;
font-family:arial;
margin:10px 10px 10px 10px;
font-weight:bold !important;
}
#sideBar h2 span{
font-size:125%;
font-weight:normal !important;
}
#sideBar ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#sideBar li{
margin:0px 10px 3px 10px;
padding:2px;
list-style-type:none;
display:block;
background-color:#DA1074;
width:177px;
color:#FFFFFF;
}
#sideBar li a{
width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0px;
width:100%;
}
#sideBar li a:hover{
color:#FFFFFF;
text-decoration:underline;
}
#sideBar{
position: absolute;
width: auto;
height: auto;
top: 140px;
left:0px;
background-image:url(images/background-left.gif);
background-position:top right;
background-repeat:repeat-y;
}
#sideBarTab{
float:left;
height:137px;
width:28px;
}
#sideBarTab img{
border:0px solid #FFFFFF;
}
#sideBarContents{
float:left;
overflow:hidden !important;
width:200px;
height:320px;
}
#sideBarContentsInner{
width:200px;
}
</style>
demo
Please have a look at the Sliding Menu Revisited demo.
download
Please have a look at the Sliding Menu Revisited code.
Hope this helps enjoy!
15 Comments Received
I was playing around with this a bit.
Making the element with “sidebar” id position:fixed; and setting the HREF of the A element to “#void” looks really nice.
It stays on the side as you scroll and doesn’t change the scrolling position when clicked.
A little bug: It flicks when motion is finished in Safari 3.0.3 under OS X.
Best
hi
the menis are awesome, but i have few queries,
the Style code u r placing in the body of the html, can we put it in a .cc file and call in from the body tag, b’cause it will be easy to do modification in one file rather than in all the pages.
one more thing can we use images for the links also as used for the header.
Thanks
sorry i meant in a .CSS file
Very nice.. You have helped me lot. Thanks a lot
Hey, i have a question, is it possible that it only slides to the left?
So that it doesn’t slide up on opening and closing.
Thanks in advance.
Jonathan
How can I set cookie so that when the browser refreshes, the menu state stays the same until the user click on the menu again?
Thanks.
Andrew,
Really nice!. Btw, I just corrected that flickering by setting the z-index to a higher value of ’sideBar’ (i.e. the embracing the whole widget) to a higher value (in my case 3).
Last, I had a problem when trying to embed the code in a web page. Namely in the lines:
$(’sideBarTab’).childNodes[0].src = $(’sideBarTab’).childNodes[0].src.replace(/(\.[^.]+)$/,’-active$1′);
and
$(’sideBarTab’).childNodes[0].src = $(’sideBarTab’).childNodes[0].src.replace(/-active(\.[^.]+)$/,’$1′);
for some reason I do not understand, Firefox introduced a childNode just before the “img” child (of type “text”, but with empty properties). I just solved it by doing the same thing as the lines above explicitly,
$(’sideBarTab’).getElementsByTagName(”img”)[0].src = $(’sideBarTab’).getElementsByTagName(”img”)[0].src.replace …
and
$(’sideBarTab’).getElementsByTagName(”img”)[0].src = $(’sideBarTab’).getElementsByTagName(”img”)[0].src.replace(/-active(\.[^.]+)$/,’$1′);
resp.
Thanks
I also had to make this adjustment for Firefox 2. I’m assuming the problem was introduced with newer versions of prototype.js. I see that the demo sliding tab doesn’t error in Firefox 2 using prototype 1.5. It errors using the latest prototype release and requires the above or you get an error.
STUMBLED!
Worthy enough for my vote:
http://www.newsdots.com/tutorials/sliding-menu-revisited-at-andrew-sellick/
I’m just wondering how I can configure this script to have it open - rather than closed as it is by default - when a visitor accesses the website? I would truly appreciate any help!
why did you choose to use prototype and effects instead of mootools for this redesign? is it possible to make these files work for the right floating side or is mootools necessary for that? I’ve tried to modify this but it doesn’t float over top.
I was getting some error with mootools in my websites where ‘undefined’ was repeated over and over again.
is there a simple way to make this go in and then come back out on it’s own without clicking?
what about multiple tabs?
is there a way to add more than one tabs?
thanks
Pingback & Trackback
Leave A Reply