CODEWITHSUNDEEP
htmlcss
quarks
quarks

Reputation: 35346

CSS style for a Navbar

I have this Navbar and I and I want that when a anchor is clicked it get's underlined using CSS:

<div id="nav"> 
            <a data-field="home" class="nav-menu">Homepage</a> <span>|</span>
            <a data-field="about" class="nav-menu">About us</a> <span>|</span>
            <a data-field="support" class="nav-menu">Support</a> <span>|</span>
            <a data-field="contact" class="nav-menu">Contact</a>        
</div>

Also how can I make the same thing with a list:

<ul>
    <li><a data-field="home" id="homelink" class="tray-menu" id="tray-active" >Homepage</a></li>
    <li><a data-field="news" id="newslink" class="tray-menu">News</a></li> 
    <li><a data-field="products" id="productslink" class="tray-menu">Products</a></li>
    <li><a data-field="sales" id="saleslink" class="tray-menu">General Sales T&C</a></li>
    <li><a data-field="job" id="jobslink" class="tray-menu">Job Opportunities</a></li>
</ul>

In this case, this case how do I make a <li> element get a specific "selected" css style while the other <li> in the gets grayed out or something?

In Javascript its easy, just manipulate the DOM and set the id or class tag.

Update:

Basically, I have this working, but with using Java (GWT); However I want to know if this is possible to do using just plain CSS and HTML

Upvotes: 0

Views: 276

Answers (3)

Ryan Dunphy
Ryan Dunphy

Reputation: 848

Sounds like the :target pseudo selector might do the trick. (*See http://css-tricks.com/on-target/ ) (Will not work in older versions of IE)

HTML

<ul>
  <li id="homelink"><a href="#homelink" data-field="home" class="tray-menu" id="tray-active">Homepage</a>  </li>
  <li id="newslink"><a href="#newslink" data-field="news" class="tray-menu">News</a></li> 
  <li id="productslink"><a href="#productslink" data-field="products" class="tray-menu">Products</a></li>
  <li id="saleslink"><a href="#saleslink" data-field="sales" class="tray-menu" href="#saleslink">General Sales T&C</a></li>
  <li id="jobslink"><a href="#jobslink" data-field="job" class="tray-menu">Job Opportunities</a></li>
</ul>

CSS

:target {
text-decoration: underline;
color: red;
}

Upvotes: 1

Suresh Atta
Suresh Atta

Reputation: 122026

for "a" links (the below lines applies for all links in the page)

a:active 
{
text-decoration:underline;
color:red;
}

for second issue give a classname to ul like myul

<ul class="myul">


.myul li {
 background-color:red;
}
.myul li.selected {
 background-color:blue;
}

Upvotes: 0

Adam Brown
Adam Brown

Reputation: 2870

If you want this effect on the whole page use:

a:link 
{
text-decoration:none;
color:#000;
}
a:visited 
{
text-decoration:none;
color:#000;
}
a:hover 
{
text-decoration:none;
color:#008F68;
}
a:active 
{
text-decoration:underline;
color:#000;
}

Or for just the Navigation use the same but put 'li' in front of everything.

The 'Active' attribute' of the CSS is the one that is called upon click.

Upvotes: 2

Related Questions