Any JQuery tutorials for this?
- Started
- Last post
- 8 Responses
- fadein11
Hi,
I was wondering if anyone has seen any tutorials on how to achieve the sliding panels on this site:
http://www.sheltonfleming.co.uk/…
(once you are inside the site - not the splash page)
A client I am working with wants a site with sliding panels - one on each side.
I basically just need a JQuery tutorial on how I would open each panel and automatically close the other one when the other is clicked.
2 panels one on each side of the screen.
I can find lots of tutorials on opening one panel but I really need the toggle effect so that the one closes when the other one opens.
Not sure I have explained it every well.
Thanks in advance.
- orrinward20
Have it so that it is only open while mouse is over it.
Also, this can be done entirely with CSS3 these days too.
.parentDiv .navigationDiv{display:none;-web... linear 0.5s;}
.parentDiv:hover .navigationDiv{display:block}I have a jsfiddle of this sort of thing working with a vertical expanding nav, but it's easy to reapply it to horizontal.
- jadrian_uk0
i think they check the width of panels to get a toggle effect or another prop as you can do markup toggle on such configuration
- the hide show event is driven with click not with over on the site, as both can be opened on hover but not on clickjadrian_uk
- rest it's ajax callsjadrian_uk
- 3030
Look after AJAX and DOM manipulation plus some effects.
- fadein110
Thanks Guys - I'm not too worried about the AJAX content loads etc - thats quite straightforward changing the div contents on menu clicks.
Its more the toggle between the panels opening and closing.
Does JQuery UI or another JQ plugin allow this functionality?
Any tutorial examples of this anywhere?
Thanks again.
- orrinward20
- this is close but with no animation - i need it to slide smoothly if possible. thanks thoughfadein11
- It has animation in webkit, just not done it for mozilla e.t.c
You can also achieve it with jQuery using .animate()orrinward2 - thanks matefadein11
- uan0
workaround: on open layer, first close all layers, then open the new one.
- elahon0
You could probably modify the positioning of the buttons (one left, one right) and the direction of the sliding from this:
http://tympanus.net/Tutorials/CS…
Tutorial and files:
- this looks fantastic but is it not still risky using HTML5? older browsers etc?fadein11
- fadein110
thanks for all your help - these are some great pointers