How to make list items have different color?

Report · Oct 30, 2017

How to make the list items have different text and background color as show? Since I need to change one of the list item text and background color when that page is active.

<ul>

<li>About Us</li>

<li>Product</li>

<li>Price</li>

<li>Gallery</li>

<li>Contact us</li>

</ul>

Report · Oct 30, 2017

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
a {
padding: 0.25em;
}
a.active {
color: aquamarine;
background: blue;
}
</style>
</head>
<body>
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Price</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact us</a></li>
</ul>
<body>
<html>

Copy and paste the above in a new document and view in browser

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Oct 31, 2017

If you need the menu to respond to the page it's on, and don't want to need to update the menu code on every page, it's easier to...

1. Add a unique id to the <body> tag of each page, for example:

<body id="portfolio"> or <body id="about">
2. Add descriptive classes to <a> tags in each <li>, for example:

<li><a class="portfolio">Portfolio</a></li> and <li><a class="about">About</a></li>
3. Target the id and class with css selectors so they're only active on pages where they match, for example:
#portfolio .portfolio, #about .about {color:red;}
4. The same menu can then be used on every page, and only the link that matches a given page's <body> id will change...

<!doctype html>

<html>

<head>

<title>Untitled Document</title>

<style>

#portfolio .portfolio, #about .about, #contact .contact {

color:red;

}

</style>

</head>

<ul>

<li><a class="about">About</a></li>

<li><a class="portfolio">Portfolio</a></li>

<li><a class="contact">Contact</a></li>

</ul>

</body>

</html>