...

View Full Version : Different colored square bullet on every navigation item



lmorales
08-06-2012, 03:41 PM
My site is up at mmp.power1.com. I want to change the menu so that each menu item has a different colored square bullet on it. How do I accomplish that?

AndrewGSW
08-06-2012, 04:00 PM
.mainnav li {
float: left;
position: relative;
z-index: 999;
height: 20px;
line-height: 20px;
margin-right: 20px;
list-style-image:url(images/square.png);
}

.mainnav li:nth-child(2) {
list-style-image:url(images/square2.png);
} /* etc.. OR */

.mainnav li:nth-child(2n+2) {
list-style-image:url(images/square2.png);
} /* Every second element etc.. */

This is CSS3 so is flakey (flawed?) in IE. Otherwise you could apply class names to the individual li elements and apply image-bullets to the classes.

VIPStephan
08-06-2012, 05:51 PM
No need for “flakey” CSS 3. And no need for background images. Here’s a better way, based on Andrew’s code (we’re disregarding IE 7 and below anyway):



.mainnav li {
position: relative;
padding-left: 15px;
}
.mainnav li:before {
content: "";
border: 5px solid;
position: absolute;
left: 0;
top: 5px; /* change that to your desire */
}
.mainnav li:first-child:before {border-color: red;}
.mainnav li:first-child + li:before {border-color: green;}
.mainnav li:first-child + li + li:before {border-color: yellow;}
.mainnav li:first-child + li + li + li:before {border-color: blue;}




You can achieve the same effect with assigning a height and width and background color to the generated content rather than using borders.

lmorales
08-06-2012, 05:59 PM
Ok, would I have to call the classed within my ul nav? My biggest issue is this whole things in php and Im not sure where the heck the list is.

AndrewGSW
08-06-2012, 06:02 PM
That's sensible, seeing as we only want squares anyway :thumbsup:

I suppose background-image can be used in place of border-color, if an image is required..

VIPStephan
08-06-2012, 08:53 PM
Ok, would I have to call the classed within my ul nav? My biggest issue is this whole things in php and Im not sure where the heck the list is.

You can find your list easily by looking at the output source code (view source in browser or using a debugging tool thatís usually built into the browser already). And your menu code looks like this:


<ul id="menu-left" class="mainnav superfish">
<li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11"><a title="Mega My Pixel" href="index.php">HOME</a></li>
<li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12"><a title="behind the lens" href="http://mmp.power1.com/?page_id=7">BEHIND THE LENS</a></li>
<li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13"><a title="buzz" href="http://mmp.power1.com/?page_id=17">BUZZ</a></li>
<li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14"><a title="clientele" href="http://mmp.power1.com/?page_id=19">CLIENTELE</a></li>
<li id="menu-item-31" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-31"><a href="http://http://http://mmp.power1.com/?page_id=28">BUY MY ART</a></li>
<li id="menu-item-25" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-25"><a href="http://mmp.power1.com/?page_id=23">CONNECT</a></li>
<li id="menu-item-32" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-32"><a href="http://mmp.power1.com/?page_id=21">LOGIN</a></li>
</ul>


And there we see that there are already IDs and classes so you donít need all these sibling selectors I posted, you can address the elements directly via the IDs.

lmorales
08-06-2012, 09:41 PM
Thanks!!

lmorales
08-07-2012, 05:21 PM
So that worked for the bullets... but they are all showing up as white?

VIPStephan
08-07-2012, 05:28 PM
Yeah, of course you need to assign a border color, otherwise it takes the default text color which is white in this case. If you need a different color for each list item use:


#menu-item-11:before {border-color: red;}
#menu-item-12:before {border-color: green;}
#menu-item-13:before {border-color: blue;}


Or use the method with the sibling selectors I demonstrated earlier if you can’t be sure that the IDs will always be like that (e. g. if you add/remove or change the order of pages).

lmorales
08-07-2012, 06:26 PM
o.o i think i just broke my website... I checked to see if it was the footer doing it, its not, checked the main menu css which i dont think it is, Ive only been tinkering with the main menu css, style css and footer.php.... Im wondering how i broke it.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum