Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

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

Easy graphic (image) page menu


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Feb 22, 2013, 05:08 PM
mcphoto
 
116 posts · Apr 2009
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.
  #2  
Old Feb 22, 2013, 05:28 PM
Jam's Avatar
Jam
 
1,073 posts · Mar 2011
Perth, Western Australia
That looks nice mcphoto, but wouldn't it be a lot easier to implement, and more importantly no code changes required if you add/remove more pages from the nav, to not use images for the titles, but use one background image for all nav hover states? You could include the background image (with your page marker graphic) for all hover states, as well as the (any) current page.
That way you could have:
A simple colour background to all nav items.
A graphic with locator arrow in same (or different) colour for hover states.
Same (or different) graphic when you are on a current page item.

The bonus would also be you retain the text SEO of page titles, but mainly you would only need to create one image (if you kept it all one colour) or up to 3 images if you wanted different static/hover/current page graphics.
__________________
May the learning curve never plateau... Thanks Larry for teaching me heaps.
My Themeframe built sites
  #3  
Old Feb 22, 2013, 06:13 PM
mcphoto
 
116 posts · Apr 2009
Good points, and I've done an ATA menu as you've described - the problem with this one was the font - I really needed something like garamond condensed. I tried @ fontface, but if I used relative links for the fonts, they only worked on the home page - once a page got a /pagename, no fonts. But Firefox won't allow @fontface to use absolute links.

I actually found a few instances on google where people had this exact problem, but no fixes, other than an htaccess hack - but by then I was fed up. I have problems often with ATA and relative links for graphics - I've tried putting them everywhere, but still get broken links. Maybe they need to go in a folder inside the "images" theme folder?

Google fonts has a really nice Garamond but it was just too wide for the menus. So I used the google font for headlines, and graphics for the menu.

