A Link Curve
This is pretty old so I wouldn’t put too much stock in it. It could be better.
I was thinking about list manipulation and I came up with a really simple way of building curves into a list — “S”-curves, “C”-shapes, or a simple sweep (see the example). The possibilities are endless. Anyway, here’s what I came up with, using inline-styles and a definition list for this example, the former because it was as it was easier in my blog:
The List
The Code
Now here’s the code with the inline styles, but some of the style info needed to display it here was removed and some of the variables were left undefined. I didn’t seem to need {display: block:}… I had it in there at one point.
<dl style="background:#COLOR url('image.gif')no-repeat; width:DEFINEpx; height:DEFINEem;">
<dt style="padding-left:25px; padding-top:5px;">A Link Curve</dt>
<dd style="padding-left:135px;">Home Page</dd>
<dd style="padding-left:128px;">About Me</dd>
<dd style="padding-left:120px;">Contact</dd>
<dd style="padding-left:107px;">Portfolio</dd>
<dd style ="padding-left:86px;">My Blog</dd>
</dl>
You would probably put the style information in your CSS, but by doing so you’d have to identify each list item (dd id# { padding-left:110px; }), etc. Had I been doing this as a separate document, I would have done it another way. ems were used for the height measurement to facilitate a neater text enlargement, but the width and padding measurements were made in pixels. It works out nicely. The beauty of this whole thing is if styles are removed, the list simply reverts back to its perfectly acceptable native state.
The Next Step…
…would of course be making full length, fully active link bars using CSS. That’s no problem, in fact. What I want to do here, though (yep, still a work in progress), is hide the left-hand portion behind the curve, forsaking the definition title, <dt></dt>, in the process. I tried doing it with a separate image (right), and playing with z-index, but it hasn’t yet come to me. In any case, I’m liking it so far. It has some possibilities.
Update: This is pretty old so I wouldn’t put too much stock in it. It could be better.
Joshua Kendall responds:
Posted: June 12th, 2005 at 8:40 am →
Good tutorial. I better bookmark it incase someone want’s something like this. I would use it for myself, but I don’t really like round objects on my site for the navigation to flow around.
I was wondering if you knew of a php tutorial for a styleswitcher like you have on your access page (http://www.gbhx.net/gbdc_www/access.php)? I should email this question to you I guess, but my Outlook is on the fritz and I don’t feel like logging into my web server’s control panel. If you know of any you could send me a PM at PlasticPilots. Since my Outlook probably will have to be reinstalled.
Thanks for the tutorial (and hopefully a link to a styleswitcher tutorial).
Regards,
Joshua Kendall.
Mike Cherim responds:
Posted: June 12th, 2005 at 11:35 am →
There are a couple of popular style switchers out there, such as this one featured in this A List Apart article. And then there’s this Developer’s Shed article, and a Site Point article with yet another option.
Joshua Kendall responds:
Posted: June 12th, 2005 at 4:29 pm →
Thanks, I looked at the ALA one, but didn’t really like it that much, I will have to check out the others.
Mike Cherim responds:
Posted: June 13th, 2005 at 12:06 pm →
That’s cool, send an email if you need more info. I’d post my changer script here but I haven’t gotten around to it.
Brian Freeman responds:
Posted: October 30th, 2005 at 1:53 pm →
It’s the first time i ran through your site and I found it very informative and interesting. Nicely done!