CODEWITHSUNDEEP
htmlcsshtml-lists
DomingoSL
DomingoSL

Reputation: 15494

Less painful way to add a different icon to each link on a <li> (html list)

take a look of this: http://jsfiddle.net/PFQke/

I want to add some icons to that menu system in a smart way, im not a front-end developer, so i suck at css.

This is what i like to have:

enter image description here

Thanks for any help!

Upvotes: 7

Views: 15713

Answers (3)

CaNNaDaRk
CaNNaDaRk

Reputation: 1322

Adding to each <li> a class like this:

<div id="vertmenu"> 
   <ul>
      <li class="home-ico"><a href="#" tabindex="1">Home</a></li>

Then add some css code:

#vertmenu .home-ico {
   background: url("path_to_img") no-repeat top left;
   padding: 2px 0 0 25px;
}

This is just an example, but you can start from this.
In example that padding has to be adjusted in case your icon is more than 25px large.

Upvotes: 8

Jose Faeti
Jose Faeti

Reputation: 12294

First and foremost use classes to differentiate items.

Those are different icons, so you need to give a different url attribute to the background-image property of each of those <a>. Even if you have them in a single image (sprites), you will still need to give them different coordinates each.

#vertmenu a.link1 {
  background-image: /* background image for a#1 */
}
#vertmenu a.link2 {
  background-image: /* background image for a#2 */
}

Do you use a single image for every icon (sprites)?

#vertmenu a {
  background-image: /* specify it only once */
}
#vertmenu a.link1 {
  background-position: /* background pos for a#1 */
}
#vertmenu a.link2 {
  background-position: /* background pos for a#2 */
}

Alternatively, you could insert your image in the div containing your menu, and use only one image. This way you will need only one css rule, but you won't have the rollover effect on the single images.

Something like this.

Upvotes: 2

Gerben
Gerben

Reputation: 16825

html:

<ul id="vertmenu">
  <li class="home"><a href="#">Home</a></li>
  <li class="about"><a href="#">About Us</a></li>
  ...
  <li class="links"><a href="#">Links</a></li>
</ul>

css:

#vertmenu {
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 12pt;
  width: 160px;
  padding: 0;
  margin: 0;
  border: none;
}
#vertmenu li {
  list-style: none;
  margin: 0;
  padding: 0;
  background: none no-repeat left 50%;/* left and centered */
}
#vertmenu .home {
  background-image: url(home.jpg);/*specify image here*/
}
#vertmenu .about {
  background-image: url(about.jpg);
}
/* ... etc. ... */
#vertmenu a {
  font-size: .8em;
  display: block;
  padding: 5px 0px 2px 20px;/* change 20px to width of icon+some padding*/
  text-decoration: none;
  color: #666666;
  /*width:160px; not needed. also should have be 156px because of the 4px left padding */
}
#vertmenu a:hover, #vertmenu a:focus {
  color: #000;
  background-color: #eeeeee;/* will hide the icon!!*/
}

Upvotes: 1

Related Questions