background preloader


Facebook Twitter

CSS-only Menus. Chrome CSS Drop Down Menu. Updated: Oct 29th, 08 to v2.5, which adds ability to customize reveal animation speed, plus IE8 beta2 compatibility.

Chrome CSS Drop Down Menu

Only .js file changed from v2.4! Description: We decided to create this script when we needed a compact CSS drop down menu for a project. Chrome Menu is a CSS and JavaScript hybrid drop down menu. It's easy to configure and search engine friendly. The main menu bar consist of a CSS list, while the drop down menus are simply regular DIV tags on page. Ability to easily "left", "center", or "right" align the menu items easily, just by modifying the CSS property "text-align". Demo: Demo 2 (left aligned, red theme): Demo 3 (blue theme): Demo 4 (right aligned, green theme): Directions: Simply download, which contains all the files that make up the menu: demo.htm (view) chromejs/chrome.js (view) chrometheme/chromestyle.css (view) chrometheme/chromebg.gif chrometheme/chromebg-over.gif down.gif (drop down arrow image used).

Alternate themes For Your Information. Slice Your web graphic properly. Tip: Check Your works at least on three most popular browsers.

Slice Your web graphic properly.

This tutorial will teach You how to slice Your web graphic with future xHTML and CSS in mind. For this tutorial I'll use nice, clean vertical menu which You can make yourself with this tutorial. First, we have to hide text layers (we leave only "Menu" text) , then we have to think how to slice this menu. Our goal is minimum graphic and small size. You can use graphic bellow for this tutorial if You don't have PSD file from previous nice, clean vertical menu tutorial.

First, we know, that we want to keep "Menu" text Anti Aliased. Now go to File -> Save For Web... First Top part (1 on last picture). Now You have 5 images Whole menu graphic is now only 2kb - that's verry nice result.On my next tutorial I'll show You how to code CSS graphic menu with rollovers. CSS Menu Generator. MAC Green Template. CSS3 Border Radius Example CSS Border Radius CSS3 border radius parameter is a basic concept with vast possibilities.

MAC Green Template

Put simply, it makes rectangular shapes in HTML smooth and round, with the ability to specify the properties of all the individual elements one by one or affect whole groups of them with a single line of code. It had been quite the news ever since first versions of CSS3 were rolled out, and became one of the most discussed new features in CSS. Browsers had been launching versions with partial support of CSS3 border radius in 2011 and today most of them have mastered the trade of displaying rounded corners with the widest variety of additional settings. For most Internet users and web designers, however, it had garnered a lot of attention and become a popular discussion topic online because it simply looks great!

The only reason for worry among web developers seems to be the way some browsers handle the new CSS3 features. Download Free CSS 3 Border Radius Generator. 20 Useful CSS3 Menu and Navigation Tutorials. Although CSS3 has not been supported by some browsers yet and many people are unenthusiastic to use it, many other people have enjoyed using it with its features to create many fabulous stuffs.

20 Useful CSS3 Menu and Navigation Tutorials

However, there many features that can be gotten by using CSS3 in building a website. We can use the features of JavaScript and images to create website in good performance with features like navigations menu. Below are some great tutorials from the professional designers and developers that maybe useful for you to create awesome menu using CSS3. How to Build a Kick-Butt CSS3 Mega Drop-Down Menu This tutorial is really worth seeing for someone who want to create a great looking drop down menu by using pure CSS3.

Create an Advanced CSS3 Menu The CSS3 will enable you to make good menu without using code and much time. jQuery Style Vertical Menu with CSS3 – No Javascript CSS3 Dropdown Menu Create a Slick Menu using CSS3 Recreating the OS X Dock with CSS Apple’s Navigation Bar Using only CSS.