Animated Drop Down Menu with jQuery | ClarkLab View the effect Drop down menus are a really convient way to fit a large menu into a really small initial space. For a long time people have just used a form element for standard drop downs, but with minimal effort you can create a much slicker effect using jQuery and CSS. Step 1: The HTML Before we can do anything, we need to link our CSS file and our jQuery file in the header our of HTML document: These two files will contain our styles and the javascript effect library (duh), but before we can style or animate anything, we need to build the list itself. <ul class="menu_body"><br> <li><a href="#">About Us</a></li><br> <li><a href="#">Portfolio</a></li><br> <li><a href="#">Clients</a></li><br> <li><a href="#">Blog</a></li><br> <li><a href="#">Support Forums</a></li><br> <li><a href="#">Gallery</a></li><br> <li><a href="#">Contact Us</a></li><br> </ul> What we have here is as simple as it looks. Step 2: The CSS Next we need to give our list some style. Here’s what we just did.
50 Useful and Instructive CSS3 Tutorials: 2012 Editioncs Now that most browsers support the majority of the features CSS3 offers, it’s important for developers to catch up and be aware of the power of CSS3. Photoshop and JavaScript are slowly losing their significance because it’s become possible to echo the same results with just a few lines of code easier and faster than ever. The techniques that were new a year ago have become standard now. CSS3 is evolving fast and for that reason we’ve prepared 50 fresh, useful and instructive CSS3 tutorials from 2012. Text & typography 1. The idea in this tutorial is to rotate a part of a sentence. 2. In this tutorial you’ll walk through texturizing type from scratch – beginning with basic HTML and CSS, then creating a semi-transparent texture in Photoshop and implementing it on some headline text within a web page. 3. While CSS3 allows us to rotate letters, it is quite complicated to arrange each letter along a curved path. 4. 5. 6. One of the hot CSS3 skills for 2012. 7. Menus, navigation and sliders 1.
Jquery | Ganesh Click on the above image to land in the Lava Lamp Demo page. Then, hover over it and feel for yourself, the nifty effect that Lava Lamp offers. What you just experienced is nothing but the LavaLamp menu packaged as a plugin for the amazing jQuery javascript library. I personally believe that the effect rivals that of flash – Don’t you? Especially considering the fact that it is extremely light weight. Just so you know, it weighs just 700 bytes(minified)! Often I have noticed, that the credits are usually granted towards the end. As User Interface developers, we know that one of the first widgets our visitors use is a “Menu”. I hope you agree that a typical HTML widget consists of 3 distinct components. A semantically correct HTML markupA CSS to skin the markupAn unobstrusive javascript that gives it a purpose Now lets follow the above steps and implement the LavaLamp menu for your site. Step 1: The HTML In the markup above, “ul” represents the menu, and each “li” represents a menu-item.
8 Code Snippets for New Website Projects Working as a web developer often requires compromise and trying out new systems. Some of your code will turn out to be a flunk, and other codes will become staples in your development process. I have learned a lot about useful code snippets and how greatly these can affect your development process. In this article I’d like to share 8 bits of code which any web developer can use. 1. To get us started I have included my very basic HTML5 webpage template. Also I have included references to 2 Google-hosted scripts. <! 2. I learned about the CSS clearfix method years ago when just first getting into coding. You should copy my code below into any CSS document you’re using with floats in a layout. 3. Each web browser comes packaged with its own set of standard rules for styling documents. Typically web developers want to remove these preset values so that each browser will render the webpage exactly the same. 4. 5. 6. 7. 8. Thankfully the audio and video tags share a similar syntax. Conclusion
Create a Slick Tabbed Content Area using CSS & jQuery One of the biggest challenge to web designers is finding ways to place a lot of information on a page without losing usability. Tabbed content is a great way to handle this issue and has been widely used on blogs recently. Today we're going to build a simple little tabbed information box in HTML, then make it function using some simple Javascript, and then finally we'll achieve the same thing using the jQuery library. Step 1 First things first, we need something that looks awesome. So a quick trip to Photoshop and voila we have a nice mockup of what our tabbed component should look like. Step 2 The first thing to do when building of course is to get a rough idea how you are going to do it. Have a container <div> which we'll place everything inside of. SO to summarize, it'll be something like this: Don't worry if looking at that image doesn't immediately make you think of that structure. So now that we have a picture in mind of how to build our structure, let's get to it! Step 3 Step 4 Step 5
jQuery convertion: Garagedoor effect using Javascript Today I finally found the courage to go and try jQuery. After getting some people say: “You should use jQuery instead of scriptaculous.” I began thinking. What is the reason I choose script.aculo.us again? After 5 minutes of reading about selectors in jQuery and 15 minutes of coding it was born. For all the jQuery lovers: Here is the Garage Door effect. Download jQuery Garage Door zip-archive Example Open the jQuery Garage Door example Since this article is a redo of Garagedoor effect using Javascript I’ll just make it so that it fits jQuery. An example of the GarageDoor effect in work is found here: Download the following archive containing everything you need: Unzip the contents of the archive and upload the contents to your server, the set folders can be adjusted to your needs. First we need to make the script ans style of the GarageDoor work.
HoverAccordion jQuery Plugin A long while back, I created a small jQuery Plugin called "HoverAccordion" - basically your ordinary accordion, but with a twist: users don't have to click to open one item, they just move the mouse over it. In the touch era this seems out of date, and it is, but since the script appears in a number Accordion Halls of Fame (yes, those exist), I decided to include it here. Yet Another Accordion Script I actually made the plugin to serve as a menu, but it could also work as a regular accordion for displaying different types of content within a page. It was important to me to require as little customization of the list code in order for the plugin to work, i.e. Download HoverAccordion Script and Example Code (.zip) Usage: This plugin requires an unordered list with two levels. <ul id="identifier"><li><a href="#">Item 1</a><ul><li>Subitem 1a</li></ul></li><li><a href="#">Item 2</a><ul><li>Subitem 2a</li></ul></li></ul> $(document).ready(function(){ $('#identifier).hoverAccordion(); });
Sliding Jquery Menu By using our site, you consent to this privacy policy: This website allows third-party advertising companies for the purpose of reporting website traffic, statistics, advertisements, "click-throughs" and/or other activities to use Cookies and /or Web Beacons and other monitoring technologies to serve ads and to compile anonymous statistics about you when you visit this website. Cookies are small text files stored on your local internet browser cache. A Web Beacon is an often-transparent graphic image, usually no larger than 1 pixel x 1 pixel that is placed on a Web site. Both are created for the main purpose of helping your browser process the special features of websites that use Cookies or Web Beacons.
Animated Menus Using jQuery » ShopDev Website Design Blog I recently stumbled upon Dragon Interactive (dragoninteractive.com). It’s a pretty well designed site. However, the pièce de résistance is their rather cool animated menu. Designing The Sprite To begin with, you will need to build your design in Adobe Photoshop - or some other illustration program. The XHTML Markup Here is the XHTML markup that is used in the demo: As you can see, an unordered list is used to structure the menu. The CSS For the demo, I assigned the repeating image as a background image for the <ul> element. Notice that in the above CSS, “list-style:none;” is used to prevent styling the list using the default bullet point format. Now we get to the good stuff! Each column represents a different link. This is because the “Home” button was designed such that it has a height of 81px and a width of 159px. In the above code, we position the background image to the top left. We will now need to write some CSS for each individual link. We now need to create the “hover” state.
trepmag/jrac - GitHub Cloud Zoom Jquery Copyright © 1999-2012 GoDaddy.com, LLC. All rights reserved. *One FREE .COM, .CO, .NET or .ORG with purchase of a new 12-, 24- or 36-month website builder plan. Plus ICANN fee of $0.18 per domain name per year. + New .COMs $7.99/yr plus 18 cents/yr ICANN fee. jQuery plugin: Easy Image Zoom I have been working on a little script for a client of mine, that required product image magnification. The task was to create a script that will allow users to see large details of the product while moving cursor over medium sized image. During the process I decided to create a jQuery plugin and share it with you guys! Just as with all my script I try to keep things as lightweight as possible, and most important, as customizable as possible. Take a look at the demo or Download the plugin Introduction First I suggest you check out the demo to see what the plugin is all about. Markup I usually start this section of my articles with the same sentence: "the markup couldn’t be simpler" The main idea behind this and other plugins I write is – keeping the markup as simple as possible. All you need for this plugin to work is anchor element containing the small image linking to the large image, but this structure is required: The script (and CSS) takes care fo the rest. Options id parent append preload