Submenu with shadow in CSS Navigation Menu
Customize your menu to fit your website perfectly!
Question:
How can I have my submenus from Universal CSS Navigation Menu have a drop shadow?
Answer:
With a small CSS addition, every Submenu or Megamenu can have a shadow in the Universal CSS Navigation Menu.
1. Create a new CSS file
Create a new file in Dreamweaver. Save this file with a logical name in a logical location, for example the Styles folder in the root of your website.Add the following code to the new CSS file:
.dmxNavigationMenu ul.mega,
.dmxNavigationMenu ul.sub {
-moz-box-shadow: 5px 5px 5px #000;
-webkit-box-shadow: 5px 5px 5px #000;
box-shadow: 5px 5px 5px #000;
}
If you also want the menu bar to appear with a drop shadow, also add this code:
.dmxNavigationMenu {
-moz-box-shadow: 5px 5px 5px #000;
-webkit-box-shadow: 5px 5px 5px #000;
box-shadow: 5px 5px 5px #000;
}
Change the settings (color/drop) for the shadow so it fits your design an save the file.
2. Include new CSS file on pages
Include the file on all the pages containing the menu and upload all these pages. If your website uses a template, include the file in your template.
In the CSS Styles Panel click the Attach Style Sheet button.
Click the Browse button behind the File/URL field. Browse to the location where the custom CSS file was saved. Select the file and click OK to add it to the field. Make sure the Link radio button is selected and click OK once again to include the file on the page.
3. Upload all files
Upload the new CSS file and all the pages were this CSS file was included. Your Submenus and Megamenus will now appear with a drop shadow from now on.
4. General CSS 3 Information
For more background information on shadow with CSS3, please have a look at this:
http://www.css3.info/preview/box-shadow/
Want to know more on CSS3 in general, have a look here:
http://www.sitepen.com/blog/2008/12/08/taking-a-look-at-css3/
Note: This setting will not work in Internet Explorer.
Note: A custom CSS file has to be created to prevent all the changes being overwritten when this extension is updated.
Note: If the menu is only present on one page, you could also choose to place the CSS code straight onto the page, without the creation of a seperate CSS file.
Comments
Be the first to write a comment
You must me logged in to write a comment.