#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    2
    Rep 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?
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    8
    Hey dude,

    Not really done this myself so I can't give any advice but I bookmarked this site a while ago: http://www.cardeo.ca/achieving-activ...ates-with-css/

    Hope ths helps.

    Regards,

    NM.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    2
    Rep Power
    0
    Thanks for that link - it seems like switching the classes to ID and adding an _on to the active link id works to extend it - but now I have a whole new problem that I didn't consider:
    is there a way to make the active link shrink back down when I hover over the other links - the extension effect + the long active link box is forcing the menu down onto two lines.

    thanks in advance

IMN logo majestic logo threadwatch logo seochat tools logo