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 - Get More Information - Click Here

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: , , ,


Post a Comment

Subscribe to Post Comments [Atom]

<< Home

Popular Posts From the Graphics Unleashed Blog 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

Rhinestone Templates, Vector Clipart, Sign Templates and More Available
GoPro On 60 Minutes Provides Ideas For Creativity
Five of My First Thoughts on Windows 8.1
Draw Stitch Patterns and Zippers in CorelDRAW With One Click
Do You Know How to Ask for Software Help?
Beware of CryptoLocker Malware!
Auto FX Photographic Edges Provide Thousands of Finishing Touches to Artwork
Answers From the Graphics Unleashed Blog Archives
Vehicle Template Search Updated and Older Templates Available For Free Download
Frequently Asked Questions About Using OpenType Fonts
Seamless Textures, Transparency and Fountain Fills Combined
Build ROMCat Catalog From All CorelDRAW Files On Your System
Upgrade Before Microsoft Office 2003 Support Ends in April 2014
Power of Brushes in CorelDRAW - Free Video Tutorials
Embed Facebook Posts in a Web Page or Blog Post
Put a Plan in Place Now to Upgrade From Windows XP
Speed Up a New Computer By Removing Unnecessary Junk
A Failed Hard Drive and Importance of Backup
Do More With Your Text Using OpenType Features in CorelDRAW X6
Problems With a Web Page? Try Clearing the Browser Cache!
Five Tips For Getting Started on Twitter
Native Mac Version of CorelDRAW Coming? Don't Expect It!
Setting Up a Windows Computer From Scratch
Important Macros Included with Non-Academic Versions of CorelDRAW
One Door Is Closing, Another to Be Opened
Keep Your Devices Charged With USB Wall Plates
Store Downloaded Software and Serial Numbers in a Safe Place
CorelDRAW X6 Pro Content Pack Loaded With Design Assets

You Could Be Pretty Good By Now
Five Tips to Get More From CorelDRAW
Color Separate Bitmaps to Spot Colors Inside CorelDRAW
PDF Security Settings Help Protect Your Artwork
WeBuilder 2014 Provides Excellent Code Builder for Web Pages
Finding and Installing 32-Bit CorelDRAW X6
Downloading Fonts, Installing Fonts and Spam Filters
Choosing Strong Passwords and Remembering Them Easily
Resolve to Improve Your CorelDRAW Skills
Rapid SEO Tool Makes Researching and Optimizing Search Rankings Easy
Use The Tao of Twitter to Fully Grasp the Power of Tweeting
Camouflage Your Text With Bitmap Patterns
Maximizing Productivity With CorelDRAW
11 Free Tutorials to Prevent CorelDRAW From Crashing
Need to Dash? Use the Correct Dash!
Add Virtual Contact Info to Business Card With QR Code
Free Twitter Header Template For CorelDRAW and Corel PHOTO-PAINT
Removing the Darned White Box
Putting the Right Graphics on the Web
5 Quick SEO Tricks To Boost Your Ranking
Is The Best Value For Additional Content a Premium Membership?
Do You Agree With Corel's New Terms of Service?
Solving CorelDraw.dll Error Code 998 Problems
Money for Nothing...and Your Clicks For Free
Facebook Brand Template for CorelDRAW and Corel PHOTO-PAINT
Managing Your Fonts Can Speed Up CorelDRAW
Photoshop Plug-ins and Corel PHOTO-PAINT Compatibility
CorelDRAW X6, 64-bits, Scanning, Twain Drivers and WIA
CorelDRAW Graphics Suite X6 Hardware and System Requirements
Top Ten Reasons to Upgrade to CorelDRAW X6
Resources Docker and Colored Nodes Registry Hack
Large Dimension PDF Files Are Fine, Adobe Is The Problem!

Subscribe to Unleashed Publications
Artwork and Brushes Free Stuff Training Add-ons Textures

Bonus Content Packs
Clipart Unleashed
1400+ CorelDRAW Brushes
1400 Seamless Textures
Fashion Design

Vehicle Templates
2000+ Seamless Stripes
Signs by Design
Clipart deSIGN

500+ 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
CorelDRAW Unleashed Mag
Windows Unleashed

Design Base (free)
ROMCat | eCut
QR Codes Docker
EZ Metrics
Leonard CNC Software

Wood | Metal
Stone | Terrain
Fire & Ice
Ground & Plants
Floor, Wall & Bricks
Fiber | Tile & Path
Marble | Crystals

Follow Subscribe to Blog Facebook Twitter Google+ LinkedIn YouTube Amazon Corel Subscribe

Unleashed Products 21 Year Anniversary

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

Related Posts Plugin for WordPress, Blogger...