Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: Focus...

  1. #1
    New Coder
    Join Date
    Jan 2008
    Posts
    42
    Thanks
    4
    Thanked 4 Times in 4 Posts

    Focus...

    Let's say I have a navigation bar which I made with an un-ordered list.

    Code:
    <ul id="navigation">
        <li><a href="#" title="...">Home</a></li>
        <li><a href="#" title="...">Forum</a></li>
        <li><a href="#" title="...">Contact</a></li>
        <li><a href="#" title="...">About</a></li>
    <ul>
    Let's also assume that I have styled the ul/lis to look like a navigation bar. Now I want to create a css rollover type thing whereas when one hovers over something in my navigation bar another menu appears below it. I know how to do this with CSS or Javascript or both, what I want to know is how do I/is it possible to give it focus WITHOUT using Javascript?

    How it works now is you hover over "Home" for example and the hover menu appears below it. When you scroll your mouse cursor down to hover over the menu it dissapears because it doesn't have focus because you aren't hovering over the a...

    Gah, did that make any sense at all?

    I'm not very good at explaining things.
    Last edited by AoR Zeta; 01-13-2008 at 05:21 PM.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,916
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    You don’t apply the hover to the anchor, you apply it to the list item, i.e.:
    Code:
    <ul>
      <li><a href="#">link</a></li>
      <li>
        <a href="#">link</a>
        <ul>
          <li><a href="#">link</a></li>
          <li><a href="#">link</a></li>
          <li><a href="#">link</a></li>
        </ul>
      </li>
      <li><a href="#">link</a></li>
    </ul>
    Code:
    li ul {
      position: absolute;
      left: -999em;
    }
    ul li:hover ul {left: auto;}
    This doesn’t work in IE 6 for which you need JavaScript.

    Best is you check out the Son of the Suckerfish menu where this all is applied and explained.

  • Users who have thanked VIPStephan for this post:

    AoR Zeta (01-13-2008)

  • #3
    New Coder
    Join Date
    Jan 2008
    Posts
    42
    Thanks
    4
    Thanked 4 Times in 4 Posts
    I've heard about the "Suckerfish" and "Sons of Suckerfish" thing before, but I'd completely forgot about it. Thanks.

    To be perfectly honest, I couldn't give a crap about IE. I make it a habit to only support IE7 and ask older IE users to upgrade or switch on my Websites.

    I just have a thing against using so many hacks and spending so much time just to get things to work in one stupid Browser.

  • #4
    New Coder
    Join Date
    Jan 2008
    Posts
    42
    Thanks
    4
    Thanked 4 Times in 4 Posts
    Regarding this:

    Code:
    li ul {
      position: absolute;
      left: -999em;
    }
    ul li:hover ul {left: auto;}
    Could I not set the display to none then on hover change it to block instead, achieving basically the same result?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •