How microsoft.com did this...

  • Thread starter Thread starter M.Siler
  • Start date Start date
M

M.Siler

I'm looking at the main page of microsoft.com and I have figured out how the
menu and submenu's are working. But I can't seem to find how they are
getting the Right Triangle that indicates there is a submenu. Can anyone
help me here?
 
Hi,
the easiest way would be to make a little triangle in your graphics program
give it a transparent background and set it as the background to the links
that have sub menus. So you might have something like
..subMenuLink a{
background: #999 url(triangle.gif) right no-repeat;
......rest of your styles
}
here's an example of something similar I did as a demo
http://myweb.tiscali.co.uk/jonspivey/menus/examples/vertical/index.html

Whenever you see something you like on a page you can analyse the CSS to see
how it's done. I'd suggest downloading this tool
http://www.mrgrieves.com/cssbrowser/

It will let you easily view the CSS on any page just by right clicking

Jon
Microsoft MVP - FP
 
Don't do it the way they did theirs - it only works on IE. If you use proper
CSS it will work on any modern browser. Basically you want some container
for your menu, such as a div table cell etc that has a width and then define
links within that area. Here's how I'd do the MS menu (without the sub menus
obviously) stick it on a page mess around with it and see how far you get

<style type="text/css">
#menu{
width:180px;
background-color: #ccc;
padding:0 2px;
font: 12px arial;}
#menu a.subLink{
background: #ccc url(flyout_arrow.gif) 170px no-repeat;}
#menu a{
border: 1px solid #ccc;
text-decoration:none;
display:block;
text-decoration:none;
color: #333;
padding-left:6px;}
#menu a:hover{
background-color: #999;
border:1px solid #666;}
</style>
<!--[if gte IE 5]>
<style>#menu a {height:1em;}</style>
<![endif]-->
</head>
<body>
<div id="menu">
<div>Products</div>
<div><a href="#" class="subLink">Windows XP</a></div>
<div><a href="#">Plus!</a></div>
<div><a href="#" class="subLink">Windows Server System</a></div>
</div>

Only thing to note here is we need the conditional comment to make the full
width of the link clickable - IE has a bug that really isnt worth going into
but that's the fix. Also stick a loose doctype on the page. This will work
on all modern browsers - if you care about NN4 comment out the "dangerous"
styles.

Jon
 
Is this it?;

..flyoutMenu {
background-color: #F1F1F1;
border-color: #999999;
border-width: 0 1px 1px 0;
border-style: solid;
behavior: url(/library/flyoutmenu/default.htc);

dunno myself, I'm just learning CSS now.

Robo


| I found the little triangle they use:
| http://microsoft.com/library/flyoutmenu/images/flyout_arrow.gif
|
| But I didn't see anything in their http://microsoft.com/homepage/ms.css
| where they referenced the flyout_arrow.gif
|
| I'll give what you suggest a try, but I was wondering how they did theirs?
|
| | > Hi,
| > the easiest way would be to make a little triangle in your graphics
| program
| > give it a transparent background and set it as the background to the links
| > that have sub menus. So you might have something like
| > .subMenuLink a{
| > background: #999 url(triangle.gif) right no-repeat;
| > .....rest of your styles
| > }
| > here's an example of something similar I did as a demo
| > http://myweb.tiscali.co.uk/jonspivey/menus/examples/vertical/index.html
| >
| > Whenever you see something you like on a page you can analyse the CSS to
| see
| > how it's done. I'd suggest downloading this tool
| > http://www.mrgrieves.com/cssbrowser/
| >
| > It will let you easily view the CSS on any page just by right clicking
| >
| > Jon
| > Microsoft MVP - FP
| >
| > M.Siler wrote:
| > > I'm looking at the main page of microsoft.com and I have figured out
| > > how the menu and submenu's are working. But I can't seem to find how
| > > they are getting the Right Triangle that indicates there is a
| > > submenu. Can anyone help me here?
| >
| >
|
|
 
It is - the problem is behaviors in this sense (not in the sense of FP2003
behaviors) are only supported on IE. There's no need to use IE only stuff
for something as simple as this menu.

Jon
Microsoft MVP - FP
 
Ah thanks. This ng is great, I learn sumpin' gnu every day :-)


| It is - the problem is behaviors in this sense (not in the sense of FP2003
| behaviors) are only supported on IE. There's no need to use IE only stuff
| for something as simple as this menu.
|
| Jon
| Microsoft MVP - FP
|
| Crash Gordon® wrote:
| > Is this it?;
| >
| > .flyoutMenu {
| > background-color: #F1F1F1;
| > border-color: #999999;
| > border-width: 0 1px 1px 0;
| > border-style: solid;
| > behavior: url(/library/flyoutmenu/default.htc);
| >
| > dunno myself, I'm just learning CSS now.
| >
| > Robo
| >
| >
| > | >> I found the little triangle they use:
| >> http://microsoft.com/library/flyoutmenu/images/flyout_arrow.gif
| >>
| >> But I didn't see anything in their
| >> http://microsoft.com/homepage/ms.css where they referenced the
| >> flyout_arrow.gif
| >>
| >> I'll give what you suggest a try, but I was wondering how they did
| >> theirs?
| >>
| >> | >>> Hi,
| >>> the easiest way would be to make a little triangle in your graphics
| >> program
| >>> give it a transparent background and set it as the background to
| >>> the links that have sub menus. So you might have something like
| >>> .subMenuLink a{
| >>> background: #999 url(triangle.gif) right no-repeat;
| >>> .....rest of your styles
| >>> }
| >>> here's an example of something similar I did as a demo
| >>> http://myweb.tiscali.co.uk/jonspivey/menus/examples/vertical/index.html
| >>>
| >>> Whenever you see something you like on a page you can analyse the
| >>> CSS to
| >> see
| >>> how it's done. I'd suggest downloading this tool
| >>> http://www.mrgrieves.com/cssbrowser/
| >>>
| >>> It will let you easily view the CSS on any page just by right
| >>> clicking
| >>>
| >>> Jon
| >>> Microsoft MVP - FP
| >>>
| >>> M.Siler wrote:
| >>>> I'm looking at the main page of microsoft.com and I have figured
| >>>> out how the menu and submenu's are working. But I can't seem to
| >>>> find how they are getting the Right Triangle that indicates there
| >>>> is a submenu. Can anyone help me here?
|
|
 
You must log in or register to reply here.

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Cell Border will not Hide 4
security login 11
Menu Ideas in Access 2010 0
How to open two pages from the banner frame on a three framed page 4
Adding Complex Context Menu to Default Windows Menus 1
Layers/behaviors- Flashing/Flickering Dynamic Menu System 10
How do I? Stupid newbie question I'm sure... 7
Xp submenu help 1

Back
Top