Jump to content

Expanding links with CSS


rustysilo
 Share

Recommended Posts

Maybe not as much as you fear. You can beef this up with better CSS and icons and stuff, but the onclick code is about as compact as it gets and totally portable.

			<head>				 <style>					 div.test {width: 150px; height:  20px;  overflow: hidden;}				 </style>			 </head>			 <body bgcolor="#ffffff">				 <div class="test" onclick="if (this.offsetHeight < 30){this.style.height='250'}else{this.style.height='20'}">				   //I chose <30 over == 20 because offsetHeights can vary from browser to browser 					 Click me!					 <p><a href='#'>Hello world!</a></p>					 <p><a href='#'>Hello world!</a></p>					 <p><a href='#'>Hello world!</a></p>					 <p><a href='#'>Hello world!</a></p>					 <p><a href='#'>Hello world!</a></p>					 <p><a href='#'>Hello world!</a></p>				 </div>			 </body>

Link to comment
Share on other sites

Strange. I uploaded it and it won't work no matter what dtd it is. It worked fine on the local without a dtd though. It won't validate with any dtd either, even the html 4.0 validator (well I didn't try anything lower/older than that). The css validates fine.I may have to use a different method after all...?Here is the site at present.Can you see anything I did wrong?I would just love it if I could get this working with the behavior of an expand/collapse on-click and have it stay expanded even when clicking one of the links. :)Another note, for some reason the expandable menu doesn't position properly after upload either. It positioned correctly on my local.note: It does work in IE 6 though. Not Firefox.

Link to comment
Share on other sites

I'm still investigating but have some results. I downloaded your page and css sheet. Firefox 2/11 (Mac) keeps telling me it can't parse the value for 'height.' Since I didn't hack out the code in strict I removed your doctype declaration, and presto! it worked. I'll tinker a bit more to see just what's up. I confess I'm a transitional hacker so there may be a little tweak I can't see. If you can live in transitional, you're looking pretty good, but of course you're pretty emblems have to come down.I'm still on the case.

Link to comment
Share on other sites

I could scream. I got it, but it turns out I broke my own habits when I hacked that thing out. In strict, there are no default units. If you mean pixels, you have to say 'px'--you can't just let it be implied. Thing is, even though I'm a transitional guy, I normally do that. Guess I rushed it.blush.gifSo try pasting this line over the old one:

	 <div class="portfolio" onclick="if (this.offsetHeight<30){this.style.height='300px'}else{this.style.height='18px'}">

Lemme know how it works in vivo.About the menu collapsing. I figured you'd want it this way. When would you want it to collapse? We could easily work it so it collapses (and opens, for that matter) only when the user clicks the div that holds the word 'portfolio.' My original intent of course was to give you the least threatening piece of script that would do the job. But we can flesh it out.

Link to comment
Share on other sites

Man you rock! That worked. I would prefer to have it strict xhtml, but I may let it go transitional if we can work it out that way. If not then as you say, I'll lose the icons. I'm not that attached to them.I want the menu to collapse only on-click for "portfolio". When someone clicks one of the links in that menu I want the menu to stay open until they click portfolio again. This way they can browse each of those links at once without expanding it again.Ultimately I'm going to use the javascript code to open and size the windows for those links rather than using the target=blank so it's the strict xhtml standard.-After it's all complete I'll get my own domain so I can get rid of the silly freewebs deals. First I'll post it in the critique forum to see what folks think of it. I'm going for simple, but effective. Grappling with the idea of adding more graphics. Not sure it would be worth it really. I'll also add a blog to it, but may wait until after I get the domain and hosting all ironed out. I don't want to use the freewebs provided blog. Will likely go with wordpress. I know there are hosts that come with it "pre-installed".Hey thanks again for your help.

Link to comment
Share on other sites

Thanks. Now, we're moving the function, so you have to overwrite two lines of markup. You'll also notice I changed the cursor over the menu trigger. I think the arrow's more intuitive than a text bar in this context. If you think a pointer would be better still (more link-like, anyway), just change the word default to pointer. You probably would have gotten around to that on your own.

			<div class="portfolio" id='portfolio' style='cursor: default;'>			 <div style="font-weight: bold; text-decoration: underline;" title="Click to expand & collapse" onclick="x=document.getElementById('portfolio');if(x.offsetHeight<30){x.style.height='300px'}else{x.style.height='18px'}">Portfolio</div>

Lemme know if we're still rocking.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...