2 Replies - 5226 Views - Last Post: 26 February 2010 - 03:21 PM

#1 AUAN  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 91
  • Joined: 30-July 09

Wordpress Dynamic Menu

Posted 25 February 2010 - 03:31 PM

Hello all!

I am just beginning to build my first Wordpress theme and I am having some weird problems with creating a horizontal menu that uses image rollovers and dynamic highlighting.

I have created the menu with no problem using the Wordpress codex and old threads here on the forum, but once I insert the images they seem to half disappear,so I fixed them with some padding. But it seems the images only work when there is text in between the tags. Is there anyway to just have images inserted by themselves?

If someone could help me troubleshoot my code I'd be much obliged.

PHP/HTML:
<div id="nav">
    <ul id="menu">

        <!-- To show "current" on the home page -->
        <li class="home"<?php
                if (is_home())
                {
                echo " id=\"current\"";
                }?>>
                <a href="<?php bloginfo('url') ?>">Home</a>
        </li>

         <!-- To show "current" on the Blog Page -->
        <li id="spacer" class="weblog"<?php
                if (is_page('Weblog'))
                {
                echo " id=\"current\"";
                }?>>
                <a href="<?php bloginfo('url') ?>/weblog">Weblog</a>
        </li>

        <!-- To show "current" on any posts in category 10, called Art -->
        <li id="spacer" class="art"<?php
                if (is_category('Art') || in_category('10'))
                {
                echo " id=\"current\"";
                }?>>
               <a href="<?php bloginfo('url') ?>/art">Art</a>
        </li>

        <!-- To show "current" on the About Page -->
        <li id="spacer" class="resume"<?php
                if (is_page('Resume'))
                {
                echo " id=\"current\"";
                }?>>
                <a href="<?php bloginfo('url') ?>/resume">Resume</a>
        </li>
	</ul>
    </div>




CSS:
#nav {
	width:431px;
	height:44px;
	float:left;
}

#menu {
  padding:0;
  margin:0;
  list-style-type:square;
  text-transform:uppercase;
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  margin-left:1px;
  margin-top:2px;
}

#menu li {
  display:inline;
}

li.home a {
	width:85px;
	height:26px;
	background:url(images/buttons/Home_inactive.png) no-repeat top left;
}

li.home a:hover {
	width:85px;
	height:26px;
	background:url(images/buttons/home_active.png) no-repeat top left;
}

li.home a.active {
	width:85px;
	height:26px;
	background:url(images/buttons/home_active.png) no-repeat top left;
}

li.weblog a {
	width:109px;
	height:26px;
	background:url(images/buttons/weblog_inactive.png) no-repeat top left;
}

li.weblog a:hover {
	width:109px;
	height:26px;
	background:url(images/buttons/weblog_active.png) no-repeat top left;
}

li.weblog a.active {
	width:109px;
	height:26px;
	background:url(images/buttons/weblog_active.png) no-repeat top left;
}

li.art a {
	width:64px;
	height:26px;
	background:url(images/buttons/art_inactive.png) no-repeat top left;
}

li.art a:hover {
	width:64px;
	height:26px;
	background:url(images/buttons/art_active.png) no-repeat top left;
}

li.art a.active {
	width:64px;
	height:26px;
	background:url(images/buttons/art_active.png) no-repeat top left;
}

li.resume a {
	width:109px;
	height:26px;
	background:url(images/buttons/resume_inactive.png) no-repeat top left;
}

li.resume a:hover {
	width:109px;
	height:26px;
	background:url(images/buttons/resume_active.png) no-repeat top left;
}

li.resume a.active {
	width:109px;
	height:26px;
	background:url(images/buttons/resume_active.png) no-repeat top left;
}




Also here is the site live so you can understand my problem easier
http://www.georgehaj...co.nz/wordpress

Cheers

This post has been edited by AUAN: 25 February 2010 - 04:04 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Wordpress Dynamic Menu

#2 calebjonasson  Icon User is offline

  • $bert = new DragonUnicorn(); $bert->rawr();
  • member icon

Reputation: 209
  • View blog
  • Posts: 989
  • Joined: 28-February 09

Re: Wordpress Dynamic Menu

Posted 25 February 2010 - 06:36 PM

Put the images as a background in their own class. Add that to the li or create and style and <img> tag and add that in as a background property. If I were you, I would just include the menubar and include it with the them. http://www.maxpagels...rojects/mptags/
Was This Post Helpful? 1
  • +
  • -

#3 AUAN  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 91
  • Joined: 30-July 09

Re: Wordpress Dynamic Menu

Posted 26 February 2010 - 03:21 PM

View Postcalebj, on 25 February 2010 - 05:36 PM, said:

Put the images as a background in their own class. Add that to the li or create and style and <img> tag and add that in as a background property. If I were you, I would just include the menubar and include it with the them. http://www.maxpagels...rojects/mptags/



Thanks alot for that mate, I will look into that plugin as well!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1