CODEWITHSUNDEEP
htmlcssnav
Geoff_S
Geoff_S

Reputation: 5107

html & css - using different image between each nav menu item as separator

I've yet to see a known-good way of using a different image between different nav menu elements, though I know there is a way to use one image as the consistent separator.

I have seven nav elements:

#menu-item-26{
}
//blue square here
#menu-item-25{
}  
//yellow square here
#menu-item-24{
}
//red square here
#menu-item-23{
}
//pink square here
#menu-item-22{
}
//green square here
#menu-item-21{
}
//purple square here
#menu-item-20{
}

And I've created 6 images in photoshop, essentially just 10px by 10px squares, each a different color. I want to use a different one between each set but I don't know if it would need to be used as a background image with each item and padding or if maybe there's another responsive-friendly way.

Upvotes: 0

Views: 230

Answers (2)

hungerstar
hungerstar

Reputation: 21675

You have a lot of options available to you. You can use an element to place the image, I would start with <img> unless you have a good reason not to. Though you can use it as a background image too. Simply use background-position to place it on the element and provided a little extra padding for the background image to reside in.

Here's a couple options.

Using an Element <img>

body {
  margin: 0;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  display: inline-block;
}

li img {
  padding: 0.25rem;
  vertical-align: middle;
}
<ul>
  <li><img src="http://placehold.it/10x10/fc0"><a href="#">One</a></li>
  <li><img src="http://placehold.it/10x10/"><a href="#">Two</a></li>
  <li><img src="http://placehold.it/10x10/fc0"><a href="#">Three</a></li>
  <li><img src="http://placehold.it/10x10/"><a href="#">Four</a></li>
  <li><img src="http://placehold.it/10x10/fc0"><a href="#">Five</a></li>
</ul>

Using as Background Image

body {
  margin: 0;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  display: inline-block;
}

li {
  padding: 0.25rem 0.25rem 0.25rem 1rem;
  background-position: left center;
  background-repeat: no-repeat;
}

li:nth-child(odd) {
  background-image: url( 'http://placehold.it/10x10/fc0' );
}
li:nth-child(even) {
  background-image: url( 'http://placehold.it/10x10' );
}
<ul>
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
  <li><a href="#">Five</a></li>
</ul>

--- Edit ---

After seeing an answer to a comment above. Since your images are actually a solid color you can use elements with a background color to reduce network requests and simplify maintenance and flexibility of application.

Using Elements Instead of Images

body {
  margin: 0;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

li,
i {
  display: inline-block;
}

li i {
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.5rem;
  vertical-align: middle;
}

li:nth-child(odd) i {
  background-color: gold;
}
li:nth-child(even) i {
  background-color: lightgray;
}
<ul>
  <li><i></i><a href="#">One</a></li>
  <li><i></i><a href="#">Two</a></li>
  <li><i></i><a href="#">Three</a></li>
  <li><i></i><a href="#">Four</a></li>
  <li><i></i><a href="#">Five</a></li>
</ul>

You could also use a pseudo element instead of an actual element like above.

Using Pseudo Elements Instead of Images

body {
  margin: 0;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  display: inline-block;
  padding: 0 0.5rem;
}

li:before {
  content: '';
  display: inline-block;
  position: relative;
  left: -0.5rem;
  width: 0.5rem;
  height: 0.5rem;
  vertical-align: middle;
}

li:nth-child(odd):before {
  background-color: gold;
}
li:nth-child(even):before {
  background-color: lightgray;
}
<ul>
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
  <li><a href="#">Five</a></li>
</ul>

Upvotes: 2

WizardCoder
WizardCoder

Reputation: 3461

Maybe something like this, using :before selector and the content:""; style.

.fancy-separator li {
  list-style:none;
  float:left;
  margin-left:10px;
  padding-left:10px;
}
.fancy-separator > li:first-child {
  content:none;
  margin-left: 0;
}
.fancy-separator > li:before {
  content:"";
  width:10px;
  height:10px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  left: -10px;

}
.fancy-separator > li:nth-child(2)::before {
  background: blue;
}
.fancy-separator > li:nth-child(3)::before {
  background: yellow;
}
.fancy-separator > li:nth-child(4)::before {
  background: red;
}
.fancy-separator a {
 text-decoration:none;
}
<ul class="fancy-separator">
  <li><a href="#">home</a></li>
  <li><a href="#">about</a></li>
  <li><a href="#">news</a></li>
  <li><a href="#">contact</a></li>
<ul>

Upvotes: 3

Related Questions