2010 theme drop-down menu arrows & sub-page breadcrumbs

  • Unknown's avatar
    donspark · Member ·

    I’m using the very common 2010 theme helping a community organization build a website which will have over 50-100 “pages” besides the blog. We have purchased premium to edit CSS at
    http://valleyprojectgrow.org/
    Here is a screen shot with the standard black horizontal navigation for pages showing a set of sub-menus and showing a sub-sub-menu beside “contact” called “tertiary”
    screenshot

    So, I need a couple of CSS chunks I hope are already in use which will give me 2 types of basic visual cues for this menu structure so that people who are not web savvy will have an easy time navigating many pages.

    1. small simple arrows or triangles to appear beside a menu item to indicate to viewers where there is a drop-down or a slide-out.

    2. “bread-crumbs” so that when viewers have drilled down to the second or third level, they will see a set of back-links at the top of the page pointing the way back which sometimes looks like this
    Home page > About > Contact > Tertiary

    Anyone “point me in the right direction?” (pun)

    don

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    hallluke · Member ·

    You can either do this with icon characters or images that you’ve uploaded to your media gallery.

    To show arrow icons try adding the following to your custom CSS area from > Appearance > Customize > CSS:

    .menu > .menu-item-has-children > a:after {
  content:" ↓";
}

.sub-menu .menu-item-has-children > a:after {
  content:" →";
}

    (I’m not sure if the arrows will survive being pasted into the forum, I found them here along with the character codes if copying and pasting doesn’t work).

    If you want more control over how they look then try creating your own images to use. In the example code here they’d both need to be 20 pixels square:

    `#access .menu > .menu-item-has-children > a {
    background-image:url(“http://placehold.it/20×20”);
    background-repeat:no-repeat;
    background-position:right center;
    padding-right:25px;
    }

    #access .sub-menu .menu-item-has-children > a {
    background-image:url(“http://placehold.it/20×20”);
    background-repeat:no-repeat;
    background-position:right center;
    }`

    The breadcrumb example you’re after isn’t possible as you can’t use CSS to include extra content on the pages. You’d either have to do it manually each time you create a new page (which I wouldn’t recommend) or use the custom menu widget in your sidebar to show the page hierarchy.

  • The topic ‘2010 theme drop-down menu arrows & sub-page breadcrumbs’ is closed to new replies.