WordPress.org

1. bjp2006
   Member
   Posted 2 years ago #

   I want to create a menu of links that appear to be depressed when passed over with a mouse. The website I've been trying to reverse engineer is http://www.evbc.org the menu on the right. I'm assuming it's done with javascript, but can't figure out how. Any help would be much appreciated! Thank you.

2. alchymyth
   The Sweeper
   Posted 2 years ago #

   no need to yell 'help' as this is a help forum and nearly everyone would like to get some help ;-)

   it can work with css:
   use the pseudo class :hover
   and css sprites, i.e. background images that shift position in the :hover style.
   (search for online tutorials with the bold keywords)

   example:
   

   .menu-tab a:link {
   background-image: url(images/tab-link.jpg);
   background-position: 0px 0px; /* background left top */
   }
   .menu-tab a:hover {
   background-image: url(images/tab-link.jpg);
   background-position: 0px 30px; /* background left 30px shifted */
   }

   tab-link.jpg is an image with the width of your tab, and twice the height (60px in this example),
   top half is the way tou tab looks normally, lower half is how it looks with mouseover.

3. bjp2006
   Member
   Posted 2 years ago #

   thank you. I appreciate this. But does that require the menu tabs to be in a fixed position? currently my site is set up so that it's always in the center.

4. alchymyth
   The Sweeper
   Posted 2 years ago #

   But does that require the menu tabs to be in a fixed position?

   i don't think so. backup your theme files, and try it out - that is the best way to gain experience, and to see what works and what not.
   when you get stuck, report what you have tried, and what did not work.
   and maybe get different help ;-)

5. bjp2006
   Member
   Posted 2 years ago #

   Thank you for your help thus far. I've begun coding the menu, but for some reason the images are not showing up. my html code in-page would look like '< a href=" alink"><div class="menu-tab"></div></ a>' ?
   Or am I missing something? Sorry for the dumb questions.

6. alchymyth
   The Sweeper
   Posted 2 years ago #

   the html for the css example would be the other way round:
   <div class="menu-tab"><a href="link"></a></div>

   you also need to define the width and height of '.menu-tab a:link' in css.

7. bjp2006
   Member
   Posted 2 years ago #

   OK so this is assuming I want text between the and correct? Instead, I want the buttons to be the links themselves with no text over top. This is because the text has to shift with the buttons to look correct. I am able to get the button images to appear to move, but only when there is text placed over them. Any suggestions?

8. alchymyth
   The Sweeper
   Posted 2 years ago #

   if neccessary, enter a   as text:
   

   <div class="menu-tab"><a href="link">&nbsp;</a></div>

Topic Closed

This topic has been closed to new replies.