SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2000
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Menu Style (similar to Microsoft side menu)

    Hello,

    I am atttempting to create a menu similar to the menu that Microsoft uses on the left side of their pages (www.microsoft.com) .

    I am using onmouseover(out) with the code below.
    Code:
    .borderOn{ border: solid 1px #BEBF89;
     background: #DEDECA;
     font-size: 11px;
    } 
    .borderOff { border: solid 1px #F0F0E8;
     background: #F0F0E8;
     font-size: 11px;
    } 
    ...
    <tr><td onmouseover="this.className='borderOn'"
    onMouseOut="this.className='borderOff'" class="borderOff">
    <a href="link.html">Link Text</a></td></tr>
    There are still 2 things I would like to achieve...

    1) The link is only active when the mouse is over the text and not the entire box ( a la microsoft). How can the entrie outlined box be the link?

    2) I would also like to have the active page's link be shown different, ie. white background. I suppose I could go through a loop to look for active page... all pages will be PHP, but if there is an easier (& more efficient) way I would like to use it.

    Thanks for any help,
    Andrew

  2. #2
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1) You could actually use the display attribute to turn the <a> links in to block elements.

    You could then deal directly with the a:link, a:visited, ... pseudo-classes as usual to specify the background and text colour.

    This means the link fills the <td>.

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    	<title>Untitled</title>
    	<style type="text/css">
    	
    	.menu td {
    	width: 60px;
    	text-align: center;
    	}
    	
    	.menu a:link, table a:visited {
    	display: block;
    	color: #000;
    	font: 12px Arial, Georgia, serif;
    	text-decoration: none;
    	padding-top: 7px;
    	padding-bottom: 7px;
    	text-align: center;
    	background: #fc0;
    	}
    	
    	.menu a:hover, table a:active {
    	color: #fff;
    	text-decoration: none;
    	background: #f00;
    	}
    	
    	</style>
    </head>
    <body>
    <table cellspacing="3" cellpadding="0" class="menu">
    	<tr>
    		<td>
    			<a href="#">Link1</a>
    		</td>
    		<td>
    			<a href="#">Link2</a>
    		</td>
    		<td>
    			<a href="#">Link3</a>
    		</td>
    		<td>
    			<a href="#">Link4</a>
    		</td>
    		<td>
    			<a href="#">Link5</a>
    		</td>
    	</tr>
    </table>
    </body>
    </html>
    You may need to use padding-top and padding-bottom to heighten the link 'blocks' to the same height as their <td> container.
    vertical-align (css) does not function in this situation.

    Alternatively, you may choose to stick with using align and valign in the <td> to 'center' the link text instead.

    --

    2) At the risk of stating the obvious, you could/would do that by adding a class to whichever of the menu links was the current page.
    This class would be used to override the a:link, ... attributes already in use.

    I got my first PHP book from the library today, so I'm not gonna be much help to you on how to detect which link points to the current page and how to echo/print the class="..." into that <a> tag.

    Sorry.

    ---


    All that aside, the microsoft.com left-column menu is just a plain, tabled column of links with a:hover pseudo-class on them.
    There is no effect when mousing over the surrounding <td>. Only the text of the link is responsive.

    At least not in Camino and IE5.2 (both Mac).

    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2000
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Only the first link behaves correctly (or as I described). The other links will only be activated when over the text and not the box.

    Here's a graphical representation of what the MS site looks like...


  4. #4
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Even in that MS specific menu I'm still getting no surrounding box/coloured bg.

    Odd...


    Anyway, it's clear what you're after and the code I posted will do that for you.
    (or was your last post actually talking about problems with the code I posted?)
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2000
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually it doesn't work properly in IE 6.0, but does in Netscape 6.x.

    The problem for IE is...

    That "Link 1" will be highlighted when over the text or the box...

    Links 2-5 are only highlighted when over the text, but not the box.

    It's usually Netscape that causes the problems!?!


    ... thanks for the code. - Andrew

  6. #6
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you possibly post a link to an online copy of the page you are working on?

    It might be easier to have the exact code you are using in front of me to see if the problem is being caused by code elsewhere on the page.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2000
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is just a copy and paste of your code from above. I tried to make some changes, but to no avail.

    I made the TD width 120px to help illustrate the (hovering) problem, otherwise the code is the same.

    http://www.inglewoodcs.com/test_menu.html

  8. #8
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Take a look at this:
    http://webfx.eae.net/

  9. #9
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm, works fine for me (still)

    Just out of curiosity, try this:
    Code:
    ...
    <table cellspacing="3" cellpadding="0" class="menu">
     <tr>
      <td>
       <a href="#">Link1</a>
      </td>
     </tr>
     <tr>
      <td>
       <a href="#">Link2</a>
      </td>
     </tr>
     <tr>
      <td>
       <a href="#">Link3</a>
      </td>
     </tr>
     <tr>
      <td>
       <a href="#">Link4</a>
      </td>
     </tr>
     <tr>
      <td>
       <a href="#">Link5</a>
      </td>
     </tr>
    </table>
    ...
    Then, if that still doesn't seem to work, try this:
    Code:
    css...
    table.menu a:link, table.menu a:visited {
     display: block;
     color: #000;
     font: 12px Arial, Georgia, serif;
     text-decoration: none;
     padding-top: 7px;
     padding-bottom: 7px;
     text-align: center;
     background: #fc0;
    }
    
    table.menu a:hover, table.menu a:active {
     color: #fff;
     text-decoration: none;
     background: #f00;
    }
    I've just noticed that my css wasn't 'cleanly' done in the first example.
    IE6 may need the cascade to be explicit and complete.

    The above (new) css should address that.

    Let me know how you get on.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  10. #10
    SitePoint Enthusiast
    Join Date
    Sep 2000
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I removed this part of the css

    .menu td { width: 60px; text-align: center; }

    and moved the size to the table properties and everything seems to be working!

    Thanks for your help.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •