Categories
CSS Expression Web News Tutorials

Read my article in the Microsoft Expression November Newsletter

A month or so ago Microsoft contacted me and asked if I would write an article on Expression Web for their Expression Newsletter. How could I say no to such an opportunity? After some back and forth about the topic I landed on an article on how to create a Pure CSS Drop-Down menu. Over time I’ve encountered numerous solutions, most of which were clunky and didn’t work properly. So the tutorial demonstrates how to create a fully functional CSS-only drop-down menu utilizing the excellent CSS features in Expression Web.

That’s not to say you have to use Expression Web to get something out of the article though. You can follow the tutorial and get the same results even if you’re using Notepad to build your sites. It’s just that Expression Web makes it a hell of a lot easier to manage.

This article comes hot on the heels of my book Sams Teach Yourself Microsoft Expression Web 2 in 24 Hours which contains an expanded tutorial on the same topic that also covers a layers-based drop-down menu. If you are an Expression Web 2 user of if you are considering buying or switching over to this excellent web authoring and publishing platform I humbly suggest you pick up a copy for yourself. It’s a quick read and it gives you hour-by-hour instructions on how to create a web site from scratch with the application. And once you’re done, you’ll have a fully working and standards based web site at your disposal. I wrote it as the book I wish someone had written when I started out and from the response I’ve gotten so far people are learning a lot from it. Which is what I set out to do.

If you’re interested in a preview of the kind of content you’ll find in the book or you just want to know how to make a Pure CSS Drop-Down menu, you can read the full article, The No-Code Way to a Pure CSS Horizontal Drop-Down Menu with Expression Web, here or subscribe to the Expression Web Newsletter.

By Morten Rand-Hendriksen

Morten Rand-Hendriksen is a staff author at LinkedIn Learning and lynda.com specializing in WordPress and web design and development and an instructor at Emily Carr University of Art and Design. He is a popular speaker and educator on all things design, web standards and open source. As the owner and Web Head at Pink & Yellow Media, a boutique style digital media company in Burnaby, BC, Canada, he has created WordPress-based web solutions for multi-national companies, political parties, banks, and small businesses and bloggers alike. He also contributes to the local WordPress community by organizing Meetups and WordCamps.

11 replies on “Read my article in the Microsoft Expression November Newsletter”

Hi! I am enjoying your article from the Expression newsletter. The css menu is a smooth idea. However, I am haveing a problem with the project. I cannot seem to enlarge the link area to cover the 30×150 box. I choose text height 30, and it does center it vertically, but doesn’t increase the “grey cover” as shown in the next figure.

To solve this we need to increase the area the link covers. This is done by defining the height and width of the link to match the list item boxes you created earlier. In the Manage Styles task pane right click the ul li a style and select Modify Style to get back to the Modify Style dialog.

“To set the height of the link go to the Block category and set the line-height attribute to 30px to match the height of the ul li style you defined earlier. The reason you are using the line-height attribute instead of the height attribute is that line-height automatically places the text at vertical center. If you were to use height you would have to set the vertical placement manually using padding. To set the width, go to the Position category and set width to 150px to match.”

From my css page:

ul {
padding: 0px;
margin: 0px;
}
ul li {
display: inline;
float: left;
width: 150px;
font-family: Arial, Helvetica, sans-serif;
font-size: .9em;
text-transform: uppercase;
height: 30px;
list-style-type: none;
}
ul li a {
margin: 0px;
background-color: #808080;
color: #FFFFFF;
text-decoration: none;
width: 142px;
line-height: 30px;
padding-left: 8px;
}

I would really appreciate a clue. I thought you had put together a good tutorial for someone at my entry level, clear and useful.

Help me get back on the track.

Richard

Richard:

You are actually just missing one line of code: You have to set the display attribute of the anchor as “block”, otherwise it gets treated as an inline element. So, in ul li a add “display: block;” and you are good to go.

You can find a full working version of the menu here and it’s CSS here for reference.

Thanks for setting this back in place. As a beginning css writer I find that I need every i dotted as I laboriously code from one line to the next. In a way, I learn even when the code doesn’t work, it makes me try some other ideas and look more closely at the processes. So thanks for an article that pulled me beyond my comfort zone, that helps.

Once I had the display to block handled the menu worked, pretty well. However, when I would hover over the main menu item, the drop down would drop down, but without text until I moused over the drop down list items themselves. Then they would show the text.

I can only imagine what it must be like to include EVERY step in a long sequence (especially one that is put up somewhere else). By combining some sources I came across that Block Display feature again.

When the mouseover triggers the “a” instead of making the link “visible” it seems to work better if it triggers “block display”. Now the drop down is smooth.

ul li:hover ul {
visibility: visible;
background-color: ;
display: block;
}

Thanks again for helping me with expression web and css. Motivating a newbie to try something is big, and appreciated. I look forward to the next installment.

Richard

okay. Trying to share code is harder than it looks. I retried the change I found above and it didn’t work anymore. I had found the display block change idea in the “coffee break training section” of the expression newsletter under another version of the “Creating Standards Based Drop Down Menus”, but I had missed a part of the instructions.

By relating the codes in the “hide” and “show” sections, it seems to be working again.

ul li ul {

display: none;
}
ul li:hover ul {
display: block;

}

Sorry for any confusion I may have scattered.

Richard (coding at the “hopes this works” level)

Hi Richard. I’ll split this answer in half:

In the first comment you mention that when you got the menu items to drop down the text didn’t show until you hovered over the items. The only way I can imagine that would happen would be if your text colour matched the background colour for the non-hover state. There is no code in the tutorial that hides the text in any other way. I’d like to see your code to see what is going on. I’m a curious guy.

To your second point about using display instead of visibility to hide the drop-down menu: Test your menu in Opera. Opera is a very “unforgiving” browser – in other words it is a bit of a stickler for proper code. You’ll see that when you use the block technique, the drop-down areas leave remnants after being collapsed. This is because you are not actually hiding the drop-down portions but instead refusing to define an area for them to occupy. This works most of the time but can also lead to some weird results.

The display technique may work but is not as safe as the visibility technique.

Glad to see you are learning something from my tutorial. Feel free to ask any other questions that may arise. I’m always ready for a challenge!

Hi Morten, thanks for helping me untangle my coding. I posted both versions of the menu on my site. http://www.skystonemedia.com (look for the link on my Contact page).

Your point about Opera is well taken, and provided another clue. I am using IE8 and the visibility method doesn’t seem to work very well. But when I use “compatiblitiy mode”, both versions work as expected.

I liked your comment about coding for IE6 (like distributing on VHS because not everyone has a DVD player). I hope the compatiblity issues can someday be resolved and level the field for different browsers. Until then, is it all “hit or miss” without extreme coding? The idea of trying to accommodate every browser seems daunting (for a non-commercial site).

By the way, on one of the menus is a link to some primitive Blend/Encoder stuff. Maybe could give you an idea for another Expression newsletter project. I do enjoy and learn from your tutorials.

RIchard

IE8 is still not in its final release so it is quite possible that it doesn’t handle the visibility attribute properly. It is a little weird though because the whole point of IE8 is that it is supposed to be standards compliant, and the visibility method is standards compliant. I have to check it myself to see what you are talking about. too curious.

Comments are closed.