CSS vertical menu. How To Create a Pure CSS Dropdown Menu. With the help of some advanced selectors a dropdown menu can be easily created with CSS. Throw in some fancy CSS3 properties and you can create a design that was once only achievable with background images and Javascript. Follow this tutorial to see the step by step process of building your own pure CSS dropdown menu. The menu we will be creating features two sub categories that appear once the parent link is activated by a hover. The first series of sub-links appear underneath main nav bar, then the second series of links fly out horizontally from the first dropdown.
View the pure CSS dropdown menu demo <nav><ul><li><a href="#">Home</a></li><li><a href="#">Tutorials</a></li><li><a href="#">Articles</a></li><li><a href="#">Inspiration</a></li></ul></nav> First up we’ll need to create the HTML structure for our CSS menu. The secondary sub-menu is nested under the “Web Design” option of the first sub-menu. Let’s begin the CSS by getting the basic dropdown functionality working. CSS Tabs and CSS Navigation Menus Showcase (over 70 entries so far) Using jQuery for Background Image Animations.
After reading Dave Shea's article on CSS Sprites using jQuery to produce animation effects, I felt like playing around with things to see what could be done but accomplish it with a simpler HTML structure (no need for adding superfluous tags) and simpler code, too. Changing the position of the background image felt to be the best approach to creating the type of effect we're looking for (and I'm not the first to think so: see the examples at the end of this article). jQuery is a great library for this type of task but out of the box, it can't animate background position properly because of the need to animate two values instead of just one (too bad not all browsers implemented the non-standard background-position-x and -y like Internet Explorer).
You'll have to use the Background-Position plugin that is linked in the demo (the original plugin is no longer available on the jQuery site). Previous versions didn't support negative or decimal values properly. The HTML The Basic CSS The Image. Animated navigation items using jQuery — Tyssen Design. Dave Shea recently published an article on A List Apart (ALA), CSS Sprites2 – It's JavaScript Time', about how to use jQuery to create the effect of animated rollovers on navigation items. The technique he outlines makes use of the same image replacement method as outlined in ALA's original Sprites article.
The problem with this method however is that it uses a large negative text-indent to remove the default text from screen, and with images turned off in the browser, you don't see anything. This has accessibility implications not only from the perspective of those with disabilities, but also for those who deliberately turn images off, i.e. people on slower connections or those using handheld devices who are trying to limit the amount of information downloaded to their phone. When I do use image replacement, I prefer a method which leaves the text on screen when images are turned off – the Gilder Levin Ryznar Jacoubsen IR method, which I've written about before. And the javascript: CSS Sprites2 - It’s JavaScript Time. A sense of movement is often the differentiator between Flash-heavy web sites and standards-based sites.
Flash interfaces have always seemed more alive—responding to the user’s interactions in a dynamic way that standards-based web sites haven’t been able to replicate. Lately that’s been changing, of course, with a resurgence in dynamic interface effects, helped along by JavaScript libraries that make it easy—libraries such as Prototype, Scriptaculous, Moo, YUI, MochiKit (and I could go on). It’s high time to revisit the CSS Sprites technique from four years ago, and see if we can’t interject a little bit of movement of our own.
The examples below demonstrate inline CSS Sprites2, the technique we’ll be covering in this article: Enter the jQuery#section1 We must note the non-trivial extra kilobytes that the library will add to your initial page loads. As for other JavaScript libraries? Basic HTML and CSS setup#section2 So far so good. Example 1: Basic CSS Sprites setup. The theory#section5. Create a Cool Animated Navigation with CSS and jQuery. Animation and visual feedback are great ways to assist a user in navigating and interacting with a website. While traditionally Adobe's Flash was the goto for anything animated, these days with the magic of javascript we can avoid Flash altogether. Today we're going to build a really cool animated navigation menu using just CSS and jQuery.
Demo and Source Code Overview The menu we're building can be seen in the screenshot below. You can also see the final working version here. I'm going to break this tutorial up into five sections as follows: Rough sketchCreating ResourcesWriting down the HTMLWriting down the CSSCreating the animation using jQuery Step 1 : Rough Sketch First of all let us see what we need to do here. So here's a rough idea of what we should do: We will split the page into 4 parts, header, navigation and content header and the rest of contentThe header area will be simple <div> containerThe navigation area will be split into several <div> container matching the menu item.