Posts Tagged ‘sidebar’
Hi All,
If you haven’t seen this awesome menu system check it out: http://www.andrewsellick.com/examples/sliding-side-bar-scriptaculous/
Or check out the how-to here: http://www.andrewsellick.com/44/sexy-sliding-menu-for-scriptaculous
I really thought this menu system was cool and with a few tweaks can function as integral part of the user experience on a website. Recently I had decided to leave the fabulous world of Prototype/Scriptaculous and move to JQuery. Mostly because it seems the industry has standardized around JQuery. It had some what of a learning curve, but it took about a day to really make the switch. Having to convert this sideBar script really helped with that process.
As a final note before I post the code. The animations aren’t exactly the same, but with JQuery you can create your own custom animations so feel free to modify as you wish. Changes are below!
side-bar.js:
var isExtended = 0; $(document).ready(function(){ $("#sideBarTab").click(function(){ $("#sideBarContents").animate({ "width":"toggle"},{duration:2000,queue:false} ); if(isExtended==0){ $('#sideBarTab').html($('#sideBarTab').html().replace(/(\.[^.]+)$/, '-active$1')); isExtended++; } else{ $('#sideBarTab').html($('#sideBarTab').html().replace(/-active(\.[^.]+)$/, '$1')); isExtended=0; } } ); });
So thats cool… In my script I also wanted somewhat accordion style items expanding within my sidebar so I use the following line of JS to dynamically add items into the sidebar (well sort of, without giving too much away).
$("#divIdToAppenedTo").append("<li><a class='header' href='#' onclick='$(\"#"+slug(name)+"\").animate({\"height\":\"toggle\"},{duration:1000,queue:false});'><div style='margin:10px 0 0 15px;'>"+name+"</div></a><div id='"+slug(name)+"' style='display: none; padding-left:15px;'>");
Woo enjoy!
Update: someone requested (via comment) the css for this. Please note you will need to modify width, colors, backgrounds, etc… I stripped down a ton of visuals in order to not release proprietary content: sb-package
Recent Posts
- ReactJS workflow with Mocha, JSDom, Gulp, Browserify, CoffeeScript and SublimeText
- Analysis of Spotify’s Discover Page
- Pro tip: DONT use mso conditionals for emails
- Passing variables into a function before and after it is called in JavaScript (Partial Application)
- Javascript Namespacing/Classes/Debugging etccc….
- A fresh start
Archives
- August 2014
- September 2013
- October 2012
- August 2012
- July 2012
- January 2011
- September 2010
- April 2010
- March 2010
- February 2010
- January 2010
- December 2009
- November 2009
- October 2009
- September 2009
- August 2009
- June 2009
- April 2009
- March 2009
- February 2009
- January 2009
- December 2008
- November 2008
- October 2008
- September 2008
- August 2008
- July 2008
- June 2008
WordPress, Entries (RSS) and
Comments (RSS)