Skip to main content
H
hhc85709902
Participant
October 31, 2017
Question

How to make list items have different color?

  • October 31, 2017
  • 2 replies
  • 2039 views

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>Home</li>

     <li>About Us</li>

     <li>Product</li>

     <li>Price</li>

     <li>Gallery</li>

     <li>Contact us</li>

</ul>

This topic has been closed for replies.

2 replies

Jon Fritz
Community Expert
Jon FritzCommunity Expert
Community Expert
October 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>

<meta charset="utf-8">

<title>Untitled Document</title>

<style>

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

        color:red;

    }

</style>

</head>

<body id="portfolio">

    <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>

BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
October 31, 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!
Firefly Community Gallery
Adobe Firefly

Remix with Firefly Community Gallery

Thousands of free creations to fall in love with and remix in Firefly.

Explore now
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices