Sliding Menu Revisited

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

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?