CSS Tabs – The Ultimate Tab Menus

Part of designing a WordPress Theme is the decision on how to structure the tab menus. There are two core tab menus in a traditional WordPress Theme: Categories and Pages. The Page menu lists the pseudo-static Pages such as About, Contact, Events, Schedule, Site Map, and other non-chronological web pages. The category lists are the blog’s table of contents, helping visitors find related collections of content. Typically, these are kept separate with the Page menu within the header of the design and the categories within the sidebar.

There are many ways to create these menus such as drop down vertical or horizontal menus displaying parent/child lists, simple lists, breadcrumbs, image maps, and more. A favorite style is the CSS Tab Menu, a drop down and/or highlighted graphically styled menu that uses only CSS or CSS with a little JavaScript. They can change color, size, and even shape when hovered over to accentuate them.

The WordPress Codex, the online manual for WordPress Users, lists articles to help you style basic CSS tab menus for WordPress Themes specifically:

• WordPress Codex – Dynamic Menu Highlighting
• WordPress Codex – Creating Horizontal Menus
• WordPress Codex – Styling Lists with CSS
• CSS Experiments with Lists and Menus

Other sources for information, tips, techniques, and examples of CSS tab menus, without and without JavaScript, include:

• Listamatic: one list, many options – Using CSS and a simple list to Create CSS Menus
• Yahoo Developer – Tab Menu Examples
• Pure CSS tabs [dive into mark]
• Overlapping tabbed navigation in CSS by Shape Shed
• CSSMenus by Solardreamstudios
• Unraveled – CSS Tabs 2.0
• Top 71 CSS Menus Navigation Tabs : Web Developer Lists : eConsultant
• A List Apart – Drop-Down Menus, Horizontal Style
• A List Apart: Articles: Sliding Doors of CSS
• CSS Tab Menus .. you can’t live without – CSSAddict
• CSS-Styled Lists: Demo
• CSS Juice – 30 Free CSS Based Navigation Menus
• CSSPlay – CSS only drop-down menu
• Stu Nicholls – CSSplay – Tabbed menu
• Dave Woods – CSS Tabs Menu with Dropdowns
• Dynamic Drive – Drop Down Tabs (5 styles)
• Dynamic Drive – CSS Library Horizontal CSS Menus
• Dynamic Drive – Horizontal CSS Menus
• Dynamic Drive – Vertical CSS Menus
• Dynamic Drive CSS Library- CSS Tabs menu
• Dynamic Drive CSS Library- Plastic Tabs menu
• Expoding Boy – 14 Free Vertical CSS Menus
• Free CSS Navigation Menu Designs at exploding-boy.com
• Overzone Software CSS Tab Designer
• 50+ Nice Clean CSS Tab-Based Navigation Scripts
• isolani – Web Standards: CSS Tab Menus
• Position is Everything – Deluxe CSS Dropdowns and Flyouts
• Horizontal and Vertical CSS Menu Tutorial
• 14 Tab-Based Interface Techniques – Developer’s Toolbox – Smashing Magazine
• Navigation Tab Menu Generator CSS – Tabs Generator
• Rollover CSS Image Menu
• CSS and round corners: Making accessible menu tabs

These are just a sample of the many online tutorials and examples of how to create different blog menu and navigation designs. Have fun exploring and learning!

NOTE: On an experienced personal note, many web designers are starting to replace CSS designed navigation with Flash. Flash is still in development as a web design tool and currently does not meet web standards for accessibility. Such design elements restrict navigation of your site for visually impaired or disabled visitors. Please avoid this technique if you want your site to meet web standards, accessibility, and equal opportunity access laws.

---

Site Search Tags: css menu tabs, css, web design, tabs, horizontal tabs, javascript tabs, css menus, pages, categories, wordpress theme, wordpress themes, theme design, navigation, site navigation, site menu, site tabs, page tabs, category tabs, lists, tab lists, menu lists, designing a WordPress Theme, WordPress Theme design, WordPress Theme tabs, theme navigation

Subscribe Via Feedburner Subscribe by Email Visit
Copyright Lorelle VanFossen, the author of Blogging Tips, What Bloggers Won't Tell You About Blogging.