1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Dropdown Menu Icons

Discussion in 'HTML & Website Design' started by moda92, Sep 28, 2015.

  1. #1
    Hello,

    I want to create some icons in my dropdown menu and was wondering how to do this?

    The website is www.gadjetsupply.com and here is an example of what I want to do:

    [​IMG]

    The yellow icons on the right dropdown menu is what I am trying to do.

    Thanks guys!
     
    moda92, Sep 28, 2015 IP
  2. Mak519

    Mak519 Member

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    31
    #2
    You can use pseudo elements . For example : .menu ul li ul li:before{ content:" "; background-image: url(""); width: 20px; height:20px; float: left;}
     
    Mak519, Sep 28, 2015 IP
  3. webcosmo

    webcosmo Notable Member

    Messages:
    5,840
    Likes Received:
    153
    Best Answers:
    2
    Trophy Points:
    255
    #3
    Put element with background url in <li>, like everything else.
     
    webcosmo, Sep 29, 2015 IP
  4. moda92

    moda92 Peon

    Messages:
    19
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #4
    Thanks for the reply guys. Which file do I need to add that code to please?
     
    moda92, Sep 29, 2015 IP
  5. moda92

    moda92 Peon

    Messages:
    19
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #5
    I added this code to the CSS but nothing changed unfortunately, I am still stuck
     
    moda92, Sep 30, 2015 IP
  6. webcosmo

    webcosmo Notable Member

    Messages:
    5,840
    Likes Received:
    153
    Best Answers:
    2
    Trophy Points:
    255
    #6
    You must add content and bcg image url.
    Or just add something like this to your current text container(it could work):
    1. background-image:url('your images url');
    2. padding-left: width of image in px;
    In your case(just change the images urls):

    #top-menu li li a {
    1. padding: 10px 20px 10px 48px;
    2. width: 160px;
    3. background-repeat: no-repeat;
    4. background-image:url('https://pbs.twimg.com/profile_images/636212894049378304/HQbUarE8_normal.png');
    }
     
    Last edited: Sep 30, 2015
    webcosmo, Sep 30, 2015 IP
  7. moda92

    moda92 Peon

    Messages:
    19
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #7
    Brilliant! This works, thanks a lot.

    The problem I now have is that the icons are all the same, is there a way to have different icons for different links in the menu?

    Thanks!!
     
    moda92, Sep 30, 2015 IP
  8. webcosmo

    webcosmo Notable Member

    Messages:
    5,840
    Likes Received:
    153
    Best Answers:
    2
    Trophy Points:
    255
    #8
    Than instead of applying 1 bcg-img on all li a-s, just add specific image url to each li a element.
     
    webcosmo, Sep 30, 2015 IP
  9. moda92

    moda92 Peon

    Messages:
    19
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #9
    I am not sure what you mean unfortunately... can you please show me the change I need to make to the code you gave me before? :

    #top-menu li li a {
    1. padding: 10px 20px 10px 48px;
    2. width: 160px;
    3. background-repeat: no-repeat;
    4. background-image:url('https://pbs.twimg.com/profile_images/636212894049378304/HQbUarE8_normal.png');
    }

    Thanks a lot !!
     
    moda92, Oct 1, 2015 IP
  10. webcosmo

    webcosmo Notable Member

    Messages:
    5,840
    Likes Received:
    153
    Best Answers:
    2
    Trophy Points:
    255
    #10
    If you want to change only css this is one of solutions:
    #top-menu li li:nth-child(1) a {
    background-image:url('url of first image');
    }
    #top-menu li li:nth-child(2) a {
    background-image:url('url of second image');
    }
    repeat this pattern for each menu item.
     
    webcosmo, Oct 1, 2015 IP
  11. moda92

    moda92 Peon

    Messages:
    19
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #11
    Fantastic, thanks a lot for this!! I tried this code and it allows me to have different icons for for the dropdown menu.

    I want to create three dropdown menus, is there a way to have different icons for the different dropdown menus? Thanks!!
     
    moda92, Oct 1, 2015 IP
  12. webcosmo

    webcosmo Notable Member

    Messages:
    5,840
    Likes Received:
    153
    Best Answers:
    2
    Trophy Points:
    255
    #12
    Sure it's possible, give each different dropdown menu id or class, and than repeat the same pattern like #top menu li .class1 li ... just experiment, play with it!
     
    webcosmo, Oct 2, 2015 IP
  13. moda92

    moda92 Peon

    Messages:
    19
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #13
    I tried to do your suggestion but I am struggling to get it to work, they are all still the same unfortunately
     
    moda92, Oct 8, 2015 IP
  14. mentat47

    mentat47 Greenhorn

    Messages:
    139
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    23
    #14
    this is sample add your things into it....
    1. background-image:;
    2. padding-left: width of image in px;
    #top-menu li a
    {
    1. padding:;
    2. width:;
    3. background-repeat:;
    4. background-image:url();
    }
    you can add things in these and then check it if it works if it don't then tell me so that i can add other changes that might work for your website..... by the way your website is very good. keep it up and make changes in it..
     
    mentat47, Oct 8, 2015 IP
  15. moda92

    moda92 Peon

    Messages:
    19
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #15
    Hi, thank you for this.

    I tried the code and it works but I cannot get it exactly how I need it - different dropdown menus should have different icons. So annoying that I can't fix it.
     
    moda92, Oct 9, 2015 IP
  16. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #16
    And, again, you'll need to give each of the dropdowns its own ID, so you can differentiate between each dropdown, then place the code you already have within each ID, and change the pictures to match.
     
    PoPSiCLe, Oct 9, 2015 IP
    webcosmo likes this.
  17. moda92

    moda92 Peon

    Messages:
    19
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #17
    Is there an example anywhere that shows how to do this please?
     
    moda92, Oct 9, 2015 IP
  18. webcosmo

    webcosmo Notable Member

    Messages:
    5,840
    Likes Received:
    153
    Best Answers:
    2
    Trophy Points:
    255
    #18
    webcosmo, Oct 13, 2015 IP
  19. moda92

    moda92 Peon

    Messages:
    19
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #19
    Thank you for this. I still don't understand it though if you can please show me the code for it then that would be absolutely awesome because I can't figure this out!
     
    moda92, Oct 27, 2015 IP
  20. smitexpert

    smitexpert Greenhorn

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #20
    It's really working. Thanks a lot.
     
    smitexpert, Nov 1, 2015 IP