“HTML5/CSS3 Drop Down Menu” Documentation by “Chris Robinson (contempoinc)” v1.0.0


“HTML5/CSS3 Drop Down Menu”

Created: 2/22/2011
By: Chris Robinson (contempoinc)
Email: chris@contempographicdesign.com

Thank you for purchasing my file. If you have any questions that are beyond the scope of this help document, please feel free to email via my user page contact form here.

You can also view my ThemeForest profile here, visit my theme and stock art preview site here, or follow me on Twitter here.


Table of Contents

  1. What's Included
  2. Usage
  3. PSD

A) What's Included - top

  1. Two different colors - Light & Dark
  2. Two different styles - Square & Rounded
  3. Built with semantic HTML5 & CSS3
  4. PSD for arrow images

B) Usage - top

Please reference the included example index.html file, located within the ct_dropdowns folder along with these directions.

  1. Copy the css folder to your sites directory.
  2. Copy the arrows folder in images to your sites images directory.
  3. Use the new HTML5 Doctype <!DOCTYPE html>
  4. Include the ct_dropdowns.css file in the <head> of your document.
                        
                            <link rel="stylesheet" type="text/css" href="css/ct_dropdowns.css" />
                        
                    
  5. Include the IE Conditional/HTML5 Shiv in the <head> of your document
                        
                            <!--[if IE]>
                                <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
                            <![endif]-->
                        
                    
  6. Use the new <nav> tag to wrap your navigation <ul>
  7. Build out your list according to the same format used in the example index.html file.
  8. To apply the rounded style to your nav, add class="rounded" to your main <ul>
  9. To apply the dark style to your nav, add id="dark" to your main <ul>
  10. And you're good to go!

Looking for more information on HTML5


C) PSD - top

There's a single PSD file included for the different colored arrows. This file is very simple and straight forward, each arrow layer is labeled with its filename. Colors can be easily changed by double clicking the layer and adjusting the Gradient Overlay.


Once again, thank you so much for purchasing this file. As I said at the beginning, I'd be glad to help you if you have any questions relating to this file. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Chris Robinson

Go To Table of Contents