(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 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>…?
To add styling for the current class, just make sure there is something in your CSS for it:
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:
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.
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)