background preloader

Convert a Menu to a Dropdown for Small Screens

The Five Simple Steps website has a responsive design with a neat feature. When the browser window is narrow, the menu in the upper right converts from a regular row of links into a dropdown menu. When you're on a small screen (iPhone shown here) and click the dropdown, you get an interface to select an option where each option is nice and big and easy to choose. That sure makes it easier to pick a place to go than a tiny link. The HTML The HTML for these two menus is different. Let's go with that for now. The CSS By default we'll hide the select menu with display: none;. Then using media queries, we'll do the switcheroo at some specific width. But now you gotta maintain two menus? Well yeah, that's one concern. Using jQuery, we can do that with just a few lines of code: Then to make the dropdown menu actually work... But aren't dropdown menus kinda obtrusive? Kinda. Demo & Download View Demo Download Files Video Variations Share On

Navigation Menu Solution for Small Screens with jQuery Plugin | Tutorials Nowadays, websites are not only being accessed from desktop. We can access websites from tablet or mobile devices anytime and anywhere. Therefore, a front-end web developer must create website that is compatible to all screen resolutions, from desktop to mobile devices. Here comes Responsive Web Design. When converting theme to support responsive layout, I always find a problem: how to fit the long menu into a small screen? We can dynamically create the dropdown menu from the original using some help from jQuery. With the help of jQuery when the user is on a small screen and clicks the dropdown menu, they will get an interface to select an option that is nice and easy to choose. I created a jQuery plugin for this script and you can download it at GitHub. About Author Arif Widipratomo Arif is our Front-End Web Developer.

TinyNav.js · Convert navigation to a select dropdown on small screen 70+ Awesome jQuery Slider Plugins Slider are very useful and increasingly popular web page elements used for highlighting important content. By using a jQuery slider plugin, one can create amazing HTML slider effects with fancy animations of content elements like text and images. jQuery takes care of the difficult aspects like browser support and typically when using jQuery plugins it can be done with very little coding effort. This is the reason why jQuery sliders and jQuery banner slideshow scripts have become very popular on most types of websites. They are are typically used to feature multiple products, news, video etc. without taking up a lot of space on the pages. In fact, we see sliders on most news and business websites today and they are placed on the most important location over the fold on the front page. The jQuery library has undoubtedly made the life of web developers easier and made it possible for non-experts to do fancy stuff themselves. Advertisement Article Index Camera Slider – MORE INFO

Zebra_Datepicker, a lightweight datepicker jQuery plugin Get the latest updates on this jQuery plugin via RSS Zebra_Datepicker is a small, compact and highly configurable datepicker jQuery plugin, meant to enrich forms by adding the datepicker functionality to them. This jQuery plugin will automatically add a calendar icon to the indicated input fields which, when clicked, will open the attached datepicker. Features: Thanks to Aeron Glemann for building a datepicker for MooTools where he came up with the idea of disabling dates using a syntax similar to cron’s! Requirements Zebra_Datepicker has no dependencies other than jQuery 1.5.2+ but requires that the page you are using the plugin on to have a strict doctype like How to use First, load the latest version of jQuery either from a local source or from a CDN. Load the Zebra_Datepicker jQuery plugin Load one of the available themes (default, metallic, bootstrap) Now, within the DOM-ready event, attach the Zebra_Datepicker plugin to a <input type=”text”> control Demos 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11.

15 Great Examples of Websites using jQuery Masonry jQuery Masonry is a dynamic grid layout plugin for jQuery. Think of it as the flip-side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall. It’s suitable for websites with a stream of pictures. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. Create Your Own Share Buttons With Sharrre People are now members of multiple social networks be it Facebook, Twitter, Google Plus, Linkedin etc. All of these social networks have created their own button which makes it really easy for your visitors to share the current page with their friends and followers. Facebook Like Button Twitter Tweet Button Tweet Google Plus +1 Button Everyone knows what these buttons look like, this is good as people understand how to use them and what they will do. But with every website using the same buttons they aren't very original. Why not create your own Social sharing buttons? The reason is because these social sharing buttons comes with a social proof feature, showing you exactly how many other people have shared this page. Therefore if you want to make your own social sharing buttons you really need to include this feature of displaying how many shares your page has. Sharrre jQuery Plugin Using sharrre you can create your own social share buttons to fit your own designs. Browser Support Download Demo