WordPress.org

Support

Support » Themes and Templates » Navigation and Subnavigation adaption

Navigation and Subnavigation adaption

  • Hey folks!
    My question relates to the following problems. I want my navigation into account the following 2 points, or implements.

    1. Each navigation item consists of 2 images, follow the images in my css-file is. For Navigation:

    #nav01 a {background: url(images/navi/home_off.gif) top left no-repeat; width: 63px; height: 18px;}
    #nav01 a:hover {background: url(images/navi/home_on.gif) top left no-repeat;}
    #nav01 a.on, a:hover.on {background: url(images/navi/home_on.gif) top left no-repeat; width: 63px; height: 18px;}

    This would be like the CSS code for the image of the start/frontpage.

    However, if i wish, that it´s changes in an “active” field (example: if i click on the startpage the Home button, i want that the image changes from nav01 to nav01on) and the inactive fields remain the same, it doesnt happens. I have already try everythink bu i dont get this out.

    <ul>
          <li id="nav01"><a href="<?php bloginfo('home'); ?>"><span>Home</span></a></li>
          <li id="nav02"><a href="<?php bloginfo('url'); ?>/about"><span>About</span></a></li>
          <li id="nav03"><a href="<?php bloginfo('url'); ?>/multimedia"><span>Multimedia</span></a></li>
          <li id="nav04"><a href="<?php bloginfo('url'); ?>/forum"><span>Forum</span></a></li>
          <li id="nav05"><a href="<?php bloginfo('url'); ?>/kontakt"><span>Kontakt</span></a></li>
          <li id="nav06"><a href="<?php bloginfo('url'); ?>/impressum"><span>Impressum</span></a></li>
    </ul>

    2. Each SubNavigation consists of 2 images, follow the images in my css-file is. For Sub-Navigation:

    #subnav01 a {background: url(images/subnavi/sub1_off.gif) top left no-repeat; width: 64px; height: 11px;}
    #subnav01 a:hover {background: url(images/subnavi/sub1_on.gif) top left no-repeat;}
    #subnav01 a.on, a:hover.on {background: url(images/subnavi/sub1_on.gif) top left no-repeat; width: 64px; height: 11px;}

    Here again the same principle, change when active the rest stays the same until it is activated.

    <ul>
            <li id="subnav01"><a href="<?php bloginfo('url'); ?>/about/me"><span>About Me</span></a></li>
            <li id="subnav02"><a href="<?php bloginfo('url'); ?>/about/you"><span>About You</span></a></li>
            <li id="subnav03"><a href="<?php bloginfo('url'); ?>/about/us"><span>About Us</span></a></li>
            <li id="subnav04"><a href="<?php bloginfo('url'); ?>/about/about"><span>About About</span></a></li>
    </ul>

    3. Furthermore, the SubNavigation only be displayed if the navigation item i.e ABOUT has been selected.

    Big thanks in advance for your help. Greets, Kasimpasa

  • The topic ‘Navigation and Subnavigation adaption’ is closed to new replies.
Skip to toolbar