jQuery Fly Out Menu Update, And Web Development Goodies

jQuery Fly Out Menu Update, And Web Development Goodies

JC Designs update

I know it has been like a week and a half since I last posted, but my life has been busy. Very busy. Today started out crazy, with a person in the UK wanting 63 psd files sliced and built. Ya, you read that right….63! I thought to myself “Self, this could be some good money.” All had the same outer shell, but the content areas were insanely packed with forms, icons, lists, navs…seriously a ton of work. Was for a online gaming company. You know how she found me? Googled “how to slice a psd” and I showed up on the bottom of one of the pages, she came here, clicked contact…and there you go. The problem? Budget was $1200 and needed it in 2 weeks. I actually felt bad turning that down, but there is no way I was going to go through that stress, and that amount of work for $1200. I was think at the least 5-6k.

Anyway, here is the list of goodies I’ll comment on later:

  • CSS3 -moz-crisp-edges, and -webkit-mask
  • CSS3 Gradient lines under links
  • CSS Regions

jQuery Fly Out Menu Update

New story now, still with me? A couple of days ago I received an really cool email from a guy that searched for “jquery fly-out menu” and got to my post here. He thanked me a lot for the menu, but was having problems with it in IE7 and 8 after doing some modifications to it. I had already tested it in those browsers and there were no problems. Unless of course you bring the width in so that the sub menus appear above the main menu. The problem is that in IE7/8, they appear below the other main nav li’s. I thought it would be a simple fix, but after 2 hours last night, I was getting really pissed. I solved it through random guessing and some head slapping.

That menu puts a position: relative on all the ‘li’ within the menu. Works fine if you don’t screw with my code because of the way I animate it. The solution? Couldn’t have been easier. Remove the relative position off of the ‘li’s and create a class that adds it back on hover (using jquery), and removes it on roll off. You can see the updated code on A Simple jQuery Fly Out Menu post. Soooo…”fixed” the menu, and I got to see someone use my menu on their site. Was very cool. He also noted that I was the only developer to actually help him, and that this was the 5th menu he’d tried. Also cool was the fact that his boss was excited to put me on paid retainer to help out when needed.

Recent Web Development Goodies – FF and Webkit are going nuts!

Let’s start off with CSS3 -moz-crisp-edges, and -webkit-mask. Smashing Magazine had a pretty good article about The Future of CSS: Experimental CSS Properties. It talked about some cool new stuff, and the first one I liked was -moz-crisp-edges. This is cool if you are doing responsive design, where the images scale as your window size shrinks/expands. It avoids blurry edges on the image as it is being manipulated by the browser. The CSS looks like this:

html  { image-rendering: -moz-crisp-edges; }        /* all images, videos, background-images */
img   { -ms-interpolation-mode: nearest-neighbor; } /* all images, IE */

You can read more about it and a few other properties on Mozilla’s image rendering documents.

The second one I liked was -webkit-mask. Basically it allows you to mask an image using an element with a CSS3 gradient applied to it, or a semi-transparent png. Very cool, and I can see myself using something like that with the gradient, but if I was going to go through the trouble of making a png to mask it, I might as well just create the entire thing in Photoshop. Here is what the CSS would look like:

.element2 {
	background: url(img/image.jpg) repeat;
	-webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

CSS3 Gradient lines under links

I don’t know about you guys, but I build a LOT of different kinds of navigations. A very common thing I see come across my desk is to use a line between the links, or under them to show they are being hovered over. I’ve been using images to get the effect going, but this cool cat wrote some nice styles to do it with just CSS. He’s got a version that does not use pseudo-elements too! Read it and thank me for passing this on to you. Oh, and scroll down on his page and check out the link about adding depth to a website. Easy, simple, and I can’t believe I haven’t seen more of that.

CSS Regions – Ask and ye shall receive!

A while back I wrote about wishing you could create shapes using CSS. Weird ass shapes, like polygons, circles or whatever. Well gues what? Adobe, of all people obviously reads my blog, and because they respect me sooooo much, decided that was a GREAT idea. It’s called CSS Regions. There are a TON of different properties invovled, but here is a list from their site about it:

  • Story threading — allows content to flow in multiple disjointed boxes expressed in CSS and HTML, making it possible to express more complex, magazine-style threaded layouts, including pull quotes and sidebars.
  • Region styling — allows content to be styled based on the region it flows into. For example, the first few lines that fit into the first region of an article may be displayed with a different color or font, or headers flowing in a particular region may have a different background color or size. Region styling is not currently implemented in the CSS Regions prototype.
  • Arbitrary content shapes and exclusions — allows content to fit into arbitrary shapes (not just rectangular boxes) or to flow around complex shapes.

You can download demos of it here and see some samples. The below CSS example is from a section of a pie chart, so this one line will make one piece of pie:

.slice4 .region {
-webkit-wrap-shape: polygon(217px, 225px 217px, 225px 217px, 0px 179px, 3px 143px, 12px 110px, 26px 80px, 46px 53px, 70px 31px, 98px 13px, 131px 0px, 167px 217px, 225px 217px, 225px )
}

Ok, I know I wished for it, but I really don’t want to plot all that out. This is one of those “cool” things, but totally impractical. Can’t see myself ever doing that even if it was supported by all modern browsers. Who knows though. Never say never.

They are good discussion pieces, but would you use them?

Honestly, these are all pretty neat. I would use the gradient lines and the -moz-crisp-edges, but the the shapes in CSS Regions…not so much. The documents talk about other things that might be useful, but I dislike things that only work in one browser.

What do you guys think?

Coupon Code: webmachine

Tags: ,

Leave a Reply