WordPress.org

Ready to get started?Download WordPress

Forums

PHP Code for "active" nav elements in header.php (14 posts)

  1. brianfeister
    Member
    Posted 5 years ago #

    Ok,

    So my plan is to have a navigation ul and I've got that worked out, what I don't know how to do is to append the css style ".selected" to the

  2. element of the current page to make it display the "selected" css state.

    Any help? I didn't know which area of the forum to post since this is both php & css/xhtml

    Thanks!
    Brian

  • bekabug
    Member
    Posted 5 years ago #

    nevermind. i misunderstood :)

  • brianfeister
    Member
    Posted 5 years ago #

    does anyone out there know about this?

  • shaneholden
    Member
    Posted 5 years ago #

    If I'm following you correctly, here's what mine looks like for a site I'm working on.

    Menu:

    <div id="nav_outter">
    <div class="nav_inner">
    <ul>
          <li<?php if ( is_home() ) { echo ' class="current_page_item"'; } ?>><a href="<?php bloginfo('url'); ?>">Home</a></li>
          <?php wp_list_pages('title_li=&depth=1'); ?>
    </ul>
        <div style="clear:both;"></div>
    </div>
    </div>

    CSS:

    #nav_outter {
    	width:870px;
    	background-color: #fff;
    	padding-right: 2%;
    	padding-left: 2%;
    	margin: 0 auto 0 auto;
    }
    .nav_inner {
    	background-image: url(imgs/menu_bg.png);
    	border-top: 1px solid #ccc;
    	border-bottom: 1px solid #ccc;
    	padding-top: 5px;
    	padding-bottom: 5px;
    }
    .nav_inner ul {
    	margin: 0;
    	padding: 0;
    	margin-left:5px;
    	list-style: none;
    }
    .nav_inner li {
    	float: left;
    	margin: 0;
    	padding: 0;
    }
    .nav_inner li a {
    	float: left;
    	margin: 0 1px 0 0;
    	font-size: 80%;
    	font-weight: normal;
    	text-decoration: none;
    	padding: 5px 15px;
    	color: #232323;
    }
    .nav_inner li a:hover {
    	color: #000;
    	background: #fff;
    }
    .nav_inner .current_page_item {
    	background-color: #d9d9d9;
    }

    Is that what you're looking for? :)

  • brianfeister
    Member
    Posted 5 years ago #

    That helps alot, does "( is_home() )" target the current page regardless of where it is or just the page "home"?

  • shaneholden
    Member
    Posted 5 years ago #

    It's just a link for the default home. If you're using a different front page set in your reading settings, then you don't need it at all. Regardless, the one showing selected will work no matter which page is being viewed.

  • brianfeister
    Member
    Posted 5 years ago #

    Right, right, but not quite what I'm getting at. I mean my nav is "home / blog / about / contact " right? So I need my header.php to append the "active" class to "li.blog" if the visitor is at http://myblog.com/blog ... So it would read:

    <li class="home">
    <li class="blog active">
    ...
    ...

    the css looks like

    .active {
    background-position: 0 -55px;
    }

    This reveals the hidden image that is set to display on on :hover, or in this case "active".

  • shaneholden
    Member
    Posted 5 years ago #

    Can you post the code that you have?

  • brianfeister
    Member
    Posted 5 years ago #

    <div id="nav_wrap">
            <div id="nav">
                <ul>
                    <li class="drip home selected"><a class="static" href="/" title="main page">home</a></li>
                    <li class="drip blog"><a class="static" href="/blog" title="whimsical meanderings">blog</a></li>
                    <li class="drip contact"><a class="static" href="/contact" title="social interaction is the key">contact</a></li>
                    <li class="drip works"><a class="static" href="/works" title="dreamstar creations">works</a></li>
                    <li class="drip photo"><a class="static" href="/photo" title="some pictures">photo</a></li>
                    <li class="drip about"><a class="static" href="/about" title="what this company is all about">about</a></li>
                </ul>
            </div>
        </div>
    #nav li.selected a, #nav ul li span.drip, #nav li.drip a:hover {
    	background-position: 0 -55px;
    	opacity: 1;
    	-moz-opacity: 1;
    	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    	filter: alpha(opacity=100);
    }
  • shaneholden
    Member
    Posted 5 years ago #

    I'm using images for the menu on my site instead of text. But I didn't use ul li, not sure why now that I think of it. Here's the code that I'm using to show contact as circled when it's active, and when mouseover it gets circled. When you're on any other page it's just the image that says 'contact'. http://www.shane-holden.com

    <div id="image-menu">
    <?php if(is_page('contact')) { ?><a class="contact-active" href="/contact"><span>contact</span></a><?php } else { ?><a class="contact" href="/contact"><span>contact</span></a><?php } ?>
    </div>
    a.contact {
        display: inline-block;
        width:56px;
        height: 28px;
        background: url("images/menu_contact.gif") 0 0 no-repeat;
    }
    a.contact-active {
        display: inline-block;
        width: 56px;
        height: 28px;
        background: url("images/menu_contact.gif") 0 0 no-repeat;
        background-position: 0 -28px;
        border-bottom : 0px;
    }
    #image-menu {
        display: inline;
        width: 350px;
    }
    #image-menu a span {
        position: relative;
        color : #000000;
        margin-top:10px;
        display: block;
        z-index: -1;
    }
    a:hover.contact {
        background-position: 0 -28px;
        border-bottom : 0px;
    }

    Sorry I'm not much more help, but I'm kind of multitasking at work and css takes me some time to get looking right.

  • hoss9009
    Member
    Posted 4 years ago #

    @brianfeister
    I'm pickin' up what you're layin' down.
    I dunno how @shaneholden didn't get it... lol.
    Any luck on figuring it out?

  • hoss9009
    Member
    Posted 4 years ago #

  • hoss9009
    Member
    Posted 4 years ago #

    Also, @shaneholden....
    extend your bg img
    http://yfrog.com/08capturenauj

  • shaneholden
    Member
    Posted 4 years ago #

    @hoss9009 Thanks for the headsup! :)

  • Topic Closed

    This topic has been closed to new replies.

    About this Topic

    Tags