Open Source Resources for Web Application Developers

Shopify - Online Store Builder
Follow Us on Social Sites
Subscribe RSS Subscribe Newsletter Like us on Facebook Follow us on Twitter Follow us on Google+
  • Home
  • News
  • Plugins
  • Design
  • Others
  • Books
  • About
15 Nov

Sexy Sliding Javascript Menu With Mootools

  • License Free, Menu
  • Leave a Comment

When trying to conceive ways in which space could be saved on a web page Andy Sellick decided a sliding menu would work well as shown in the images below. He decided to use mootools due to the smoothness of their effects, however, this could just as easily be developed in script.aculo.us or other JavaScript libraries.

sliding-menu.png

You can easily customise the look of the sliding menu by CSS. However there may be some CSS issues in Safari but as yet he haven’t had the time to fully test and fix potential bugs. The next pitfall to note is the lack of degradability with JavaScript turned off, however, this will be fixed very soon.

Requirements: Javascript Enabled and Mootools Framework
Demo: http://www.andrewsellick.com/examples/sliding-side-bar/
License: License Free

Share
Tweet
Sponsors
subscribe to our newsletter - weekly free resouces for web developers
follow us on social sites - rss, facebook, google+, Twitter
Subscribe RSS Like us on Facebook Follow us on Twitter Follow us on Google+
Related Resources
Create a Beautiful Sliding Menu with BySlideMenu

Create a Beautiful Sliding Menu with BySlideMenu

Create a Nice & Clean Sliding Login Panel in jQuery

Create a Nice & Clean Sliding Login Panel in jQuery

ddmenu – MooTools Based Context Menu

ddmenu – MooTools Based Context Menu

Another Nice Looking Multi-Level Context Menu in Mootools

Another Nice Looking Multi-Level Context Menu in Mootools

Highly Customizable Mootools ContextMenu Plugin

Highly Customizable Mootools ContextMenu Plugin

Dragging the Bar Over the Time-Line with Sliding Date Picker

Dragging the Bar Over the Time-Line with Sliding Date Picker

Comments
  • http://free-iphone-apple.blogspot.com mark

    Looks good.

  • http://plainbeta.com Brian Purkiss

    Nice…
    But it jumps for me – could it be because I’m on Safari?

  • http://www.XGhozt.com/ XGhozt

    Not ideal for professional use.

  • http://gamexe.net/ Daniel St. Jules

    @Brian: As stated in the post, there are some issues with the script in Safari, so that is most likely why you’re experiencing that “jump”.

    As for the menu: it’s a nice concept, although having text such as “Click here to expand menu”, or something of the like, would be a good idea in order to ensure that users understand how to use it. I’m not sure if I’d like the idea of using it for a primary navigational area, but it could probably be used effectively for displaying a contact form, donate to us form, etc. I may end up using it for that very purpose sometime. Thanks for sharing.

  • jannica

    looks good huh. fabulous!

  • http://www.thewallpapers.org Greg

    Is there also any jQuery variation of this scripts?

Open Source Resources for You

What we need is a list of the top quality resources, so that we can spend more time on our web development. WebAppers only picks the top quality web development resources for you.

© Copyright 2012 WebAppers | About | Archives | Privacy Policy | Advertise | Contact

Sponsors
Advertise Here
Search
By Keywords
30 Days / All Time
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • Professional Business Cards Made By Designers
  • Best Free Chrome Extensions for Web Developers
  • All of the Best Free WordPress Themes You Need
  • How to Create a Web App Admin User Interface
  • Nice List of Open Source Fish Eye Menu
  • Best Web Admin Templates
  • 25 Useful Blogs for Web Design & Development
  • Simple Javascript Progress Bar with CSS
  • 10 Useful & Quality Design Resources
  • Free Web Application Icons
  • How to Create High-Performance Code
  • Easy to Use, Drag & Drop Bootstrap Interface Builder
  • Tiny Responsive jQuery Slider without Fancy Effects
  • How to Create Realtime Multi-player Games in HTML5
  • Create an Amazon-like Navigation Menu with jQuery
  • A True Responsive jQuery Lightbox Plugin for Free
  • How to Use Web Workers for Image Manipulation
  • How to Make FullScreen Page Transitions with CSS
  • Pretty Neat jQuery Mobile Theme Based on Flat UI
  • Ghost: A Revolutionary Open Source Blogging Platform
Sponsors
Plugins
  • Advertisement15
  • Calendar47
  • Capture19
  • Charts55
  • Chat22
  • Demo Tour16
  • Gallery121
  • Maps30
  • Menu86
  • Polls9
  • Popup49
  • Tooltips42
  • Upload33
  • Video18
Desgin
  • Brushes11
  • Buttons25
  • Color Schemes24
  • Fonts47
  • Forms112
  • Icons108
  • Patterns24
  • PS Tutorials15
  • Stock Photos21
  • Tables25
Others
  • Announcement103
  • Best Collections6
  • Code54
  • eCommerce24
  • Framework215
  • Hosting13
  • Information238
  • Inspiration32
  • Legal Documents10
  • Reviews8
  • Security13
  • Social28
  • Sound16
  • Stats39
  • Tools293
  • Webmail14
Licesnes
  • BSD License67
  • CC License122
  • GPL License224
  • LGPL License40
  • License Free739
  • MIT License408
Sponsors
Advertise Here
Partners
NetDNA