Dynamic Drive CSS Library- Animated horizontal tabs Animated horizontal tabs Author: Dynamic Drive These sliding doors based blue tinted tabs "jump up" when selected, such as when the mouse rolls over each one. This is accomplished using a combination of relative positioning and padding on each tab. The selected tab is first stretched vertically by giving it a thick bottom padding, then plucked out thanks to the CSS "top" property value that's smaller than the normal tabs'. BTW, the amount the selected tab jump up can be easily adjusted- refer to the comments inside the CSS. Demo: The two images used: The CSS: Code Info Rate this code: Date Posted: 04/12/2008 Revision History: None Usage Terms: Click here Your Comments (47) Got a question or need help customizing this CSS code?
Control.Tabs : Unobtrusive CSS tabs for Prototype Unobtrusive CSS tabs for Prototype. Introduction & Examples Control.Tabs attaches creates a tabbed interface from an unordered list of links/anchors that point to any elements on your page that have an id attribute. Since it attaches these behaviors to HTML that already has semantic meaning, it will degrade gracefully for browsers that do not support JavaScript, and is search engine friendly. It attaches in one line of code for simple use cases, but is highly customizable and can be used in a variety of edge cases. This is the simplest example of a set of tabs. Note that the styling for the tabs is done with CSS, not the Control.Tabs script. This example demonstrates scripting a Control.Tabs instance. Control.Tabs is fully programmable, so in the example above the links are programmed to change which tab is active, and an event handler is registered to change the select box (and visa versa). <! JavaScript Note that this example doesn't have an style information. More Usage Examples
Button Maker Creating a Slick Auto-Playing Featured Content Slider I love the Coda Slider plugin for jQuery. I've used it recently to build a couple of tabbed "widgets". One here on CSS-Tricks in the sidebar to show Script & Style links, Featured Posts, and Popular Posts. Just kind of a fun way to show lots of content in a small area. Both of these examples use the Coda Slider pretty much "out of the box". View Demo Download Files Functionality Checklist Like I said, the Coda Slider was 90% there already. Here is what we need in addition: Different types of custom content in the panels. Let's go through the HTML, CSS, and JavaScript. The HTML Here is the framework HTML for just the slider itself: <div class="slider-wrap"><div id="main-photo-slider" class="csw"><div class="panelContainer"><div class="panel" title="Panel 1"><div class="wrapper"><! The CSS The full CSS for this example has a basic reset, some utility styles and basic structure. The JavaScript In the header section of your HTML, you'll need to include jQuery and all the plugin files. Share On
Building a Better Blogroll: Dynamic Fun with SimplePie and jQuery A traditional blogroll is a simple list of other sites, often in the sidebar, that are related, owned by, or otherwise friendly to the home site. Blogrolls are a great idea and on-point with the spirit of blogging, but how is a casual reader to know if any of these sites are truly of interest? Let's improve upon the concept of a blogroll by not just listing sites, but dynamically pulling recent headlines from them, and using some fun jQuery animation. Step 1 - The Idea and the Technologies For our example, we will be using the TUTS family of sites. Of course we will be using XHTML/CSS to build and style the widget.We will use jQuery and the Coda Slider plugin for the fun animation.The recent headlines will be dynamically pulled using PHP and SimplePie. Because of the use of PHP, you won't be able to download the source code, open it up on your local machine, and view the demo. Step 2 - Designing Design first, code later. Note the use of guides. Step 2 - Downloading the Files