Loading ...
Sorry, an error occurred while loading the content.
 

Re: [ydn-javascript] Re: Adding icons to menu items

Expand Messages
  • Todd Kloots
    Hi Debby - If you wish to add an icon to a menu item, you would do so by defining a background image in CSS. One of the existing menu examples demonstrates
    Message 1 of 5 , Aug 28, 2006
      Hi Debby -

      If you wish to add an icon to a menu item, you would
      do so by defining a background image in CSS. One of
      the existing menu examples demonstrates what the CSS
      would look like:

      http://developer.yahoo.com/yui/examples/menu/programsmenu.html

      Each MenuItem instance has an "element" property that
      is a direct reference back to the item's corresponding
      <LI> node. You can use this reference to add an icon
      to your menu items "programmatically."

      Start by using CSS to define a class or ID selector
      that assigns the item's element a background image.
      If you choose to create a CSS class, apply that class
      to the item's corresponding <LI> element via the DOM
      utility like this:

      YAHOO.util.Dom.addClass(oMenuItem.element,
      "debbysclassname");

      If you define the background image via an id selector
      in CSS, you'd just give the item's element the proper
      id:

      oMenuItem.element.id = "debbysid";

      I hope that helps you with your project.

      - Todd

      --- Debby <dsdart@...> wrote:

      > Can somebody help out with the code for this? I
      > have limited
      > knowledge in javascript and inheritance and need to
      > add images to menu
      > items programmatically.
      >
      > thanks,
      > Debby
      >
      > --- In ydn-javascript@yahoogroups.com, "Sebastien
      > Brunot"
      > <sbrunot@...> wrote:
      > >
      > > Thanks for your help !
      > >
      > > I've defined a new class that inherit from
      > ContextMenuItem and
      > defines a new
      > > "icon" property (an image URL), the icon beeing
      > defined as the
      > > background-image property of the item LI element
      > (with
      > background-repeat set
      > > to "no-repeat") and it works very well.
      > >
      > > Sebastien
      > >
      > > -----Original Message-----
      > > From: ydn-javascript@yahoogroups.com
      > [mailto:ydn-javascript@yahoogroups.com]
      > > On Behalf Of Todd Kloots
      > > Sent: mercredi 14 juin 2006 18:54
      > > To: ydn-javascript@yahoogroups.com
      > > Subject: Re: [ydn-javascript] Adding icons to menu
      > items
      > >
      > > Hi Sebastien -
      > >
      > > You can add icons by giving the LI for each item a
      > background image
      > via CSS.
      > >
      > > - Todd
      > >
      > >
      > >
      > >
      > > --- Sebastien Brunot <sbrunot@...> wrote:
      > >
      > > > Hi,
      > > >
      > > > Has anybody found an easy way to add icons
      > (images) to menu items
      > in a
      > > > menu ?
      > > >
      > > > Thanks for your help,
      > > >
      > > > Sebastien
      > > >
      > > >
      > > >
      > > > ------------------------ Yahoo! Groups Sponsor
      > > > --------------------~--> Everything you need is
      > one click away. Make
      > > > Yahoo!
      > > > your home page now.
      > > >
      > >
      >
      http://us.click.yahoo.com/AHchtC/4FxNAA/yQLSAA/edFolB/TM
      > > >
      > >
      >
      --------------------------------------------------------------------~->
      > > >
      > > >
      > > >
      > > > Yahoo! Groups Links
      > > >
      > > >
      > > > ydn-javascript-unsubscribe@yahoogroups.com
      > > >
      > > >
      > > >
      > > >
      > > >
      > > >
      > > >
      > > >
      > >
      > >
      > >
      > > ------------------------ Yahoo! Groups Sponsor
      > --------------------~--> Home
      > > is just a click away. Make Yahoo! your home page
      > now.
      > >
      >
      http://us.click.yahoo.com/DHchtC/3FxNAA/yQLSAA/edFolB/TM
      > >
      >
      --------------------------------------------------------------------~->
      >
      > >
      > >
      > > Yahoo! Groups Links
      > >
      >
      >
      >
      >
      >
      >
      >
      > Yahoo! Groups Links
      >
      >
      > ydn-javascript-unsubscribe@yahoogroups.com
      >
      >
      >
      >
      >
      >
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.