How do I create an arrow on active list item?

HTML & CSS
1

I am about to create a page that has a list to the left and the actual content to the right. When the user clicks on one of the items in the list, the item should turn yellow and an arrow should point to the right. The arrow will partially be outside the list panel. Se picture below.

I have thought about creating the arrow with HTML5 canvas element, is that the right way? How do I get the arrow to go over the panels border?

2

Hi HermioneN. Welcome to the forums. :slight_smile:

You are better off doing this with background images, or perhaps a bit of CSS3. Don’t use canvas, as it’s not as well supported and is overkill. If you can post your markup and the appropriate image, we can help finish it off. Read this for guidance on how to post a useful code sample:

3

Thank you.

I do not have any picture for the arrow. Do I need a special type of picture to be able to dynamically change the height of it? I do not think I will know the height of the list item before rendering the page.

4

That’s going to make the arrow effect a little more difficult. So the shape of the arrow part will vary?

5

I do not have the final requirements yet, but the list items height may vary depending on the data in the items.

6

At this stage, my advice would be to lock down the exact requirements and possible scenarios that the code will need to deal with. It’s a recipe for misery to approach coding without knowing exactly what you’re dealing with.

7

Then I have to wait. The project is just in the beginning and we have just got some basic layout samples. I thought that this arrow could be a problem and wanted to look into a solution now when I have the time.

Thanks for your time. I may return when I have more information.

8

Hi,

As Ralph said we do need to to know the dynamics but here’s an old demo you might like to play around with meanwhile.

http://www.pmob.co.uk/temp/mitred-arrow5.htm

It uses mitred borders to make the arrow effect and will scale within reason over a few lines of text.

9

Yep, definitely a good strategy. Bear in mind that it’s harder to do if the height of those list items will vary—assuming you must have the arrow. But there are workarounds, such as having a smaller arrow that is centered and is always the same height, no matter how tall the list item is … though that might look a bit odd.

I may return when I have more information.

Definitely do that. There are lots of CSS enthusiasts here who will be happy to help. :slight_smile:

Edit:

Nice example, Paul. :slight_smile:

10

Thank you Paul. That gives me something to start with.