CSS Tutorial css-template-layout - JavaScript (jQuery) implementation of the CSS Template Layout Module The project aims at providing web designers with a way to use the W3's CSS Template Layout Module today. As a jQuery plug-in, the script parses a given set of CSS rules and displays the content as indicated in the specification. Options include the ability to select the CSS parsed, as well as an optional prefix to use for the CSS rules. Specifying a prefix allows style rules that are interoperable with a possible future browser implementations. Script Usage Any usage requires jQuery and this script to be referenced in the document's head: Then, $.setTemplateLayout needs to be run once the DOM is ready. $(document).ready(function() { /* run $.setTemplateLayout here */ }); Or simply: $(function() { /* run $.setTemplateLayout here */ }); There are several ways provide the source CSS data and additional options for your template: No parameters $.setTemplateLayout(); Use the CSS from any STYLE elements on the page, no prefix. File and prefix parameters $.setTemplateLayout(filename, [prefix]); Examples
Something about web design » Blog Archive » Create your own drop down menu with nested submenus using CSS and a little JavaScript Drop down menus are among the coolest things on the web. Beside that they are also very good for creating navigations that contain many elements. The main problems of creating drop down menus lies in the Internet Explorer’s inappropriate way of displaying :hover pseudo class (not recognized anywhere except in A tag), and the problem in calculating the z-index when an element is positioned absolutely inside a relatively positioned element. How to start? To better understand this article, you could read the Suckerfish dropdown article on A List Apart. Let’s style up the elements, shall we? Now, we are going to position the second level navigation lists. Okay, now this is a tricky part which had me thinking a lot. We don’t want to show the second level navigation until the mouse goes over the navigation element that has the submenu (Projects). Styling the links For start, we have to display links as blocks so the whole button area would become a link. JavaScript to the rescue The example
Dynamic Drive CSS Library- DD Color Tabs II DD Color Tabs II Author: Dynamic Drive Based on the same design as DD Colors Tabs, this second version flips the tabs over to create an inverted look. Just like the original, you can modify the menu's default and hover colors just by altering the two color values inside the CSS code. This is made possible thanks to transparent images used as the menu tabs' interface. The two colors used in this menu are: #8b0000 and #d50509. Demo: The two images (resized for easier download): The CSS: Code Info Rate this code: Date Posted: 07/12/2006 Revision History: None Usage Terms: Click here Your Comments (48) Got a question or need help customizing this CSS code?
Dynamic Drive CSS Library- SuckerTree Horizontal Menu SuckerTree Horizontal Menu Author: Dynamic Drive SuckerTree Horizontal Menu is a CSS and DOM hybrid menu that's list based and supports multiple levels of sub menus. The trick to SuckerTree is a small adoptable piece of JavaScript that crawls the inner levels of a list menu and assigns the appropriate show/hide and positioning behavior to them. You can even have multiple SuckerTree menus on the same page. See also: SuckerTree Vertical Menu. Demo: The two bullet images used: The CSS: Code Info Rate this code: Date Posted: 09/14/2006 Revision History: None Usage Terms: Click here Your Comments (314) Got a question or need help customizing this CSS code?
Dynamic Drive CSS Library- Horizontal CSS Menus Welcome to Dynamic Drive's new CSS library! Here you'll find original, practical CSS codes and examples such as CSS menus to give your site a visual boast. Page 5 of 8 pages « First < 3 4 5 6 7 > Last » Modern Bricks MenuThis is a modern looking, imageless horizontal menu. The selected menu item merges with the band below it to help it stand out even more. As mentioned, the menu uses no images, making customization a breeze. Glowing Tabs MenuGlowing Tabs Menu uses a background image that accentuates the outline of each tab. Solid Block MenuThis is a lean, professional looking CSS menu that's draped in a solid two color background image. CSS Thick TabsThese CSS menu tabs come with thick top/bottom padding to achieve that attractive cushioned look. Overlapping horizontal tabsUsing relative positioning and negative margins, this CSS code creates "overlapping" horizontal tabs that each snug up and slightly overlaps the tab to the left of it.
Whatever:hover Hi there! This script is from 2003, and targets a flaw in IE6, which at its peak was a really popuplar browser. Today (oct 2011) it no longer is, and as such this script should not really be necessary anymore. Please try to convice your client, project manager or boss, that not every browser needs to display a website the exact same way; it is the content that matters. This page (and script) will stay here for old times' sake. updated: november 15, 2009 (changes) Whatever:hover 3.11 Most modern browsers support the :hover selector for any html element. Whatever:hover is a small script that automatically patches :hover, :active and :focus for IE6, IE7 and IE8 quirks, letting you use them like you would in any other browser. If you're already familiar with whatever:hover and just want to download it, scroll down and grab the latest version. Getting it to work How do I use it? Link whatever:hover to the body element, and you're all set. IE only behaviours How does it work? #menu li { ... }
Optimize browser rendering - Make the Web Faster Once resources have been downloaded to the client, the browser still needs to load, interpret, and render HTML, CSS, and JavaScript code. By simply formatting your code and pages in ways that exploit the characteristics of current browsers, you can enhance performance on the client side. Use efficient CSS selectors Overview Avoiding inefficient key selectors that match large numbers of elements can speed up page rendering. Details As the browser parses HTML, it constructs an internal document tree representing all the elements to be displayed. According to this system, the fewer rules the engine has to evaluate the better. The following categories of rules are considered to be inefficient: Rules with descendant selectors For example: Rules with the universal selector as the key body * {...}.hide-scrollbars * {...} Rules with a tag selector as the key ul li a {...} Rules with child or adjacent selectors body > * {...}.hide-scrollbars > * {...} ul > li > a {...} Rules with overly qualified selectors
HTML Utopia: Designing Without Tables Using CSS, 2nd Edition - SitePoint Books By Alexis Goldstein, Louis Lazaris & Estelle Weyl Powerful HTML5 and CSS3 techniques you can use today. Why should you learn HTML5 & CSS3? It works on just about every platform, is compatible with older browsers, and handles errors gracefully. Many common tasks are now simplified, putting more power in your hands. Additionally, you’ll have the freedom to be more expressive in the semantics of your markup. So, perhaps the question is, why would you not learn HTML5 & CSS3? What will I learn? Lose that slightly embarassing Flash habit with clean, native HTML5 videoSet type that truly supports your message with @font-faceTap into next-generation CSS sslectors and powerful new styling with CSS3Use shiny-new APIs to build applications with location sensitivity and full offline functionality Who should read this book? This book is aimed at Designers and front-end developers who want to learn about the latest generation of browser-based technologies. Customer reviews