Tie Clasp

Thesis Theme: Creating a CSS Horizontal Drop Down Menu

What exactly is a CSS Horizontal Drop Down Menu?

One of the first steps to developing a seo friendly web design is to organize for the navigation of your web site. Not only does an optimized navigation system pacify search engines, it also makes your first priority, your site visitors, have a much better experience on your site. Personally, nothing is more tiresome than to get trapped in a web site that has a poorly enhanced structure for navigation.

To most webmasters, the phrase CSS horizontal drop down menu is self explanatory. But, for those whom are a bit less experienced, it is fundamentally a horizontal drop down menu created through CSS code, rather than hard-coding it into your html, or using a scripting language, such as JavaScript. The drop down menu part refers to the way a sub-menu item “drops down” from its parent menu item. This not simply gives your site a clean, professional look, a drop down menu can help save you lots of web page real estate.

The first thing you absolutely must do is plan your page hierarchy. For example, if you have a site that sells jewelry, you might want to split your pages into Men’s and Women’s jewelry. When you select Jewelry from your horizontal drop down menu, you will see two (or possibly more) sub-menu items, namely, Men’s and Women’s. Selecting the Men’s tab will make the menu drop down to show only Men’s items, such as cuff links, tie clasps, men’s watches and men’s rings. Your site visitors will be able to very easily navigate through the menu drop down hierarchy, and you will have an orderly navigation system.

So, how do you accomplish this structure? Well, with Thesis, it is really a piece of cake. Thesis comes with css horizontal drop down menu functionality already in place. The most difficult thing you have to do is construct the pages you wish to be found in your drop down menu. Of course, since Thesis theme runs on the WordPress platform, creating pages for your css horizontal drop down menu really couldn’t be more effortless. The page editor has configuration options to choose the parent for the page you are working on. So, with the Men’s Jewelry page, for example, you would just assign the parent page to be the Jewelry page. For Men’s Watches, just set the parent to be Men’s Jewelry. Then your horizontal drop down css menu will display Men’s Watches as a selection choice when you click on the Men’s Jewelry menu tab.

The pages you create don’t automatically appear in your drop down menu. Now you have to go to the Thesis theme Site Options area and under the Navigation Menu section, open the Pages tab. There you will be able to see all the pages on your site. To add these pages to your css horizontal drop down menu, simply check the pages you want to show. Now hit the big green save button and you’re all through. Well, at least you thought you were through.

After looking at your site you establish that, yes, the css horizontal drop down menu works very well, however you don’t actually care for the default order of the sub menu tabs. Under the Women’s Jewelry tab, you wanted earrings to come before bracelets. Normally, WordPress takes care of this by enabling you set an index order to the pages you make , and is set to zero by default. The lower the index, the higher in the menu structure that specific page will display. This can be tiresome if you have dozens of pages for your drop down menu and eventually create a page you want in front of the rest. You would have to go from page to page and alter the order attribute. Thesis does away with this predicament all together.

The pages section under the Navigation Menu area of Thesis Site Options, as mentioned before, lists every page on your site, even those, for one reason or another, you chose to be private and invisible to your visitors. The ones that are “checked” will show up in your drop down menu, and the ones that are “unchecked”, wont. The real elegance of this section in Thesis is that you can customize what displays on your css horizontal drop down menu simply by typing in what you want to display. Well, that’s great, but it doesn’t solve your order problem. Well, all you have to do is grab the page with your mouse and place it anywhere you want. Couldn’t be simpler. Grab your earrings page and move it anywhere above your bracelets page and hit the Big Green Save Button. Your css horizontal drop down menu now displays your pages in the desired order.

About the Author

I use this theme by Chris Pearson and Brian Clark on over a dozen of my domains. I honestly would not use any other theme. Find out why you just can’t live without the Thesis theme and why a Custom Thesis Theme is the best, most innovative and user-friendly, SEO-optimized WordPress framework.

I have been investigating the viability of working from home for some time now. If you would like to share your views on the subject of starting your own home-based Internet business, I would welcome them at my blog on the subject, visit Home Business Blog.

Men’s Style: The Thinking Man’s Guide to Dress $10.45 Guys don’t wear wolf pelts anymore, but not much else has changed in the world of men’s clothes: the right suit, or tie, or shirt, or shoes still projects mystery, erotic potential, and power. And to negotiate these hurdles with style and confidence, Men’s Style is indispensable—a valuable source of practical advice for how to dress in a world of conflicting fashion imperatives, and a witty gui…

Step By Step: How To Tie A Basic Rope Horse Training Halter $14.83 Have you ever wanted to learn to tie your own rope halter, but never knew how to do it? Are you looking for a way to make extra money, without spending too much? Do you have some old rope lying around and want something to do this afternoon? Here’s your chance to learn how to make a rope halter—how to make a basic training halter for horses of any size from yearlings to draft horses—with just …

The Beaded Bracelet: Beadweaving Techniques & Patterns for 20 Eye-Catching Projects $15.67 This is it ? your perfect guide to making beautiful, eye-catching beaded bracelets! With The Beaded Bracelet, you can’t go wrong. Because bracelets are the perfect projects for both learning new techniques and for advancing your jewelry-making skills. Because bracelets make wonderful gifts; they’re always just the right size. And because author Carole Rodgers has decades of creative and teaching e…

Men’s Executive Clasp Tie Bar by Enrico Pardini in your choice of colors Show your attention to detail and make a defining statement with this staple of the executive world, the tie clip. This sleek, yet practical tie clip will keep both you and your necktie in good standing. A good businessman keeps his tie in line with how he operates his business–straight and in control!…

C686 Lean Slide Clasp 1 1/2 (Tie Bar) $15.99 Slide Clasp (Not Pinch Clasp)…

Gold Formal Tie Bar $14.99 Gold Classic Smooth Tie Bar with tension grip clasp. This tie clip is a classy and elegant way to dress up and accessorize your shirt, suit, or neck tie….

Eagle Claw Tie/Hat Clip Comes in 4 Different Colors…

NFL Tie Bar Officially Licensed NFL Tie Bar. Celebrate the home team in style. Tie bar constructed of enamel on a silver plated setting. By Cufflinks, Inc….

MLB Tie Bar Sport Your Ties In Style by Adding The Pittsburgh Pirates Tie Bar. A Shiny, Rhodium Plated Sliding Tie Bar Makes It Easy To Declare Your Pirates Allegiance Front and Center. Officially Licensed MLB Tie Bar….

Bluecell Black Color Clasp Neck Strap Band Lanyard for iphone 4 4S 3G 3GS + Bluecell Cable Tie $6.59 Quantity: 1 x black color Neck Strap, Easy to use, just connect to Apple 30 pins Dock connector for install, Press the button and pull the strap out for remove….