WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Separator between links in vertical navigation menu (14 posts)

  1. yarnboy
    Member
    Posted 2 years ago #

    Hello everyone,

    I want to put a bullet point between my navigation menu links. The navigation menu is vertical. I've read here about using child/parent pseudoclasses to add separators to horizontal menus, but nothing for vertical. I'd like to do this without hacking core functions. Has anyone done anything like this before? My php/MySQL skills are fair but not spectacular.

    Thanks,
    Jesse

  2. voala
    Member
    Posted 2 years ago #

    Can we see a link to your website to see the exact menu? I think this can be done by CSS.

  3. yarnboy
    Member
    Posted 2 years ago #

    Sure. I haven't finished work on this yet, so the styles aren't as pretty as they're going to be, and links and category names are appearing now where they won't later, but here it is:

    http://pranalana.com/wordpress/about

    And here's what I want it to look like:

    http://pranalana.com/area51/inside.html

  4. voala
    Member
    Posted 2 years ago #

    Ok.

    The site you gave for reference used a manual made menu in the left. It is not auto-generated by wordpress if you understand what I mean. In your situation, the menu is generated by wordpress using te UL and LI tag elements.

    For using a vertical separator you can only use solid, dotted, etc.. lines of various colors and widths attached as a CSS rule to your top-border of the LI element.

  5. yarnboy
    Member
    Posted 2 years ago #

    Well, that's too bad. I tried dotted lines as a bottom border, and neither I nor my client liked them. Thank you for the help, though. Back to the drawing board . . .

  6. voala
    Member
    Posted 2 years ago #

    You can use the same solution as that other site but this would mean to edit a widget with the button links. But for your client if he has no html experience at all will be hard to add new pages.

  7. yarnboy
    Member
    Posted 2 years ago #

    Yeah, that's the line I'm trying to walk. I've looked a couple of solutions that involve my recoding a widget, but my client wants as much control as possible, so this might be one part of the appearance we have to sacrifice.

  8. esmi
    Forum Moderator
    Posted 2 years ago #

    In theory, you could add those single dots as images to each list item in the sidebar using CSS. I'd say it's eminently do-able.

  9. voala
    Member
    Posted 2 years ago #

    How? I am really interested in this.
    Are you referring to the list-style-image css rule applyed to the LI?

    Wouldn't this show in front of the LI element?

  10. esmi
    Forum Moderator
    Posted 2 years ago #

    That would only happen if you used list-style-image. What I'm suggesting is a background image that is applied to each li element using something like:

    #nav-box .widget li {
    background-image:ur;(images/dot.gif) no-repeat center bottom;
    padding-bottom:20px;}

    This assumes something like a 14 x 14px dot.gif image. You might need to tweak the bottom padding and perhaps add some top margins to the li elements to get the right spacing but that's pretty much it in a nutshell.

  11. yarnboy
    Member
    Posted 2 years ago #

    This solution actually occurred to me right after I signed off. I'm going to give this a try. Will let you know the results. Thanks esmi!

  12. voala
    Member
    Posted 2 years ago #

    yes, this is great. i didn't thought of this.

  13. esmi
    Forum Moderator
    Posted 2 years ago #

    No problem. Glad I could offer a possible solution.

  14. yarnboy
    Member
    Posted 2 years ago #

    Esmi's idea totally worked. Here's the css:

    #nav ul li {
    	padding-bottom: 25px;
    	background: url(images/bullet.jpg) bottom center;
    	background-repeat: no-repeat;
    }
    
    #nav ul li:last-child {
    	background-image: none;
    	padding-bottom: 0px;
    }

    You can see the results in action here:

    http://pranalana.com/wordpress/about

    The :last-child pseudoclass doesn't work in IE, but I think there's a javascript solution for that, which I will be looking into when I'm not about to fall asleep. Thanks for your help, everyone

Topic Closed

This topic has been closed to new replies.

About this Topic