background preloader

How To Create a Pure CSS Dropdown 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. 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 first sets of sub-menus can then be added under the “Tutorials” and “Articles” links, each one being a complete unordered list inserted within the <li> of its parent menu option. The secondary sub-menu is nested under the “Web Design” option of the first sub-menu.

Slider with Sliding Backgrounds Among the many super nice design features of the Yahoo! Weather app for iOS is the transition between city screens. The background image doesn't just move away as the screen moves from one screen to the next, the background image itself slides. It appears to be hiding some of the "old" screen and revealing more of the "new" screen those closer you have it to being in full view. Let's try and pull it off on the web. The HTML Like any slider, there are three main components: The container that holds everything into shapeA sliding container that is as wide as all the slides in a rowEach individual side container We won't bother too much with content inside the slide. <div class="slider" id="slider"><div class="holder"><div class="slide" id="slide-0"><span class="temp">74°</span></div><div class="slide" id="slide-1"><span class="temp">64°</span></div><div class="slide" id="slide-2"><span class="temp">82°</span></div></div></div> The container might be a <section>, slides might be <article>.

Amazing Hover Effects with CSS3 I have received a lot of questions lately about hover effects and how you can execute them using only CSS. There was a time when you would have to use jQuery to really make your effect stand out, but now CSS3 has some pretty amazing properties that help designers create some lightweight effects that truly stand out. Box Shadow This effect will create a shadow around your div container when you hover over it: Ut vulputate sem venenatis magna commodo ac semper nibh mollis. That one’s pretty simple and straightforward, but still kind of cool. Opacity Having something fade in on a hover can be seen almost anywhere on the web. If you want to create an even cooler opacity fade effect, you can take advantage of the new transition property. (this one only works in Chrome or Safari) The Switch and/or Reveal I have seen a lot of sites use an effect where something is revealed when you hover over an element. Hover over me to see something happen (this one also only works in Chrome or Safari) Position

Custom Drop-Down List Styling A tutorial on how to create some custom drop-down lists. We'll show you five examples with different looking drop-down menus and lists for various purposes. View demo Download source Hi guys! I’m back with another article just for you, and CSS related of course! This time, we are going to talk (and do stuff!) A few things before starting: You won’t see any vendor prefixes in the CSS snippets, but you will, of course, find them in the files.I personally use the box-model where [width] = [element-width] + [padding] + [borders]. How do we start? First question: what do we need to create a drop-down? The JavaScript For now and before everything else, we need some JavaScript to make this work. So what does this script do exactly? Second thing, it replicates the default behavior of a select drop-down by closing it if you click anywhere else on the screen. Well, now we understand how it works, I guess it’s time to create some neat drop-downs! Example 1 The Markup The CSS We did a few things here.

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). The HTML The Basic CSS Notice that a hover state has been declared. The Image Figure 1: The Swipe The Demo

Joshua Hibbert - Web Designer Accordion with CSS3 Using hidden inputs and labels, we will create a CSS-only accordion that will animate the content areas on opening and closing. View demo Download source Today we’ll experiment some more with the adjacent and general sibling combinator and the :checked pseudo-class. Using hidden inputs and labels, we will create an accordion that will animate the content areas on opening and closing. There are many variations of CSS-only accordions around, most of which are implemented using the :target pseudo-class. So, let start! Please note: the result of this tutorial will only work as intended in browsers that support the CSS3 properties in use. The Markup We will be going through an example that uses checkboxes where one content section is open by default (the input needs to be ‘checked’). Note that we need to give each input an ID which we will then use in the for attribute of the label. Each article will have a class that will help us determine to which height we it to expand to. The CSS Demos

Formalize CSS - Teach your forms some manners! 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:

Raphaël · Australia New South Wales New South Wales (abbreviated as NSW) is Australia’s oldest and most populous state, located in the south-east of the country, north of Victoria and south of Queensland. It was founded in 1788 and originally comprised much of the Australian mainland, as well as Lord Howe Island and Norfolk Island. New Zealand was not initially part of the colony, although when Britain annexed New Zealand in 1840 it was briefly a part of New South Wales. Victoria Victoria is a state located in the south-eastern corner of Australia. Western Australia Western Australia is a state occupying the entire western third of the Australian continent. South Australia South Australia is a state of Australia in the southern central part of the country. Northern Territory The Northern Territory is a federal territory of Australia, occupying much of the center of the mainland continent, as well as the central northern regions. Queensland Tasmania Tasmania is an Australian island and state of the same name.

Orman Clark’s Vertical Navigation Menu: The CSS3 Version Next in the Orman Clark's coded PSD series is his awesome looking Vertical Navigation Menu. We'll recreate it with CSS3 and jQuery while using the minimal amount of images possible. The only images we'll be using are for the icons - I'll be creating a sprite using a new tool called SpriteRight, but this is optional. Additionally, I'll be using GradientApp to create my CSS3 gradients, but again this is optional. Step 1: Basic HTML Markup Let's start off by throwing in some basic markup, an empty HTML5 document: And now the markup for our menu; an unordered list within a containing wrapper. Lastly, we create the submenus by placing an unordered list nested within each of our existing list items. Okay, there may seem a lot there but don't let it confuse you. I've also added a class to each list item, just so it'll make styling easier later on. Step 2: Fluid Fonts We'll first make sure our menu displays correctly. Now to explain how the wrapper font size works. Step 3: Main Menu CSS Okay!

Dive into Flexbox Introduction Flexbox is a new layout mode in CSS3 that is designed for the more sophisticated needs of the modern web. This article will describe the newly-stablized Flexbox syntax in technical detail. Why is Flexbox needed? Authors have long been using tables, floats, inline-blocks, and other CSS properties to lay out their site content. Specification Status and Browser Support The Flexbox specification has been a work in progress for over 3 years. Flexbox Specification Timeline: July 2009 Working Draft (display: box;)March 2011 Working Draft (display: flexbox;)November 2011 Working Draft (display: flexbox;)March 2012 Working Draft (display: flexbox;)June 2012 Working Draft (display: flex;)September 2012 Candidate Recommendation (display: flex;) Browsers are adopting Flexbox quickly. Concepts and Terminology Though Flexbox makes it trivial to create layouts that would have been difficult or impossible in the past, it takes some time to get used to the Flexbox way of doing things. Flex Lines

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). The examples below demonstrate inline CSS Sprites2, the technique we’ll be covering in this article: Enter the jQuery#section1 So here’s the first caveat: we’re going to lean on jQuery to make this happen. jQuery is a maturing JavaScript library that does the same neat stuff as all the other JavaScript libraries, and it has an additional advantage that lends itself particularly well to extending CSS Sprites: jQuery allows us to select elements on a page using a CSS-like syntax that we already know.

D3.js - Data-Driven Documents 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. 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. The content will be a simple <div> container Step 4: CSS

Related:  t0xicpl4ge