Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

Easy graphic (image) page menu


 
Prev Previous Post   Next Post Next
  #1  
Old Feb 22, 2013, 04:08 PM
mcphoto
 
120 posts · Apr 2009
Easy graphic (image) page menu

I surfed a zillion posts here to suss this out. I'm not a CSS master so others may want to chime in - hope this helps. You do need to have some basic CSS and HTML know-how to do this, but if I can do it, you certainly can.

The menu can be seen at this link.

The HTML:

I used a transparent gif which I resized for each menu element, and background images for link, hover and current page (or "hey, you're on this page") art. This is not SEO best-practices, but this client doesn't want to rank (I don't either - I get lousy leads from the web). If you want best-seo, you could add a text div with each page name and position it off-screen - or maybe display:none is SEO friendly as well.

I paste this HTML into header.php - the mods here don't like that, but I keep tight notes in case I have to upgrade. This might work pasted into theme options as well. It goes in the TD (table cell) for the header, in this case immediately after ATA loads the header from the theme options. Watch those <td> and </td> tags!

The first HTML code you'll see preloads the hover and current-page states, so there's not a wait for a hover image, followed by the menu - I left some of the header code in this example so you can see where it goes:

HTML Code:
	<td id="header" colspan="<?php echo $cols; ?>">

		<?php echo bfa_header_config(); ?>
        
<div id="preload">
<img src="http://madison-creek.com/wp-content/nav/1-b.gif"  />
<img src="http://madison-creek.com/wp-content/nav/2-b.gif"  />
<img src="http://madison-creek.com/wp-content/nav/3-b.gif"  />
<img src="http://madison-creek.com/wp-content/nav/4-b.gif"  />
<img src="http://madison-creek.com/wp-content/nav/5-b.gif"  />
<img src="http://madison-creek.com/wp-content/nav/6-b.gif"  />
<img src="http://madison-creek.com/wp-content/nav/1-c.gif"  />
<img src="http://madison-creek.com/wp-content/nav/2-c.gif"  />
<img src="http://madison-creek.com/wp-content/nav/3-c.gif"  />
<img src="http://madison-creek.com/wp-content/nav/4-c.gif"  />
<img src="http://madison-creek.com/wp-content/nav/5-c.gif"  />
<img src="http://madison-creek.com/wp-content/nav/6-c.gif"  />
</div>

<div style="width:700px;">
<ul id="navlist" class="navlist">

<li><a href="http://madison-creek.com" id="homenav"><img src="http://madison-creek.com/wp-content/nav/trans.gif" width="61" height="35" border="0" alt="home"  /></a></li>

<li><a href="/our-clients" id="clientsnav"><img src="http://madison-creek.com/wp-content/nav/trans.gif" width="74" height="35" border="0" alt="clients"  /></a></li>

<li><a href="/acquisitions" id="acquisitionnav"><img src="http://madison-creek.com/wp-content/nav/trans.gif" width="103" height="35" border="0" alt="acquisition"  /></a></li>

<li><a href="/brokerage-advisory" id="brokeragenav"><img src="http://madison-creek.com/wp-content/nav/trans.gif" width="163" height="35" border="0" alt="brokerage"  /></a></li>

<li><a href="/properties" id="propertiesnav"><img src="http://madison-creek.com/wp-content/nav/trans.gif" width="102" height="35" border="0" alt="properties"  /></a></li>

<li><a href="/contact" id="contactnav"><img src="http://madison-creek.com/wp-content/nav/trans.gif" width="104" height="35" border="0" alt="contact"  /></a></li>

</ul></div>

		</td>
Now the CSS - pretty simple, it relies on IDs for the links, and there's a display:none for the preloader. For the current page link, you'll need your page IDs.

HTML Code:
/*navigation
============================================*/
.navlist {
	margin: 0 0 10px 0;
	padding: 0;
	list-style: none;
}
.navlist li {
	padding: 0;
	margin: 0;
	height: 35px;
	list-style: none;
    padding-left: 0 !important;
}
.navlist li a, .menu li a#visited {
	display: block;
	text-decoration: none;
	height: 35px;
	background-repeat: no-repeat;
}

/*hover*/

a#homenav:link {background-image: url('http://madison-creek.com/wp-content/nav/1-a.gif');}
a#homenav:hover {background-image: url('http://madison-creek.com/wp-content/nav/1-b.gif');}

a#clientsnav:link {background-image: url('http://madison-creek.com/wp-content/nav/2-a.gif');}
a#clientsnav:hover {background-image: url('http://madison-creek.com/wp-content/nav/2-b.gif');}

a#acquisitionnav:link {background-image: url('http://madison-creek.com/wp-content/nav/3-a.gif');}
a#acquisitionnav:hover {background-image: url('http://madison-creek.com/wp-content/nav/3-b.gif');}

a#brokeragenav:link {background-image: url('http://madison-creek.com/wp-content/nav/4-a.gif');}
a#brokeragenav:hover {background-image: url('http://madison-creek.com/wp-content/nav/4-b.gif');}

a#propertiesnav:link {background-image: url('http://madison-creek.com/wp-content/nav/5-a.gif');}
a#propertiesnav:hover  {background-image: url('http://madison-creek.com/wp-content/nav/5-b.gif');}

a#contactnav:link {background-image: url('http://madison-creek.com/wp-content/nav/6-a.gif');}
a#contactnav:hover  {background-image: url('http://madison-creek.com/wp-content/nav/6-b.gif');}


.navlist li {float: left;}
.navlist:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}

/*current page*/

body.page-id-4 a#homenav {
background:  url('http://madison-creek.com/wp-content/nav/1-c.gif');
}

body.page-id-5 a#clientsnav {
background:  url('http://madison-creek.com/wp-content/nav/2-c.gif') no-repeat;
}

body.page-id-6 a#acquisitionnav {
background:  url('http://madison-creek.com/wp-content/nav/3-c.gif') no-repeat;
}

body.page-id-8 a#brokeragenav {
background:  url('http://madison-creek.com/wp-content/nav/4-c.gif') no-repeat;
}

body.page-id-9 a#propertiesnav {
background:  url('http://madison-creek.com/wp-content/nav/5-c.gif') no-repeat;
}

body.page-id-11 a#contactnav {
background:  url('http://madison-creek.com/wp-content/nav/6-c.gif') no-repeat;
}


div#preload { display: none; }

/*end navigation
============================================*/
And that's it - not the prettiest thing ever, but if you don't have dropdown pages and don't mind tearing it up if someone wants a new page added, it's very fast to implement.
 

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Remove menu background graphic on drop down menu area blueprairie Page & Category Menu Bars 8 Jul 31, 2012 04:28 PM
image map not working, graphic disappears w/out space after it tbaxter Center area post/pages 3 Jun 21, 2012 02:28 PM
css- How to use a really nice graphic image in place of a horizontal line SharonJ Styling 1 May 20, 2012 07:28 AM
[SOLVED] Graphic image above a colored background Cheers Header configuration & styling 2 Oct 28, 2011 07:40 AM
Problems with adding image/graphic in sidebar Nefeli Sidebars & Widgets 5 Feb 25, 2009 07:16 AM


All times are GMT -6. The time now is 07:38 AM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.