www.zeroonezero.com DDA CMT DDA Medical Dynamic Digital Advertising DDA Video DDA Apps DDA USA DDA SEM

DHTML Menus

Often you see the word DHTML thrown around a lot. DHTML, which stands for Dynamic HTML, isn’t a new language or a different version of HTML. It’s a blend of HTML events, Cascading Style Sheets, and the JavaScript Document Object model. To create menus that expand and collapse, you can use JavaScript menu toolkits like Spry and mm_menus, and mmenudom that are fairly easy to implement. You can’t always use menu toolkits if you need to make them creative and unique especially to make the menus work as the graphic designer envisions.

I first created the menu by positioning div elements with the link information, background images and styles applied it. The next step was assign the div menus ids and set the display CSS attribute to none. Then, all it took was to write functions that would use the onMouseOut and onMouseOver events. When the mouse went over the button the javscript within onMouseOver would be triggered, and I would have to perform two actions: change the image for the menu to show the alternate “over image” and the menu for hidden menu associated with that button would have to be shown. The problem that I ran into was when the mouse cursor went over the expanded menu, the menu would disappear, because the onMouseOut would close the menu.

What I had to do is figure out once the mouse has left the button what was the next element the cursor was over.  In the mouse out clause, I put a function that passed the event and the menu ID because by passing the event object I would be able to determine the next element the mouse was over. What slowed troubleshooting down was in Internet Explorer JavaScript uses event.toElement and other Mozilla browsers like Firefox, Opera and Safari use event.relatedTarget. After getting the next element the mouse was over, I wasn’t done programming, I would have to still traverse through all the parent nodes to make sure that the cursor was over or not over the element, because the target element would only return the top element like a link or list item not the div containing the expanded menu.

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • e-mail
  • Reddit
  • StumbleUpon
  • Furl
  • Technorati

Entry by: T-Bone

Search


type and hit 'enter'