The current-page graphic aligns with the text on this menu, but it aligns with the first character, so that would have worked with "real text". I've done menus where graphics have a relationship to the size of the word, so a single BG wouldn't work (but no reason a BG for each item wouldn't work in that case).

Another instance that pushes me towards a hand-coded menu is when I need an element between menu items - haven't found a great way to tackle that through theme options.

I've also had massive problems when you use background images, have drop-downs (sub pages) and do much styling at all to the menu - I've gotten crazy alignment issues that just won't tweak out, stuff that works fine on an HTML test document but gets confused when living with all the code of WP and ATA. But my first choice is always to use the existing menu system, and I've played with this stuff enough to decide before I even start designing.

Here's an ATA site where the menus aren't making sense to me - the dropdowns align farther to the left as the links move to the left. (That site is a great example of how flexible ATA is though - it's on a server at the client's house and loads very fast, too).

In this case, it seems like there's a ton of posts here where people are trying to do a menu like this - if it suits the client's needs, it's pretty easy.
  #4  
Old Feb 22, 2013, 06:50 PM
Jam's Avatar
Jam
 
1,073 posts · Mar 2011
Perth, Western Australia
Getting custom fonts to work can be a chore, but I find Fontsquirrel+persistence+making sure fonts are on the website (not external) = successful sitewide custom font.
Persistence is the key, but once you nut out how to get custom fonts working, it's the end of graphic titles
Text will always be cleaner too, and as long as the font you are loading isnt over the top, they will be quicker.

The nav you built, with the locator page is something I've wanted to do for a long time. I used to do it a lot when it was all html (and nearly every site I built had individual graphic titles for all nav items), but since Ive been using WP, then ATA, all I used was simple background images, no "locator" or positioning particularly, just gradients, colours etc.

Ive been using Themeframe exclusively for now a couple of years I think, and decided to give the locator point a whirl, now we have Themeframe 125, and I saw your nav today. It took all of a few minutes to implement the locator/current/hover state to the nav, of an existing theme I built with Themeframe, example here.

This is one background image (edit, added second hover state image), applied to current state. The most time was spent adjusting padding, margins etc to place the text and background in the right place, but the beauty is, its in the theme. The user can add/remove/edit page titles until the cows come home, the nav will still work perfectly.

If I were you, I'd persist with custom fonts, and go for one background image for current page, and maybe hover as well.

I dont have shares in Themeframe, Im just a user, and I dont recommend you go out buy themeframe thinking you can knock out a theme in a couple of hours even, because its not quite that easy, but the point is, you can achieve the same result with a lot less code and images by sorting the fonts out rather than the extra code etc. The example shown also has a custom font installed. Again, its not so easy to get custom fonts working, but persist and ye shall be rewarded

PS sorry to put a dampener on your hard work, I didnt mean to hijack your thread, but in the interests of improving code, usability of site etc I offer this as a suggestion and will now bow out.
__________________
May the learning curve never plateau... Thanks Larry for teaching me heaps.
My Themeframe built sites

Last edited by Jam; Feb 22, 2013 at 08:48 PM.
  #5  
Old Feb 23, 2013, 12:34 PM
mcphoto
 
116 posts · Apr 2009
No problem at all, I was interested in hearing opinions about dialing in menus, as they've been a point of frustration for many people in ATA.

If you have a minute, re-read my paragraph about @fontface, firefox, and relative vs. absolute links. I'd really love to get @fontface working, but like I said, with relative links I can only get fonts to display on the root page of a WP site. Any page with a slash-pagename after the URL doesn't return fonts - and absolute links aren't Firefox friendly.

Do you know a workaround for this? In my css for @fontface , my paths have generally been things like:

wp-content/fonts/

and I've tried putting the font folder at the site root as well, for fonts/

Do I need to go deeper, place the fonts in the theme folder, something like that?
  #6  
Old Feb 23, 2013, 07:00 PM
Jam's Avatar
Jam
 
1,073 posts · Mar 2011
Perth, Western Australia
I did try a couple of font embedding methods (including Fontface from memory), Fontsquirrel gave me success so I wasn't going to try elsewhere.
Even FontSquirrel can be challenging as far as the syntax, font and folder names do have to be exactly correct or no font. But I know it works so it is a case of getting one font to work, then use the exact same method for others. Each font though, is almost as difficult, and often mean (for me) trial and error until you get those font/family names correct.

With Fontsquirrel, I make sure:
The font files are in a /fonts folder of the same hosting ie
www.domain.com/fonts includes all of the font files (fontx-webfont.svg, fontx-webfont.oet, fontx-webfont.ttf, fontx-webfont.woff AND the font file fontx.ttf)
The website can be anywhere on that hosting ie
www.domain.com/mywordpressinstallations/websitex

In the CSS inserts you have your code calling the font from the www.domain.com/fonts folder (full path).

Good luck
__________________
May the learning curve never plateau... Thanks Larry for teaching me heaps.
My Themeframe built sites
  #7  
Old Feb 26, 2013, 08:47 AM
mcphoto
 
116 posts · Apr 2009
I've had no trouble getting the fonts to load - but is Firefox allowing absolute paths for fontface?

I can't get that to work; I can get fonts sitewide using absolute paths in IE and Safari, just not Firefox, so it doesn't seem to be an issue with the paths.
  #8  
Old Feb 26, 2013, 10:48 AM
juggledad's Avatar
juggledad
 
22,312 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
where in FireFox does it look bad? I can't tell
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

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 05:28 PM
image map not working, graphic disappears w/out space after it tbaxter Center area post/pages 3 Jun 21, 2012 03:28 PM
css- How to use a really nice graphic image in place of a horizontal line SharonJ Styling 1 May 20, 2012 08:28 AM
[SOLVED] Graphic image above a colored background Cheers Header configuration & styling 2 Oct 28, 2011 08:40 AM
Problems with adding image/graphic in sidebar Nefeli Sidebars & Widgets 5 Feb 25, 2009 08:16 AM


All times are GMT -6. The time now is 06:12 PM.


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