Results 1 to 5 of 5

Thread: Adding icons to Accordion Menu: menuitem and submenuheader

  1. #1
    Join Date
    Apr 2008
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Adding icons to Accordion Menu: menuitem and submenuheader

    1) Script Title: Accordion Menu script

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ordionmenu.htm

    3) Describe problem: I am trying to find a way to add a unique small .gif icon to the left side of each menuitem and submenuheader of the Accordion Menu. Is this possible?
    I have the menu working just great here: http://scs-intl.com/trader/bumper_st...newmenu_10.htm
    However I want it to use the "glossymenu" buttons as they are but with the icons I have in my old frames menu.
    http://scs-intl.com/trader

    Any help would be very appreciated. I have tried to read all related threads and documentation and I cannot find a solution.
    Thanks for the great script

  2. #2
    Join Date
    Aug 2004
    Posts
    9,903
    Thanks
    3
    Thanked 967 Times in 955 Posts
    Blog Entries
    15

    Default

    What you can do is give each LI element a background image, with that image being the desired icon. Something like:

    Code:
    <li style="background:urltrader/navimages/folder.gif) center left no-repeat"><a href="http://google.com">Image CSS</a></li>
    <li style="background:urltrader/navimages/folder2.gif) center left no-repeat"><a href="http://yahoo.com">Background CSS</a></li>
    "
    "
    Once you've done that, you'll find you need to increase the left padding of each link, so the icon doesn't overlap the link text. Inside the CSS for the menu, the line in red would be what you'd change:

    Code:
    .glossymenu div.submenu ul li a{
    display: block;
    font: normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
    color: black;
    text-decoration: none;
    padding: 2px 0;
    padding-left: 25px;
    }

  3. The Following User Says Thank You to ddadmin For This Useful Post:

    tuva trader (05-02-2008)

  4. #3
    Join Date
    Apr 2008
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question

    This gets it working for the <li> tag but I had to modify the tag as such:
    <li style="background-image:url('../navimages/folder.gif'); background-repeat: no-repeat;">

    The problem remains of how to get the <a> tags to do the same:
    <a class="menuitem" href="../search.htm">Search The Website</a>

    is there a way to get icon's into these as well?

    Thank you again.

  5. #4
    Join Date
    Aug 2004
    Posts
    9,903
    Thanks
    3
    Thanked 967 Times in 955 Posts
    Blog Entries
    15

    Default

    The technique I described above relies on targeting a container element other than the A itself to stick the icon into. That's because the A themselves already carry a background image that render the blue glossy look. I'm not sure there's an easy way to preserve the existing Glossy Menu style fully while having icons appear on every menu item, instead of just the sub menu items...

  6. The Following User Says Thank You to ddadmin For This Useful Post:

    tuva trader (05-02-2008)

  7. #5
    Join Date
    Apr 2008
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    I'd certainly welcome an even not-so "easy way" to put small icons into each menu item. The main thing that I need is for the icons to appear to the left of the text and still have the rollover effect. If anyone in the dd forum community can think up a work-around it would be great.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •