Graphics Unleashed
Free Fonts Vehicle Templates for Vehicles Wraps CorelDRAW Brushes CorelDRAW Books and Videos
Free Graphics Blog Seamless Textures Vector Clipart for CorelDRAW and Illustrator Graphics Tutorials
CorelDRAW X7 - Download Free Trial - Purchase | Seamless Textures and Patterns


Tuesday, March 13, 2012

Creating Fancy Drop Down Menus With Pure CSS

We've faced a variety of issues with the navigation menus on the Graphics Unleashed Web site. We had a wonderful solution for menus that was based on a Flash graphic that loaded the menus via CSS (cascading style sheets). This made it easy to modify the menus while also being optimized for search engines. Unfortunately some users disable Flash on their system. We've even received some fairly nasty e-mails from those users complaining that we didn't have navigation menus. Some users didn't have a choice as they were using Apple products (iPhone, iPod, iPad) that don't support Flash at all. The last issue is that we couldn't use the Flash menus on the Graphics Unleashed Blog because the server that hosts the blog doesn't allow us to upload the Flash graphic.

We've been looking for an alternative solution for a while and didn't want to simply jump on the first thing we saw. Not only did we want the menus to be easy to modify, they also had to be functional to you--the user--and they needed to look good. If you have visited the Graphics Unleashed Blog on the Web site lately, you may want to check it out as we have some new menus. There are a few more changes to make to the blog template, but having menus makes it much easier to navigate. We'll soon be adding these same menus to the Graphics Unleashed Web Site.

Now let's look at the tool we used to create the menus. CSS3 Menu comes in both a free and a paid version. There are limitations with the free version so you'll probably want the paid version if you are truly going to use it in developing for a Web site. You choose the style of menu you want from a large list of provided templates (more templates exist in the paid version). Once you've chosen a template, you can tweak it to get it just right for your needs. It supports top level menus as well as sub menus. All of this is done in a WYSIWYG environment so it is very easy to create great looking menus.

Once the menu is completed, you can have it export all the code needed. This typically involves both HTML code and style sheet code. Of all the menu solutions I've tried before CSS3 Menu, the generated code was lengthy and complex. The great thing about CSS3 Menu is that the style sheet code is very compact as is the HTML code. Once this code was generated, it only took a couple of minutes to add it to the blog template so that the menus would show on every page of the blog.

If you've been looking for a good solution for creating fancy menus for a Web site, you'll definitely want to try CSS3 Menu. It only took me about 30 minutes of playing with the free version before I knew I wanted to pay up and get the full version. A very worthwhile investment!

Labels: , , ,

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

<< Home


Posts From the Graphics Unleashed Blog Archives


Want to read more from the
Graphics Unleashed Blog?
Check out the more than
2500 posts in the archives!

Graphics Unleashed Blog Archive Home Page
2014 Posts | 2013 Posts
2012 Posts | 2011 Posts | 2010 Posts | 2009 Posts
2008 Posts | 2007 Posts | 2006 Posts | 2005 Posts

Graphics Unleashed Choices for Hardware,
Software, Services and Artwork

Artwork, Brushes & Add-Ons Free Stuff Training Seamless Textures

Bonus Content Packs
Clipart Unleashed
1400+ CorelDRAW Brushes
Fashion Design
QR Codes Docker
CNC Software

Vehicle Templates-1000s free
Signs by Design
Clipart deSIGN
Design Base (free)
ROMCat | eCut
CoCut Standard & Pro

620+ Free Fonts
Cave Creek Geek
Graphics Unleashed Blog
Free Publications
Resources Docker

CorelDRAW X6 Training DVD
X5 DVDs | X4 DVDs
Jeff Harrison's FUNdaMENTALs
CorelDRAW Training | On-Site
Hire the Geek

1900+ Seamless Textures
Wood | Metal | Stone | Terrain | Fire & Ice
Ground & Plants | Floor, Wall & Bricks | Fiber
Tile & Path | Marble | Crystals | Tech
Metal II | Diamond Plate | Circuits

Unleashed Productions 21 Year Anniversary
Follow Subscribe to Blog Facebook Twitter Google+ LinkedIn YouTube Amazon Corel Subscribe

Copyright © 1995–2014 Unleashed Productions, Inc., All Rights Reserved.

Kindle
Related Posts Plugin for WordPress, Blogger...