Drop down menus in expression web
Drop down menus are a much sought after effect in expression web. Using lists, CSS and a dwt we can make drop down menus for our expression web, web sites, that are, easy to update, easy to re-style and search engine friendly. This page uses a dropdown menu and the basic style was derived from this example
The example codes given here are the work of Stu Nicholls. CSSPlay
I visit Stu's site weekly just to sit back and be inspired, he truly is a great CSS master please do visit him and remember to give credit to stu if you use the menu example.
I would suggest that you build your menu into a DWT. This allows you to add or remove links in just one place and the changes will be made site wide. This is very simple to do and will save you huge amounts of time in the future. Just make sure you put the code into a non editable region. If you put it into an editable region, future changes to the menu will only apply to new pages. The existing pages will not be updated!
Hopefully, you already have a web template built? And somewhere in that template you have a div ready to be used for the navigation. If not then you have to make s space to hold the menu. Horizontal menus are usually placed just under the #mastehead (banner) so directly under the div that holds your banner insert a new div.
This page has a div called #top_nav, this is the div that i pasted the code into, having removed my existing navigation. Then apply the style sheet and the menu will appear.
Again in this pages example, i have further developed the menu by having styles for the #top_nav div links! In essence, overriding the style rule in the actual menu CSS which is separate from the site CSS rules.
For example:-
#top_nav a:hover {
color: #CCF0FF;
background-color: #0087BF;
}
All this bit of code is saying is keep the link as it is but with a text color change and a background color change for any links in the #top_nav div, when hovered.
You can download the XHTML and the CSS files in zip format here.
RSS
Reader not listed? Click here for more options
Expression Web Help RSS
Expression Web Help. Tips and Tricks and tutorials Get our feed now
