Roll Over Images as Primary Or Secondary Menus [#1120432]

Hello,

I have searched but found little info on how to do this without breaking or deviating from the theme itself.

What I want to do is have roll over images as menu items instead of text. I want to try am personalize the my site a bit. I am sure it can be done I just do not know where to make the edits. I am comfortable with the required CSS and graphic design. Just need to know what to do and where with Drupal and Zen.

Any suggestions would be appreciated. Thanks kindly.

Comments

Comment #1

Jayson Wonder commented 23 April 2011 at 18:21

Is this possible?

Comment #2

pixelwhip commented 28 April 2011 at 16:31

This is very much possible. The best place to make the edits is to create a Zen sub-theme. This will allow you to override any CSS and HTML you want, by building on top of the base Zen theme.

This screencast may help:
http://drupalonlinetraining.com/youtube/linwclark/drupal-7-basic-theming...

Comment #3

Deepika.chavan commented 29 April 2011 at 06:15

Hi,
I tried the rollover effect on my menu items. I added following code in css file (here- 'menu-268' is class of my primary menu item).

#navigation ul li.menu-268 a, #navigation ul li.menu-268 a:visited {
    display: block;
    text-decoration: none;
    text-indent: -9999px;
    height: 39px;
    background-repeat: no-repeat;
}

#navigation ul li.menu-268 {
    padding: 0;
    margin: 0;
    height: 39px;
    width: 100px;
    list-style: none;
    background-repeat: no-repeat;
}

#navigation ul li.menu-268 {
  background-image: url(../images/rollover01.gif);
}

#navigation ul li.menu-268:hover{
  background-image: url(../images/rollover01a.gif);
}

Placed 'rollover01.gif' and 'rollover01a.gif' images in '/images/.' directory. Cleared all cached data.
I hope this is what you wanted.

Rgrds,

Deepika Chavan.

Comment #4

barraponto

he / him

commented 16 May 2011 at 13:59

Version:

7.x-5.x-dev

» 7.x-3.x-dev

In order to have images instead of texts, you should copy http://api.drupal.org/api/drupal/includes--menu.inc/function/theme_menu_... to your template.php, rename it to YOURSUBTHEME_menu_link and change it accordingly. Although you are better off changing the styles just through CSS, using text-replacement instead of rollovers. It would be cleaner semantically, and easier to code. (You might want to look into image sprites as well).

Comment #5

Jayson Wonder commented 19 May 2011 at 18:12

Thanks for the comments. I am going to have experiment with both methods to see which works best. I am thinking the second method seems more challenging for a relatively new Drupal user.

On simple non-drupal sites I used to use a css on;ly method that used one images and changed the portion of the image that was displayed based on mouse over. The problem is to identify the various sections of css in the many template pages in Drupal.

I will give this a shot though.

I appreciate all for replying and I will write back with my progress.

Comment #6

f0ns commented 8 June 2011 at 15:40

I have achieved this on my website using only css:

These CSS classes must go in your ZEN subtheme in navigation.CSS

#main-menu {
	
}


#main-menu li {
	padding-right:3px;
	list-style-type:none;
	display:inline;
}

#main-menu li a  {
	background-image:url(../images/boc_nav_tab.jpg);
	background-repeat:no-repeat;
	text-decoration:none;
	color:#000;
	display:inline-block;
	text-align:center;
	padding-top:5px;
	width:100px;
	height:29px;
}

#main-menu li a:hover {
	background-image:url(../images/boc_nav_tab_vlag.jpg);
	background-repeat:no-repeat;
	display:inline-block;
	text-align:center;
	padding-top:5px;
	width:100px;
	height:29px;
}

If you still can't figure this out on your own then please contact me :)