Grow your CSS skills. Land your dream job.

Price Menu Ellipsis

  • # February 27, 2013 at 6:47 pm

    I’m building a price menu and wanted to link the service with a price using ellipsis ([like this](http://i.imgur.com/YAxmlCl.png)).

    I am using an unordered list with a text-align: right

    Service………………$99

    Service-Deluxe….$7

    Service-Basic…….$11

    Is there a jQuery plug-in for something like this? Or should I just manually add periods within the HTML? Thanks!

    # February 27, 2013 at 7:05 pm

    Just a little bit hacky: http://codepen.io/CrocoDillon/pen/phdxA :)

    Using JavaScript or php or manually add the dots would be much better, but would work best with a monospace font.

    # February 27, 2013 at 8:55 pm

    Here’s a similar method using a dl and a pseudo element (in the past I’ve used background images – still may).

    http://codepen.io/wolfcry911/pen/kaluI

    # February 28, 2013 at 3:19 am

    I like yours better, because it uses the actual dots from the font used.

    # February 28, 2013 at 12:59 pm

    Thanks. For the record, I wasn’t implying that my way was better – I just like showing alternatives.

    # February 28, 2013 at 2:15 pm

    Of course, I’d do the same :)

    # March 11, 2013 at 11:37 pm

    Thanks @wolfcry911, I like your method.

    Before using it, I tried manually entering periods, but that still left text ragged and unaligned, plus its not very elegant. Good call with using dl instead of ul tags. I’ve taken out the width properties and replaced it with overflow: hidden for my liquid layout: http://cdpn.io/DHcnr

    # March 19, 2013 at 9:12 pm

    Continued on new thread, Price Menu Ellipsis 2 (http://css-tricks.com/forums/discussion/23548/price-menu-ellipsis-2#Item_1)

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".