Transparent Little Dropdown Menu
So you have some dropdown menus on your website, but you would like to make them a little fancier. With just a little effort in your stylesheet, you can add a nice transparency effect to the background of the dropdown list.
The CSS is usually applied to the style id created for the drop-down div. Perhaps it is something like #subnav or #subnav li (which is the list item inside the div). Just remember if you start making list items transparent, they may look a bit fuzzy. So you might need to use darker text like black to remain legible.
Opacity is recognized as part of the whole number 1. 1 stands for 100% solid color. You can really choose any color as the base background, but you made need to experiment with it as you change the opacity. So if you decide to create a 70% opaque menu, just add this as your line in the CSS style:
opacity: 0.7;
But wait, it looks lovely in Firefox yet nothing seems to have happened in Internet Explorer. Still another bit to add:
filter: alpha(opacity=70);
With these 2 lines you have covered most of the commonly used modern browsers, your menu still works, and you have added a little something nifty to the design.
Posted in: Austin Web Design, How To, Web Development, WWW Learning Center
Comments are closed.
Latest & Greatest
- Responsive Web Design in Austin: Why It Matters For Your Local Business
- How to Prepare Your Website for a PR Campaign
- Why Defining Your Organization’s Strategy is Key to Brand and Marketing Development
- Empathetic Storytelling in an AI World
- Customer Retention: A Comprehensive Guide to Retaining Your Customers
- Top Reasons Why Web Designs Don’t Launch
- Your Website is About Them, Not You: Digital Customer Experience