A Link Curve

Posted June 8th, 2005 by Mike Cherim

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

Link Curve
Home Page
About Me
My Blog

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>

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.

5 Responses to: “A Link Curve”

  1. 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).

    Joshua Kendall.

  2. 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.

  3. 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!

Sorry. Comments are closed.

Note: This is the end of the usable page. The image(s) below are preloaded for performance only.