selected css menu style change using css

Question

I have a css menu in my aspx page.I want the selected menu to have the same style as hover menu(change the color).I have the css for both hover and current selected menu,and hover is working fine. I have googled this problem and solution was to set "class= current" in the li section of the html code.But my doubt is whether I have to set "class=current" each li sections or is there any need of javascript to report which one is selected out of the menu. I am newbie to css.Please help me..

 <div id="tabsJ">
   <ul class="menu">
   <!-- CSS Tabs -->
     <li><a href="DataLog.aspx"><span>Reports</span></a></li>
     <li><a href="EmployeeDetails.aspx"><span>Employee</span></a></li>
     <li><a href="EquipmentDetail.aspx"><span>Equipment</span></a></li>
     <li><a href="ScannerDetail.aspx"><span>Scanner</span></a></li>
   </ul>
 </div>

I have used this css

#tabsJ {
  float:left;
  width:100%;
  background:#F4F4F4;
  font-size:93%;
  line-height:normal;
      border-bottom:1px solid #24618E;
  }
#tabsJ ul {
    margin:0;
    padding:10px 10px 0 50px;
    list-style:none;
  }
#tabsJ li {
  display:inline;
  margin:0;
  padding:0;
  }
#tabsJ a {
  float:left;
  background: url("../images/tableftJ.gif") no-repeat left top;
  margin:0;
  padding:0 0 0 5px;
  text-decoration:none;
  }
#tabsJ a span {
  float:left;
  display:block;
  background:url("../images/tabrightJ.gif") no-repeat right top;
  padding:5px 15px 4px 6px;
  color:#24618E;
  }
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsJ a span {float:none;}
/* End IE5-Mac hack */
#tabsJ a:hover span {
  color:#FFF;
  }
#tabsJ a:hover {
  background-position:0% -42px;
  }
#tabsJ a:hover span {
  background-position:100% -42px;
  }

    #tabsJ #current a {
            background-position:0% -42px;
    }
    #tabsJ #current a span {
            background-position:100% -42px;
            color:#FFF;
    }

Sam Warren - Added jsfiddle - http://jsfiddle.net/ejLTy/

Actually I have this menubar in the masterpage for all the four pages,DataLog.aspx,EmployeeDetails.aspx,EquipmentDetail.aspx and ScannerDetail.aspx.

Vijay Sarin · Accepted Answer · 2012-03-19 09:39:33Z

1

No Need of JavaScript. Just change li as,

<li class="current"><a href="DataLog.aspx"><span>Reports</span></a></li>
<li><a href="EmployeeDetails.aspx"><span>Employee</span></a></li>
<li><a href="EquipmentDetail.aspx"><span>Equipment</span></a></li>
<li><a href="ScannerDetail.aspx"><span>Scanner</span></a></li>

for page DataLog.aspx. Use the same routine for all pages by changing the li class as current.

For hover use the pseudo element property in css called

your_division:hover

answered Mar 19, 2012 at 9:39

Vijay Sarin

1,3361 gold badge11 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

smrpm Over a year ago

It have to be '<li id="current"><a href="DataLog.aspx"><span>Reports</span></a></li>'Thanx for noting that I have to change it in all the pages.Just want to know If I have the menubar in master page what method can be used to make selected menu in different color

Vijay Sarin Over a year ago

If you want any of the "li" element in different color, i prefer you write an inline style for that "li" element. JUST like <li class="current" style="background-color:green;">

Shailender Arora · Accepted Answer · 2012-03-19 10:14:57Z

1

check it the example of your updated CSS i have just added (current) id in your li and where you want the selected link add the current id in that particular li.

http://jsfiddle.net/ejLTy/2/

answered Mar 19, 2012 at 10:14

Shailender Arora

7,8182 gold badges34 silver badges35 bronze badges

Comments

blackgreen · Accepted Answer · 2023-03-15 12:07:41Z

1

Just put class="current" in first li. You will get selection on each link.

edited Mar 15, 2023 at 12:07

blackgreen♦

47k29 gold badges172 silver badges164 bronze badges

answered Mar 19, 2012 at 9:46

ankit rajput

1822 silver badges5 bronze badges

Collectives™ on Stack Overflow

selected css menu style change using css

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related