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 »

Navigation with images/hovering?


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

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
 
Prev Previous Post   Next Post Next
  #1  
Old Jul 5, 2009, 04:43 PM
CDJ
 
6 posts · Jul 2009
Navigation with images/hovering?

First of all I'd like to thank for this wonderful theme. For someone like me, who's never been that much into coding, this literally awesome. Thanks!

I'm trying to finalize a design I've made for some time ago, and have so far succeed pretty well. However, I can't seem to figure out how to change the site navigation.
My intention is to change the navigation into images instead of the original one, either with .css or html. I believe I've found a .css code that allows this, but as I don't really know alot about this, I'm only assuming.
My mock up version of the menu looks like this:

And the .css file I've "created" (with a tutorial) looks like this:

Code:
<ul class="menu">
	<li class="nyheder"><a href="#">nyheder</a></li>
	<li class="holdet"><a href="#">holdet</a></li>
	<li class="kampe"><a href="#">kampe</a></li>
	<li class="omos"><a href="#">om os</a></li>
	<li class="partnere"><a href="#">partnere</a></li>
</ul>

.menu {
	margin: 0;
	padding: 0;
	list-style: none;
	background: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/menu_bg.png)
}
.menu li {
	padding: 0;
	margin: 0;
	height: 34px;
	width: 900px;
	margin-right: 1em;
	list-style: none;
	background-repeat: repeat top left;
}
.menu li a, .menu li a:visited {
	display: block;
	text-decoration: none;
	text-indent: -1000px;
	height: 34px;
	background-repeat: repeat top left;
}
.nyheder {background-image: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/nyheder.png); width: 77px;}
.nyheder a {background-image: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/nyheder_g.png);}
.holdet {background-image: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/holdet.png); width: 77px;}
.holdet a {background-image: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/holdet_g.png);}
.kampe {background-image: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/kampe.png); width: 77px;}
.kampe a {background-image: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/kampe_g.png);}
.omos {background-image: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/omos.png); width: 77px;}
.omos a {background-image: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/omos_g.png);}
.partnere {background-image: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/partnere.png); width: 77px;}
.partnere a {background-image: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/partnere_g.png);}
ul.menu li a:hover {background: none;}
.menu li {float: left;}
.menu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
(http://www.cdjgfx.dk/menu.css)

Is this possible to create this menu (with a static background as well as hovering images) within this template? If so, how?

Edit: The URL for the site is http://skoven-gaming.dk/wordpress/.. I'm sure that the .css "file" I uploaded are lacking some links and stuff, so guess the link could be somewhat vital.

Last edited by CDJ; Jul 5, 2009 at 04:51 PM. Reason: Added url of my website.
 

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
next and previous navigation in the consulted category lkjc Page & Category Menu Bars 4 Jun 1, 2009 05:25 PM
Navigation plugin integration nello Page & Category Menu Bars 6 Apr 1, 2009 08:24 AM
disabling left navigation silentone Atahualpa 3 Wordpress theme 3 Mar 9, 2009 07:38 AM
Navigation Breadcrumbs ...recommendations? Shepherd Jim Plugins & Atahualpa 3 Feb 27, 2009 10:49 PM
Centering Page Navigation cks Page & Category Menu Bars 1 Feb 6, 2009 03:23 PM


All times are GMT -6. The time now is 11:55 PM.


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