The Web Marketing Checklist: 37 Ways to Promote Your Website
A Basic HTML5 Template
A Basic HTML5 Template
By Louis Lazaris | May 24, 2011 | HTML5 | Web Tech
This article is an excerpt from HTML5 & CSS3 for the Real World, by Alexis Goldstein, Louis Lazaris & Estelle Weyl. See more details below.
As you learn HTML5 and add new techniques to your toolbox, you’re likely going to want to build yourself a blueprint, or boilerplate, from which you can begin all your HTML5-based projects. In fact, you’ve probably already done something similar for your existing XHTML or HTML 4.0 projects.
We encourage this, and you may also consider using one of the many online sources that provide a basic HTML5 starting point for you.[3]
In this project, however, we want to build our code from scratch and explain each piece as we go along. Of course, it would be impossible for even the most fantastical and unwieldy sample site we could dream up to include every new element or technique, so we’ll also explain some new features that don’t fit into the project. This way, you’ll be familiar with a wide set of options when deciding how to build your HTML5 and CSS3 websites and web apps, so you’ll be able to use this book as a quick reference for a number of techniques.
Let’s start simple, with a bare-bones HTML5 page:
- <!doctype html>
- <html lang=”en”>
- <head>
- <meta charset=”utf-8″>
- <title>The HTML5 Herald</title>
- <meta name=”description” content=”The HTML5 Herald”>
- <meta name=”author” content=”SitePoint”>
- <link rel=”stylesheet” href=”css/styles.css?v=1.0″>
- <!–[if lt IE 9]>
- <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
- <![endif]–>
- </head>
- <body>
- <script src=”js/scripts.js”></script>
- </body>
- </html>
Look closely at the above markup. If you’re making the transition to HTML5 from XHTML or HTML 4, then you’ll immediately notice quite a few areas in which HTML5 differs.
The Doctype
First, we have the Document Type Declaration, or doctype. This is simply a way to tell the browser—or any other parsers—what type of document they’re looking at. In the case of HTML files, it means the specific version and flavor of HTML. The doctype should always be the first item at the top of all your HTML files. In the past, the doctype declaration was an ugly and hard-to-remember mess. For XHTML 1.0 Strict:
- <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
- “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
And for HTML4 Transitional:
- <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
- “http://www.w3.org/TR/html4/loose.dtd”>
Over the years, code editing software began to provide HTML templates with the doctype already included, or else they offered a way to automatically insert one. And naturally, a quick web search will easily bring up the code to insert whatever doctype you require.
Although having that long string of text at the top of our documents hasn’t really hurt us (other than forcing our sites’ viewers to download a few extra bytes), HTML5 has done away with that indecipherable eyesore. Now all you need is this:
- <!doctype html>
Simple, and to the point. You’ll notice that the “5” is conspicuously missing from the declaration. Although the current iteration of web markup is known as “HTML5,” it really is just an evolution of previous HTML standards—and future specifications will simply be a development of what we have today. Because browsers have to support all existing content on the Web, there’s no reliance on the doctype to tell them which features should be supported in a given document.
The html Element
Next up in any HTML document is the html element, which has not changed significantly with HTML5. In our example, we’ve included the lang attribute with a value of en, which specifies that the document is in English. In XHTML-based syntax, you’d be required to include an xmlns attribute. In HTML5, this is no longer needed, and even the lang attribute is unnecessary for the document to validate or function correctly.
So here’s what we have so far, including the closing </html> tag:
- <!doctype html>
- <html lang=”en”>
- </html>
The head Element
The next part of our page is the <head> section. The first line inside the head is the one that defines the character encoding for the document. This is another element that’s been simplified. Here’s how you used to do this:
- <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
HTML5 improves on this by reducing the character encoding <meta> tag to the bare minimum:
- <meta charset=”utf-8″>
In nearly all cases, utf-8 is the value you’ll be using in your documents. A full explanation of character encoding is beyond the scope of this chapter, and it probably won’t be that interesting to you, either. Nonetheless, if you want to delve a little deeper, you can read up on the topic on the W3C’s site.
To ensure that all browsers read the character encoding correctly, the entire character encoding declaration must be included somewhere within the first 512 characters of your document. It should also appear before any content-based elements (like the <title> element that follows it in our example site).
There’s much more we could write about this subject, but we want to keep you awake—so we’ll spare you those details! For now, we’re content to accept this simplified declaration and move on to the next part of our document:
- <title>The HTML5 Herald</title>
- <meta name=”description” content=”The HTML5 Herald”>
- <meta name=”author” content=”SitePoint”>
- <link rel=”stylesheet” href=”css/styles.css?v=1.0″>
In these lines, HTML5 barely differs from previous syntaxes. The page title is declared the same as it always was, and the <meta> tags we’ve included are merely optional examples to indicate where these would be placed; you could put as many meta elements here as you like.
The key part of this chunk of markup is the stylesheet, which is included using the customary link element. At first glance, you probably didn’t notice anything different. But customarily, link elements would include atype attribute with a value of text/css. Interestingly, this was never required in XHTML or HTML 4—even when using the Strict doctypes. HTML5-based syntax encourages you to drop the type attribute completely, since all browsers recognize the content type of linked stylesheets without requiring the extra attribute.
Leveling the Playing Field
The next element in our markup requires a bit of background information before it can be introduced.
HTML5 includes a number of new elements, such as article and section, which we’ll be covering later on. You might think this would be a major problem for older browsers, but you’d be wrong. This is because the majority of browsers don’t actually care what tags you use. If you had an HTML document with a <recipe> tag (or even a <ziggy> tag) in it, and your CSS attached some styles to that element, nearly every browser would proceed as if this were totally normal, applying your styling without complaint.
Of course, this hypothetical document would fail to validate, but it would render correctly in almost all browsers—the exception being Internet Explorer. Prior to version 9, IE prevented unrecognized elements from receiving styling. These mystery elements were seen by the rendering engine as “unknown elements,” so you were unable to change the way they looked or behaved. This includes not only our imagined elements, but also any elements which had yet to be defined at the time those browser versions were developed. That means (you guessed it) the new HTML5 elements.
At the time of writing, Internet Explorer 9 has only just been released (and adoption will be slow), so this is a bit of a problem. We want to start using the shiny new tags, but if we’re unable to attach any CSS rules to them, our designs will fall apart.
Fortunately, there’s a solution: a very simple piece of JavaScript, originally developed by John Resig, can magically make the new HTML5 elements visible to older versions of IE.
We’ve included this so-called “HTML5 shiv”[4] in our markup as a <script> tag surrounded by conditional comments. Conditional comments are a proprietary feature implemented by Microsoft in Internet Explorer. They provide you with the ability to target specific versions of that browser with scripts or styles.[5] This conditional comment is telling the browser that the enclosed markup should only appear to users viewing the page with Internet Explorer prior to version 9:
- <!–[if lt IE 9]>
- <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
- <![endif]–>
It should be noted that if you’re using a JavaScript library that deals with HTML5 features or the new APIs, it’s possible that it will already have the HTML5 enabling script present; in this case, you could remove reference to Remy Sharp’s script. One example of this would be Modernizr, a JavaScript library that detects modern HTML and CSS features—and which we cover in Appendix A, Modernizr. Modernizr includes code that enables the HTML5 elements in older versions of IE, so Remy’s script would be redundant.
Of course, there’s still a group of users who won’t benefit from Remy’s HTML5 shiv: those who have, for one reason or another, disabled JavaScript. As web designers, we’re constantly told that the content of our sites should be fully accessible to all users, even those without JavaScript. When between 40% and 75% of your audience uses Internet Explorer, this can seem like a serious concern.
But it’s not as bad as it seems. A number of studies have shown that the number of users that have JavaScript disabled is low enough to be of little concern.
In one study conducted on the Yahoo network, published in October 2010, users with JavaScript disabled amounted to around 1% of total traffic worldwide. Another study indicated a similar number across a billion visitors. In both studies, the US had the highest number of visitors with JavaScript disabled in comparison to other parts of the world.
There are ways to use HTML5’s new elements without requiring JavaScript for the elements to appear styled in nonsupporting browsers. Unfortunately, those methods are rather impractical and have other drawbacks.
If you’re still concerned about these users, it might be worth considering a hybrid approach; for example, use the new HTML5 elements where the lack of styles won’t be overly problematic, while relying on traditional elements like divs for key layout containers.
The Rest is History
Looking at the rest of our starting template, we have the usual body element along with its closing tag and the closing </html> tag. We also have a reference to a JavaScript file inside a script element.
Much like the link element discussed earlier, the <script> tag does not require that you declare a typeattribute. In XHTML, to validate a page that contains external scripts, your <script> tag should look like this:
- <script src=”js/scripts.js” type=”text/javascript”></script>
Since JavaScript is, for all practical purposes, the only real scripting language used on the Web, and since all browsers will assume that you’re using JavaScript even when you don’t explicitly declare that fact, the typeattribute is unnecessary in HTML5 documents:
- <script src=”js/scripts.js”></script>
We’ve put the script element at the bottom of our page to conform to best practices for embedding JavaScript. This has to do with the page loading speed; when a browser encounters a script, it will pause downloading and rendering the rest of the page while it parses the script. This results in the page appearing to load much more slowly when large scripts are included at the top of the page before any content. This is why most scripts should be placed at the very bottom of the page, so that they’ll only be parsed after the rest of the page has loaded.
In some cases (like the HTML5 shiv) the script may need to be placed in the head of your document, because you want it to take effect before the browser starts rendering the page.
[3] A few you might want to look into can be found at http://www.html5boilerplate.com/ andhttp://html5reset.org/.
[4] You might be more familiar with its alternative name: the HTML5 shim. Whilst there are identical code snippets out there that go by both names, we’ll be referring to all instances as the HTML5 shiv, its original name.
[5] For more information see http://reference.sitepoint.com/css/conditionalcomments
Want more? Check out the book and buy it online at HTML5 & CSS3 for the Real World, by Alexis Goldstein, Louis Lazaris & Estelle Weyl. Download the free sample chapters, access the book’s code archive, check onupdates and errata or join the conversations on the SitePoint Forums.
Function Reference/do shortcode
Usage
<?php echo do_shortcode( $content ) ?>
Parameters
- $content
- (string) (required) Content to search for shortcodes
- Default: None
Return Values
- (string)
- Content with shortcodes replaced by the output from the shortcode’s handler(s).
Examples
add_filter('the_content', 'do_shortcode', 11); // From shortcodes.php
// Use shortcode in a PHP file (outside the post editor).
echo do_shortcode('');
// In case there is opening and closing shortcode.
echo do_shortcode('[iscorrect]'.$text_to_be_wrapped_in_shortcode.'[/iscorrect]');
// Use shortcodes in text widgets.
add_filter('widget_text', 'do_shortcode');
Notes
If there are no shortcode tags defined, then the content will be returned without any filtering. This might cause issues if a plugin is disabled as its shortcode will still show up in the post or content.
Inspiring 55 Wonderful CSS Navigation Menu Designs
Navigation is a crutial part of any website. The user/visitor must be able to navigate and get around easily without a question. Navigation that is well designed/executed will have more impact, and enhance the usability. Today we have gathered some great examples of navigational design. We hope that this eye-candy will inspire you to create an extraordinary menu. In this collection you will find CSS only navigation. While other navigations are possible, we thought it would be nice to do a collection based on CSS niche only.
1. Mediatemprano
2. Allaboutspace
3. Sensationaljobs
4. Procab
5. Pregg
6. Ryanbattles
7. Hummingbirdmaskarade
8. Collisionlabs
9. Artisanmedia
10. Marahcreative
11. Dustinallenpace
12. Sarahlongnecker
13. Timkloote
14. Tappgala
15. Samcreates
16. Patrickmonkel
17. Sohtanaka
18. Alexswanson
19. Arandown
20. Archiduchesse
21. Genggao
22. Thewebsqueeze
23. Themeloom
24. Gibliving
25. Josephpayton
26. Saelstrom
27. Pixelmind
28. Robocatapps
29. Jacoblee
30. Virtualskystudio
31. Toffeenutdesign
32. Hipstery
33. Online Mastering
34. Vodkaimport
35. Larvalabs
36. Mydesignpad
37. Webislove
38. Pixelresort
39. Fullyillustrated
40. Giantsgate
41. Goodbytes
42. Aviary
43. Pethemes
44. Informationhighwayman
45. Vandesign
46. Rekkiabilly
47. Davidjonsson
48. Pilateselpaso
49. Delibar-App
50. Redvelvetart
51. Fightforfuture
52. Nosotroshq
53. Kristinheather
54. Karimzurita
55. Radiumlabs
ROYALTY FREE STOCK PHOTOS, VECTORS AND ILLUSTRATIONS
40 Excellent (Yet Free) CSS Tools And Generators For Developers
Don’t Forget to participate in a contest where you can win the world’s biggest UI elements pack “Impressionist User Interface Elements Pack” for 3 winners (1 developer license and 2 personal license) to design your project more creatively.
For a developer, finding useful CSS tools is like finding a magic lamp that can make his toughest task a fun activity. CSS tools help developers in numbers of ways and let them create stylish, functional and optimized websites.
In this post, we are showcasing a precious collection of 40 useful and powerful CSS tools and generators that save your time and energy while giving the best possible results. Take a look and feel free to share your comments with us.
The Builder is designed for rapid development of CSS layouts, that are based on YAML.
Grid Designer is an online tool for designing grids. It comes with different options to allow you customize columns, pixels, gutters and margins.
My CSS Menu provides the average webmaster with tools to create custom, cross browser compatible CSS menu. Our menu generator makes it easy to create web navigation: Horizontal, Vertical, Drop-down menu without having to know all the complicated HTML and CSS.
Csstxt helps you in illustrating the lots of different ways to add a style to a text file with the help of ‘a’, ‘p’ or ‘div’ tags.
Simple CSS allows you to easily create Cascading Style Sheets from scratch, and/or modify existing ones, using a familiar point-and-click interface.
Firdamatic: the Design Tool for the Uninspired Webloggers
Firdamati is an online tableless layout generator that allows you to create and customise layouts easily by completing a simple form, making creating skins for your Firdamatic-based layout a breeze.
Ultimate CSS Gradient Generator by ColorZilla
This ultimate CSS gradient editor and generator, created by ColorZilla, is a powerful tool to create CSS gradients having cross-browser support.
Sky CSS allows you to create CSS classes almost without using manuscript code. JavaScript compatible browser is needed for the proper functioning.
This is a brand new procure on the CSS grid that aims to be light weighted. You can use it to simplify page templates in support of content management systems.
Free CSS Template Code Generator
This HTML – CSS template generator yields a three column layout without using any Tables. This HTML & CSS Style Sheet template generator outputs a full featured 3 column template. Resulting in an instant web page with a customized template that can be used to control the look n feel of an entire site.
The variable grid system is a quick way to generate an underlying CSS grid for your site. The CSS generated file is based on the 960 Grid System.
Gridinator lets you generate grids for the 960.gs, Golden Grid, 1KB Grid along with the basic generic grid.
This tool will help you generate more flexible versions of Blueprint’s grid.css and compressed.css and grid.png files.
Use the CSS Grid Calculator to quickly visualize page layout and draw grids in a variety of ways. It provides accurate visual feedback on how text blocks and page divisions will appear within a browser window, and returns style declarations for divisions and text to copy and paste into style sheets.
You can create an individual design for your Blog online with templatr which is a Template Generator and no knowledge of HTML or CSS is required.
Markup Generator is a simple tool created for xhtml/css coders that are tired of writing boring frame code at the very beginning of slicing work. It’s main purpose is to speed up your work by generating xhtml markup and a css frame out of very intuitive, shortened syntax so you can jump directly to the elements styling.
Spiffy Corners – Purely CSS Rounded Corners
Spiffy Corners is a simple way to generate the CSS and HTML you need to create anti-aliased corners without using images or javascript.
Spritebox is a WYSIWYG tool to help web designers quickly and easily create CSS classes and IDs from a single sprite image. It is based on the principle of using the background-position property to align areas of a sprite image into block elements of a web page. It was made from JQuery, CSS3 and HTML5, and is totally free to use
SlickMap CSS is a simple stylesheet for displaying finished site maps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own personal needs, branding, or style preferences.
CSS Layout Generator – CSS Portal
This generator will create a fluid or fixed width column layout, with up to 3 columns and with header, footer and menu. Values can be specified in either pixels or percentages
CSSMenuMaker.com provides the average webmaster with tools to create custom, cross browser compatible website menus.
CleanCSS is a powerful CSS optimizer and formatter. Basically, it takes your CSS code and makes it cleaner and more concise.
Display the output of your code instantaneously with CSS3 Please and adjust the element with this simple but powerful tool.
A CSS Navigation Tab Menu Generator that lets you twist size, colors, corners and more. In this way, you can create your own design and afterward download and utilize in your CSS style sheet.
Now you can organize CSS rules alphabetically to make maintaining your CSS files an easier task with the help of CSS Sorter.
A concrete typography tool named CSS Type Set lets you assess and find out how to style their web content.
The CSS Layout Generator helps you create the structure of your website template using valid HTML and CSS. You can create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages.
Generating multi-column and grid layouts with CSS 2.0 techniques using %, px, or em.
Em Calculator is a small JavaScript tool which helps making scalable and accessible CSS design. It converts size in pixels to relative em units, which are based on a text size.
Upload an image to generate a color palette based on the image’s primary colors. Useful for quickly grabbing a particular color within an image for inspiration. Generates also Photoshop swatches and CSS styles.
CSS Menu Generator by Webmaster Toolkit
This CSS Menu Generator will generate both the CSS and the HTML code required to produce a text-based yet appealing set of navigation buttons. As text links are fast becoming preferred over images where search engine optimization is needed, a CSS menu can give the effectiveness of text links with a better look than standard text links. For an example of a CSS menu, look at our navigation on the left.
Use this wizard to experiment with table border styles and generate style source code. This wizard uses dynamic HTML to change the style of the table in-situ, without loading another page.
CSS Layout Generator is online web 2.0 tool for creating HTML+CSS templates (layouts). This tool generate an archive (in just a few clicks) containing two files: HTML & CSS, which represent the basic layout for your future site.
Font Tester is a free online font comparison tool. It allows you to easily preview and compare different fonts side by side with various CSS font styles applied to them. It is very useful for web developers who are looking for just the right font/style/color to use in their pages.
The CSS font-style property is used to set the style of the font to italic or oblique.
CSS color codes comes with two options; hexadecimal color codes and RGB color codes so that you can easily pick the color with the help of Color Picker and get its hexadecimal value from the bottom field.
CSS Colors provides you a comprehensive chart showing the color values in hexadecimal as well as RGB. You can easily find out combinations of RGB colors from 0 to 255 that give you a total of over 16 million colors.
This online generator creates your own custom unique WordPress Theme. Without any need for HTML, JS, PHP, or CSS knowledge. Change the colors, settings, layout, preview live, click “save” and download your unique WordPress theme zip-file. Extract, upload, set, and you are done!
List-O-Matic is a tool that makes the process of creating list-based, CSS-styled navigation just that little bit easier.
The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated.
Easily compress multiple CSS and JavaScript files into one and run it directly on your desktop with this small AIR application.
Adding a WordPress 3.0 menu to your theme
One of the things that has been really lacking in WordPress is the ability to easily administer your theme menu(s). Sure, there are quite a few plugins available that made it significantly easier, but there was never any “built in” methods. This has now changed with the release of WordPress 3.0 and in my opinion, it’s one its best new features.
The only catch of course, is that your theme needs to support this new feature. Fear not though, as you’ll see here, it’s extremely easy to implement into your existing theme.
Step 1: Register your menu
The first thing you need to do is to register your menu so that you can use it within your theme. There are two functions you can use, depending whether you’d like to register just one menu or multiple menus.
To register a single navigation menu, use:
register_nav_menu( $location, $description );
$location is the slug name
$description is the label used within the Dashboard
To register a multiple navigation menus, use:
register_nav_menus( $locations = array() );
$location is an array of menu slug names & labels
Within your functions.php file, add the following code to register your menu. To ensure backwards compatibility for earlier versions of WordPress, verify the function exists prior to usage by calling function_exists().
if ( function_exists( 'register_nav_menu' ) ) {
register_nav_menu( 'main-menu', 'Main Menu' );
}
Step 2: Displaying your new menu
There are two ways that you can display your navigation menu within your theme. You can either add the menu directly into your theme code using thewp_nav_menu() function, or you can add the menu by using the new Custom Menu widget.
Using the Custom Menu widget
Provided your theme allows for widgets, simply drag the Custom Menu Widget across to one of your sidebars. You can then give it an (optional) Title as well as selecting your menu from the drop-down list. The name that appears in the list will be the label that you used in the call to register_nav_menu().
Using the wp_nav_menu function
If you’d like more control over your menu, you can use the wp_nav_menu()function. The simplest form is to simply call it without any arguments, by adding the following code to your theme wherever you’d like your menu to appear.
<?php wp_nav_menu(); ?>
For even more customisation, the following arguments are available to use:
- $menu: (string) The menu that is desired; accepts (matching in order) id, slug, name
- $container: (string) Whether to wrap the ul, and what to wrap it with
- $container_class: (string) The class that is applied to the container
- $container_id: (string) The ID that is applied to the container
- $menu_class: (string) CSS class to use for the ul element which forms the menu
- $menu_id: (string) The ID that is applied to the ul element which forms the menu
- $echo: (boolean) Whether to echo the menu or return it
- $fallback_cb: (string) If the menu doesn’t exists, the callback function to use
- $before: (string) Output text before the link text
- $after: (string) Output text after the link text
- $link_before: (string) Output text before the link
- $link_after: (string) Output text after the link
- $depth: (integer) How many levels of the hierarchy are to be included where 0 means all
- $walker: (object) Custom walker object to use
- $theme_location: (string) The location in the theme to be used – must be registered with register_nav_menu() in order to be selectable by the user
For our particular menu we want to specify the menu that we registered earlier (main-menu). We also want to specify the containing class for the menu. Within your theme files, wherever you’d like your menu displayed, add the following code.
<?php wp_nav_menu( array( 'menu' => 'main-menu', 'container_class' => 'nav' ) ); ?>
Step 3: Setting up your menu within the Dashboard
After you’ve updated your theme files, the next task is to actually set up your menu within the WordPress Dashboard. The Menus option can be found within the Appearance section of the left hand navigation. Once you click this, you should be presented with something similar to the image below…
3.1 Select your menu
Section (a) is where you select your menu that you’d like to use. The only menus displayed are the ones that you’ve registered within your functions.php file.
3.2 Specifying custom links
If you’d like to specify a custom link, as opposed one of your existing Pages, simply enter the URL and a menu label into Section (b). Once you click the Add to Menu button, your new menu item will appear in Section (e).
3.3 Specifying a page link
Most times you’ll simply want your menu items to link to Pages that you’ve created. Section (c) allows you to select which pages you’d like to link. Simply tick the appropriate checkboxes and then click the Add to Menu button.
3.4 Naming your menu
Enter in an appropriate name for your menu in the Menu Name text field inSection (d). This name should match the name that you’ve used when registering your menu in the functions.php file which in turn matches the name used in thewp_nav_menu function, without the hyphens. In our case the menu name would simply be Main Menu.
3.5 Fine-tuning your menu options
Section (e) is where all your menu items will be listed. Clicking the small down arrow next to each menu item will display the individual menu options shown above. Each of the menu items can be easily dragged into a more appropriate order if so required. Also, if your menu is going to be a dropdown menu, then you can also drag the items onto each other so as to form a hierarchy.
If you find that not all the above menu options are displaying such as CSS Classesor if the Custom Links section is not displayed, for example, then click on theScreen Options link at the top-right of the Dashboard. You will be presented with a configuration panel where you can specify what options are displayed.
Simply tick the options that you’d like to appear. For example, ticking the Postscheckbox will allow you to add your Posts to your menu in the same way that you add your Pages. If you’d like to be able to specify a particular class for an individual menu item, tick the CSS Classes checkbox. This is handy if your dropdown menu requires you to add specific classes to the first & last dropdown menu items, for styling purposes.
3.6 Saving your menu
Last but not least, don’t forget to save your menu by clicking the Save Menubutton on the far right of the screen (not displayed).
Step 4: Styling your menu
Although I’m not going to go into how you style your menu using css, I would like to point out one handy feature of this new menu system. You can use thecurrent-menu-item class to style the menu option of the currently selected page. This allows you to highlight or identify the individual menu item associated with the page that is currently being viewed. As an example, the following CSS could be used to style our current menu item. Since I specified the container_classas nav when I originally set up the menu, I need to include this class as part of the css.
.nav li.current-menu-item a {
font-weight:bold;
color:#0082c8;
}
This should give you enough information to add a WP3.0 custom menu to any of your themes. It’s a great feature for this new version of WordPress and one which I’ll be using quite frequently from now on.
Have you implemented this new menu feature in your theme? Are you planing on using the new menus feature? Leave a comment and let me know. I’d love to hear. 
Hello world!
Welcome to WordPress.com. This is your first post. Edit or delete it and start blogging!
Nchip 