January 22nd, 2013, 03:00 PM
|
|
Registered User
|
|
Join Date: Jan 2013
Posts: 2
Time spent in forums: 31 m 19 sec
Reputation Power: 0
|
|
|
Active Link not staying active
Hi,
I'm trying to build a menu for my website which expands like an accordian menu on rollover. I've been able to get this to work, but now I am trying to get the menu item to stay expanded when it's clicked. Code below.
html
Code:
<div id="menu">
<ul class="accordion">
<a href="web.php"><li class="slide-01">
<div> <p class="rotate">web</p></div>
</li></a>
<a href="graphic.php"><li class="slide-02">
<div> <p class="rotate">graphic</p> </div>
</li></a>
<a href="interface.php"> <li class="slide-03">
<div> <p class="rotate">interface</p></div>
</li></a>
<a href="other.php"><li class="slide-04">
<div> <p class="rotate">other</p></div>
</li></a>
<a href="about.php"><li class="slide-05">
<div> <p class="rotate">about</p>
</div>
</li></a>
<a href="contact.php"><li class="slide-06">
<div> <p class="rotate">contact</p></div>
</li></a>
</ul>
</div>
css
Code:
.accordion li{
float:left;
width:10%;
overflow:visible;
height:50px;
vertical-align:middle;
-moz-transition:width 0.2s ease-out;
-webkit-transition:width 0.2s ease-out;
-o-transition:width 0.2s ease-out;
transition:width 0.2s ease-out;
-moz-transition-delay:0.15s;
-webkit-transition-delay:0.15s;
-o-transition-delay:0.15s;
transition-delay:0.15s;
}
.accordion div{
}
.accordion:hover li{
width:10%;
}
.accordion li:hover{
width:46%;
}
.slide-01 { background:#4d00c0; color:white; }
.slide-02 { background:#116ad3; color:white; }
.slide-03 { background:#0dc847; color:white; }
.slide-04 { background:#d37a11; color:white; }
.slide-05 { background:#d311bd; color:white; }
.slide-06 { background:#1f11d3; color:white; }
I've tried using li:active (at the moment using a background colour because its easier to see) and that makes it change on click, but when it goes to the next page it's back to normal, I've also tried adding an "active" class to the link on the page (changing the li classes to id for this) but neither method seems to work. Can you help me out?
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
