Page awareness with mouseover css menu

  • Resolved spscheele

    (@spscheele)


    15 years, 12 months ago

    Dear WordPress peeps,

    I want my css image mouseover menu to be active on the current page that is being displayed. I’m using WordPress for a hybrid portfolio/blog site, seperating the pages by category and a few static pages next to that (about, cotact).

    These are all the pages:

    /portfolio (a page that displays all posts in portfolio category)
    /blog (a page that displays all posts in blog category)
    /about (static page)
    /contact (a static page)

    Normaly I do the mouseover menu using the sliding doors technique, using the body id=”$current page” to change the style of the menu button that has to be active.

    My first question is how can I get the page name variable from WordPress to place it in the body id?

    The second problem is that I’m using category pages and static pages combined, so I guess that’s a bit of a handycap here? If so, how do I work around that?

    This is my css image mouseover sliding doors technique:

    <body id="?">
<div id="nav">
<ul>
<li class="nav_portfolio"><a href="/dev/portfolio" title="Portfolio">Portfolio</a></li>
<li class="nav_blog"><a href="/dev/blog" title="Blog">Blog</a></li>
<li class="nav_about"><a href="/dev/about" title="About">About</a></li>
<li class="nav_contact"><a href="/dev/contact" title="Contact">Contact</a></li>
</ul>
</div>

    CSS:

    .nav_portfolio a { background: url(images/nav_portfolio.gif) 0px -43px no-repeat; }
.nav_blog { background: url(images/nav_blog.gif) 0px -43px no-repeat; }
.nav_about { background: url(images/nav_about.gif) 0px -43px no-repeat; }
.nav_contact { background: url(images/nav_contact.gif) 0px -43px no-repeat; }

.nav_portfolio a:hover { background: url(images/nav_portfolio.gif) 0px 0px no-repeat; }
.nav_blog a:hover { background: url(images/nav_blog.gif) 0px 0px no-repeat; }
.nav_about a:hover { background: url(images/nav_about.gif) 0px 0px no-repeat; }
.nav_contact a:hover { background: url(images/nav_contact.gif) 0px 0px no-repeat; }

#portfolio .nav_portfolio a { background: url(images/nav_portfolio.gif) 0px -86px no-repeat; }
#blog .nav_blog a { background: url(images/nav_blog.gif) 0px -86px no-repeat; }
#about .nav_about a { background: url(images/nav_about.gif) 0px -86px no-repeat; }
#blog .nav_contact a { background: url(images/nav_contact.gif) 0px -86px no-repeat; }

    Hope someone understands what I want to do 🙂 Thanx in advance!

Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Page awareness with mouseover css menu’ is closed to new replies.