Grow your CSS skills. Land your dream job.

li.current

  • # June 5, 2008 at 11:43 am

    (Perhaps I should first put forward that I am more a designer than a programmer— although I was pretty adept on my ZX81 back in the day…)

    I have created a site where the <li> menu loads .html pages into an iframe.
    Accordingly, the entire site is contained on one "home.html") page.

    I have styled the <li> links so that I have:
    #Nav ul
    #Nav ul li
    #Nav ul li a
    #Nav ul li a:link; #Nav ul li a:visited
    #Nav ul li a:hover

    So far, everything is looking good.
    NOW, I’m trying to add code so that I have a "current" state defined. This way, the user can visually see what they have clicked on and what has subsequently been loaded into the ‘iframe’.

    Is it possible to define a .current state when using ‘iframes’ … because in home.html I can’t define any of the <li> tags as <current>…?

    Any ideas?
    THANKS

    # June 5, 2008 at 3:48 pm

    I think if I was in this situation I would attempt to do the adding/removing of the "current" class with jQuery.

    Like:

    Code:
    $(#Nav ul li a).click(function() {
    $(#Nav ul li).removeClass(“current));
    $(this).parent().addClass(“current”);
    });

    I didn’t test it… but that should do the trick I’m thinking.

    # June 5, 2008 at 4:13 pm

    Thanks for getting back to me on this:

    Um, I’m not really sure what jQuery is. I gather I don’t need to know if I just cut and paste the code.
    BUt then, where (and how) do I define what the style is for "current" ?

    Would an a:focus work? I tried to fiddle with a:active and a:focus but only got it to work in FF and not in Safari.

    # June 6, 2008 at 9:12 am

    To add styling for the current class, just make sure there is something in your CSS for it:

    Code:
    li.current {
    background-color: red;
    }

    To use jQuery, you’ll need to add it on your page (just Google it, download the latest version, and include it in a script tag in your header). The best place to get started might be just watch the Intro to jQuery video:

    http://css-tricks.com/videos/css-tricks-video-20.php

    What is interesting here… is I’m not sure if you’d need to include that jQuery and get it functioning on "iframe" page, or outside page.

    # June 9, 2008 at 6:15 am

    Is there any particular reason you would need to use iframes? I’m mostly concerned about the accessibility, and it’s also not good for SEO nor usability. There’s an old article about it on 456Bereastreet.com.

    # June 9, 2008 at 3:27 pm

    I know frames have their problems but I thought inline frame (iframes) were less cumbersome.
    I’m trying to create a really simple site. Clearly, I am not chosing the best option.

    Perhaps you have a better suggestion than my iframe solution?

    I’ve posted it here:
    http://joellecraven.ca/iframes/main.html
    I didn’t upload the .mov file but you hit the links on the side menu, an html page (containing only an .mov) loads on the left side (the iframe)

    I really appreciate the posts helping me out.

    # June 10, 2008 at 8:58 am
    Quote:
    I’m trying to create a really simple site. Clearly, I am not chosing the best option.

    You want a really simple site? Drop the iframes. I’ve never been on a site with iframes that wasn’t tricky to use (read/view and so on…), that’s also why I’m trying to stay away from them.

    # June 10, 2008 at 2:37 pm

    uh – and just load separate html pages for each link.
    I guess I could do that…
    I just liked the iframes keeping it all contained.
    But clearly you have strong anti- iframe experience

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".