Five Useful Interactive CSS/jQuery Techniques Deconstructed - Smashing Magazine
Advertisement With the wide variety of CSS3 and JavaScript techniques available today, it’s easier than ever to create unique interactive websites that delight visitors and provide a more engaging user experience. In this article, we’ll walk through five interactive techniques that you can start using right now. We’ll cover: Besides learning how to accomplish these specific tasks, you’ll also master a variety of useful CSS and jQuery tricks that you can leverage when creating your own interactive techniques. So, let’s dive in and start building more exciting websites! 1. The footer of David DeSandro’s website uses extruded text that animates on mouseover. View the demo First let’s set up some text (the code is copied from the original site): <span class="extruded">Extrude Me</span> And some basic styling (the code is copied from the original site): Here, we’ve applied some basic styles and added a text-shadow. text-shadow: #000 1px 1px, #000 2px 2px, #000 3px 3px; Styling the Hover State 2. 3.
15 Fresh jQuery Menu Plugins and Tutorials
We haven’t actually taken a look at any new jQuery menu plugins in quite a long time. For the most part, the plugins below are a great platform/canvas for you to build your navigation by offering fantastic customization options that allow you to style the system as required and control its functionality. Other plugins and tutorials, although beautifully crafted, do have limited customization options and may not be suited for a typical site. Remember, having a well organized and intuitive menu is key to any sites success. naviDropDown 1.0 Plugin The naviDropDown plugin allows you to create a simple drop down menu, utilizing hoverIntent, and jQuery’s own slideUp and slideDown effects. Drill Down Menu Plugin This plugin will take any standard nested list and turns it into an iPod-style drill down menu. Memu – A simple CSS & jQuery Menu This small and very easy to use jQuery plugin can be used with or without jQuery (if you don’t want any JS on your page, just get the CSS). Cool Animated Menu
30 CSS and Javascript Tabs Solutions
Tabs have been around for a long time, they are nothing new, but with so many sites (blogs, ecommerce sites, web apps…) needing to show as much content and navigation as possible, they have never been so relevant. They are the perfect web page tidying up solution for organizing cluttered content in a space-limited web page. Separating content into tabs keeps everything nice and compact, clutter free and are always at the ready should a user need it. In this round-up we have a variety of easy to use modern tabs solutions, techniques, tutorials and plugins, most of them make use of a variety of Javscript libraries (MooTools, jQuery…), but you will also find some innovative pure CSS solutions as well. Sweet Tabbed Navigation Bar using CSS3 Sweet Tabbed Navigation Bar using CSS3 → Demo → CSS3-Only Tabbed Area CSS3-Only Tabbed Area → Demo → Using CSS to Create a Tabbed Content Area Using CSS to Create a Tabbed Content Area → Demo → CSS3 Hover Tabs without JavaScript Sweet AJAX Tabs (jQuery) nanotabs
Orbit and Reveal: jQuery Plug-Ins For Image Sliders and Modal Windows - Smashing Magazine
Advertisement A visitor comes to your website all giddy to learn more about your product, when suddenly a snazzy slideshow loads with some snap. Impressed, they go to register and are greeted by a most elegant modal window. Crafting a polished and unique experience for your users is becoming ever more critical as the Web gets more overloaded. Today, we are thrilled to introduce two new jQuery plug-ins that were developed exclusively for Smashing Magazine readers to liven up your developer tool belts: Orbit, a new slider; and Reveal, a modal plug-in. Why Create Our Own? Quickly, before diving into the details, some background would be helpful. Flexibility We use these plug-ins for clients, internal projects, our apps and a number of other places. Have a look at a couple of our previous articles: Orbit: jQuery Image Slider First up is our new jQuery slider, Orbit. Let’s dive into the code, shall we? The Code Now we can quickly hook up the CSS that we need: Finally, let’s dig into the mark-up.
Image Zoom Tour with jQuery
Today we want to share a little zoom tour script with you. Showing a main image initially, we want to be able to zoom into certain parts of the image by clicking on tags, using another image for the closer view. This next step can contain other tags that again allow to show more images. We achieve the "zoom" effect by enlarging the current image and fading in the new one. View demo Download source Today we want to share a little zoom tour script with you. The images used in the demos can be found here: image1: City Crowd image1_5: Office image2: Ikea Room image3_n: Portimão Marina Background Pattern by on The HTML Structure For the HTML structure we will have a main container and each image inside of a div with the class “zt-item”: <img class="zt-current" src="images/imageX.jpg" /> is the image in each step. The position of the tags is defined in the style attribute and you can also add another size for it, too. Options
Basic Tips for Getting Started with jQuery Development
The jQuery programming library has dramatically changed the way we work online. Web developers are able to prototype animations and backend effects much quicker with fewer lines of code. This brings to the table a profound collection of functions which you can read about here. It doesn’t take long to figure out jQuery syntax, especially if you are fairly well versed using JavaScript. But if you are new to the language it shouldn’t take long to get started. Setting Up your Documents The first thing you’ll want to do is include the most recent version of jQuery. If you include an external document from Google this saves you time on each pageload. $(document).ready(function() { //do stuff }); The above block is using the jQuery $() selector syntax. Creating Functionality If you are struggling to understand how constructors are used to target elements, spend a bit of time browsing the jQuery tutorials section. Below is some crude HTML and jQuery code to display our alert box. Conclusion
