CSS Veritical Expanding Nav Menu? (0.2 BTC reward)

K

Kiopa_Matt

Banned
May 13, 2011
5,216
52
0
If anyone can resolve this, post your BTC address as well, and I'll send you 0.2 BTC.

Need a CSS based vertical expanding nav menu. No Javascript allowed. I have a CSS tab control working just fine, and mostly have the nav menu working, but am stuck. I can get the nav menu to expand upon clicking a parent menu, but when clicking on a sub-menu it instantly closes without redirecting the user to the new page.

Any help greatly appreciated! If it helps, here's some dumbed down CSS / HTML code:

Code: 
.cnav {
    position: relative;
    display: block;
}

.cnav ul {
    list-style-type: none;
}

.cnav ul > li { 
    display: block;
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
}

.cnav ul li > a {
    font-size:14px;
    height:38px;
    width:100%;
    line-height:38px;
    border-bottom: 1px solid #c4c4c4;
    border-top: 1px solid white;
    color: #3f3f3f;
}

.cnav ul li > .sub {
    display: none;
    background: rgb(255,255,255);
    margin-top:0px;
    width:100%;
}

.cnav ul li a:focus + ul.sub { display: block; position: absolute; left: 0px; }

Code: 
<div class="cnav">
     <ul>
          <li><a href="#">Home</a>
                 <ul class="sub">
                     <li><a href="/about">About Us</a></li>
                     <li><a href="/page1">Some Page</a></li>
                     <li><a href="/page2">Another Page</a></li>
                 </ul>
          </li>
          <li><a href="#">Products</a>
                 <ul class="sub">
                     <li><a href="/about">About Us</a></li>
                     <li><a href="/page1">Some Page</a></li>
                     <li><a href="/page2">Another Page</a></li>
                 </ul>
          </li>
          <li><a href="#">Support</a>
                 <ul class="sub">
                     <li><a href="/about">About Us</a></li>
                     <li><a href="/page1">Some Page</a></li>
                     <li><a href="/page2">Another Page</a></li>
                 </ul>
          </li>
     </ul>
</div>
 


Nope, sorry. I think it has something to do with that last line of CSS. In my tab control, instead of that "a:focus" I have it at "li:target", and instead of the "+" sign I have the ">" sign. Fucked if I know what that means, but the tabs work. :)

I think it's due to the fact the tabs are horizontal, and the nav menu is vertical, or something. I don't know, I'm tired of dealing with it, and happy to pay a little under $100 for a solution, or whatever 0.2 BTC is worth.
 
CCarter said:
Maybe you cut out some additional code when pasting it here?
Click to expand...

Yeah, I'm using a professional theme and everything, so cut out loads of code, as didn't want to copy & paste 200+ lines of CSS. I guess the code I have doesn't hide the other parent menus upon expanding one, but nonetheless, this code demonstrates the problem perfectly.

Click on the "Support" menu, and it expands fine. Click on a sub-menu though, and it just collapses the parent menu, without redirecting the user. I'm not sure what I'm doing wrong there. I'm not a CSS guy.

I'll put the reward up to 0.3 BTC, as I'd very much prefer not to provide an update where all menus are expanded on every page, because that just looks retarded. :)
 
Spent nearly 10 minutes pondering upon this, still no idea, but the error is in the last thingamajig for sure.
a:focus doesn't work because as soon as you click on link the focus disappears and the menu closes before the click goes through. Or something.
 
You must log in or register to reply here.
Top Bottom
Back