Sliding Menu Revisited
Jul
19
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!
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
[...] Sliding Menu Revisited at Andrew Sellick [...]
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
Steve, just change “click” to “mouseover” in the javascript (side-bar.js, third line from the bottom. It used to be “hover” in the mootools version – I got it through trial and error and am extremely proud of my grand achievement.
I like this sidebar a lot, but have a few issues. I am using a smarty tag {menu} inside the side bar and it works nice. But every time I am on a page other than home and click the sidebar it halfway opens / glitches and closes and brings me to my home page. I can click the side bar and it opens correct… I can click a link but the sidebar closes right after. How can i make it from pushing me back to the home page when clicking? My 2nd problem is that it wont stay open after I click a link. .. Maybe someone can help me with this. Thanks
Well, I fixed the redirec-to-home problem I had a while ago. I had a blank link for the sidebar. I would still like to keep the thing open though after clicking and going to a different page. Any help would be appreciated.
I am Gream and like health! and you?,
I am Mrio and i have real bank informations about health,
Hi,
Excellent work ! I was searching the net for two days exactly for this one. Thank God I found it. I have few questions.
(By this time, you might have seen my site and the “feedback” widget there! I have some more sites which are going to be interlinked and I need a widget like this with links to the sites.)
As i am running my site in Joomla CMS, I am inserting code inside hte body tag in the teemplates page. With this widget, How can I implement? The same way?
I also want the position of the widget like the feedback widget which is on my page at present.
Thanks again for the wonderful widget and and your timely help.
-Joe.
Admin,
Grafixgallery.com
Hi Andrew,
Nice work.. Fantastic…
I love this sidebar sliding menu…
Can you help me to get the output as multiple sidebar with same effect .. look like
sidebar1
sidebar2
sidebar3
..
if you move mouseover on ‘sidebar1′ it will display a content, next if you move mouseover on ‘sidebare2′ means sidebar1 will close and sidebar2 will open like to all the sidebars…
Please help me to get the exact output.
Thanks in advance.
Senthil
Is there a way to get this to float down the page as a user scrolls?
Can anyone help with this?
is there a way where it will slide up and down while you scroll up and down the page?
Do you have that awesome menu on jQuery version???
I’m having the same problem with the blank link…on click with no modifications it takes me to the index of the site I’m working on… If I change the link to the page where the menu is located…if refreshs the page which makes the menu pop back in. I’m stumped…what should go into this blank link to make it work like the demo?
Has anyone figured out how to attach multiple tabs to the same page yet?