Microsoft.com - Must have [Archive]

View Full Version : Microsoft.com - Must have

mikeym

04-07-2004, 09:13 PM

I really like the grey javascript menu located on Microsoft.com, they really go with my current website and I'd like to have it. Anyone know where I can get this menu or one similar or possibly have it created?

maxor

04-07-2004, 10:06 PM

Which one? The horizontal menu that says...

"Microsoft.com Home | MSN Home | Subscribe | Manage Your Profile"

I'm not to sure where to find it, but I think that could be done with CSS.

Saryooo

04-08-2004, 10:25 AM

Yes this in in CSS.

Zopester

04-08-2004, 01:13 PM

Half an hour's tinkering and I've come up with a valid XHTML 1.0 Transitional version of their menu. It uses an unordered list (<ul="navbar">) and all the styling is shown in the document.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Microsoft's Navigation Bar, done properly!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Kinkamono Internet Services" />

<style type="text/css">

html,body {
margin:0;
padding:0;
}

body {
color:#000;
background-color:#fff;
}

#navcontainer {
margin:75px 0 0 0; /* To bring the navbar down the page as there is nothing else on this page */
font:11px/23px Verdana,Geneva,Arial,Helvetica,sans-serif;
background-color:#f1f1f1;
border-top:1px solid #999;
border-bottom:1px solid #999;
height:23px;
}

#navbar {
margin:0;
padding:0;
}

#navbar li {
display:block;
float:left;
padding:0 2px 0 0;
margin:0 2px 0 0;
}

#navbar li a {
color:#000;
text-decoration:none;
border:1px solid #f1f1f1;
padding:2px 5px;
}

#navbar li a:hover {
border:1px solid #999;
padding:2px 5px;
background-color:#ccc;
}

</style>
</head>

<body>

<div id="navcontainer">
<ul id="navbar">
<li><a href="#">Microsoft.com Home</a> |</li>
<li><a href="#">MSN Home</a> |</li>
<li><a href="#">Subscribe</a> |</li>
<li><a href="#">Manage Your Profile</a></li>
</ul>
</div>

</body>
</html>

Tested and working in IE5.5+, Mozilla Firefox 0.8, Opera 7.23 on Windows XP. Tested and failed (padding and borders didn't show up) on IE5 on Windows XP.

Enjoy! :D

windstormj3

04-08-2004, 02:56 PM

You know DynamicDrive.com has good types of menus, I believe one they said was similar to Microsoft.com, but I'm not sure if its the same look or anything. Just saying, its worth looking at, DD has good scripts. :-)

mikeym

04-09-2004, 01:41 AM

Originally posted by Zopester
Half an hour's tinkering and I've come up with a valid XHTML 1.0 Transitional version of their menu. It uses an unordered list (<ul="navbar">) and all the styling is shown in the document.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Microsoft's Navigation Bar, done properly!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Kinkamono Internet Services" />

<style type="text/css">

html,body {
margin:0;
padding:0;
}

body {
color:#000;
background-color:#fff;
}

#navcontainer {
margin:75px 0 0 0; /* To bring the navbar down the page as there is nothing else on this page */
font:11px/23px Verdana,Geneva,Arial,Helvetica,sans-serif;
background-color:#f1f1f1;
border-top:1px solid #999;
border-bottom:1px solid #999;
height:23px;
}

#navbar {
margin:0;
padding:0;
}

#navbar li {
display:block;
float:left;
padding:0 2px 0 0;
margin:0 2px 0 0;
}

#navbar li a {
color:#000;
text-decoration:none;
border:1px solid #f1f1f1;
padding:2px 5px;
}

#navbar li a:hover {
border:1px solid #999;
padding:2px 5px;
background-color:#ccc;
}

</style>
</head>

<body>

<div id="navcontainer">
<ul id="navbar">
<li><a href="#">Microsoft.com Home</a> |</li>
<li><a href="#">MSN Home</a> |</li>
<li><a href="#">Subscribe</a> |</li>
<li><a href="#">Manage Your Profile</a></li>
</ul>
</div>

</body>
</html>

Tested and working in IE5.5+, Mozilla Firefox 0.8, Opera 7.23 on Windows XP. Tested and failed (padding and borders didn't show up) on IE5 on Windows XP.

Enjoy! :D

I wonder if using that would be legal...hmm. I doubt it, probably copyright infringement.

Zopester

04-09-2004, 07:51 AM

Copyright infringement? For what? A menu style?!

Use the links the way they are, and you may run into some problems, but I seriously doubt you'd ever feel the need to put "MSN Home" into a link on your site.

And check the source code of Microsoft's site. Does that look even remotely like the code I posted above? No? There you go.

Zopester

04-09-2004, 07:53 AM

Plus I do feel it necessary to point out your original post:

I really like the grey javascript menu located on Microsoft.com, they really go with my current website and I'd like to have it. Anyone know where I can get this menu or one similar or possibly have it created?

(emphasis added by me)

I posted code that told you how to do it. Use it at your own risk, but remember you did ask the question.

lorandm

04-14-2004, 01:21 AM

I didn't find anything that says a particular CSS style or javascript can be copyrighted to someone. If they really want to keep it safe, they can encode the source.

Gen-T

04-14-2004, 01:40 AM

Zopester gave you exactly what you wanted, and took the time to create the code for you. Obviously you don't want to use "microsoft" or "msn" (example text), but I think he deserves a thank you for creating what you said you "must have".

Rich2k

04-14-2004, 04:47 AM

That doesn't do the nice little flyouts though :)

Zopester

04-14-2004, 05:41 AM

Nor does microsoft.com. The top bar anyway, which is what the original poster wanted, and what my code replicates (only better)

Loon

04-14-2004, 05:50 AM

You can get that menu from http://aspnetmenu.com

Go to demos it's the "Basic Vertical"

Rich2k

04-14-2004, 06:25 AM

Originally posted by Zopester
Nor does microsoft.com. The top bar anyway, which is what the original poster wanted, and what my code replicates (only better)

No he asked for the grey bar, there are two on Microsoft.com, one vertical and one horizontal. The vertical one contains flyouts.

Zopester

04-14-2004, 06:55 AM

In which case, let Dean Edwards (http://www.dean.edwards.name/IE7/) finish his work on IE7, and I'll have a working version of the vertical menu knocked up in an hour, using valid XHTML, valid CSS and nothing else. Oh and it'll work in IE5 and up, with no ugly javascript.

Just gotta wait for that alpha script to get a little more seasoned first...:)

zeddicus

08-04-2004, 11:07 PM

I found this thanks to google :)

And thank you to the person who wrote the code, you are a gracious html, xml CSS or whatever it is god :P

Not that I've finished groveling :P I could use a little help if possible

I don't mind the horizontal bar, however I need a little help customizing the bar :)

What I would like to do is:
1. make the horizontal area a little smaller, my table is 650pixels long and this menu takes up the whole region, I'm not sure what I need to change to set the width to maybe 648 so I get a little bit of a border that is white.

2. I would like to make the navigation menu to have drop downs (sorta like the nav bar to the left on MS's website)

3. a Website and/or resources where I could learn how to do this would also be appricated.

thanks in advance :)

Informity

08-05-2004, 07:38 AM

This may be of help to you also: http://www.alistapart.com/articles/horizdropdowns/

Zopester

08-05-2004, 07:50 AM

zeddicus,

You're welcome. Glad it was of use to someone! :)

If this is going within a table cell, you might be able to get away with setting a margin. Where the CSS says this:

#navcontainer {
margin:75px 0 0 0; /* To bring the navbar down the page as there is nothing else on this page */

change it to:

#navcontainer {
margin:75px 5px 0 5px; /* To bring the navbar down the page as there is nothing else on this page */

That will give a 5px margin to the left and right. (For your reference, that's the shorthand method of writing margin declarations. The order is top, right, bottom, left. So here, there's a top margin of 75px, right of 5px, bottom of 0 and left of 5px).

As to your dropdown request, the article Informity linked to is excellent, and forms the basis of the menu on my own site (link in sig). Please feel free to study the code there at your leisure. :)

zeddicus

08-05-2004, 11:56 AM

I think a portion of my problem is I'm trying to follow too many things at once and mimic, learn and understand what I'm doing.

Zopester, I tried reading the stuff you had on your site and comparing it to what you posted in this thread and trying to mix and match LoL, which is why I ended up posting.

I also followed the link that informity provided but I think that's added to it a bit heh.

None the less I think I've made some more progress albiet a bit confused.

The tutorial/linkt hat was provided got me a vertical list with menus popping out to the right, whereas the code provided in these pages have the menu horizontal and Zopester's stie has them horizontal but popping out below the menu (which is what I want to do).

In the tutorial it has this

Next, we need to position our list items. Fortunately, these will stack vertically by default, which is what we require. However, we must set the position as relative, because we will need to position the sub-menus absolutely within them.

ul li {
position: relative;
}

However it neglects to tell me how I make it horizontal, it simply says the "Default" is vertical.

What is that command? (to make the menu be horizontal instead of the default)

zeddicus

08-05-2004, 12:41 PM

Whoops and one other thing:

other than the horizontal stuff, I'm also having an issue with the menus not popping out (I even read the article and applied everything in it).

Additionally, additionally, why do CSS "colors" only have 3 chars versus 6? i.e. #fff vs #ffffff (just curious)

I don't know if it makes any difference but the extension I'm using is index.shtml (only because I'm having the page also grab the data and time and put it into the page (i list the code i'm using at the end of this post).

Here is what I have for my page (broken down by section and by no means complete). I've thriple checked everything line by line and letter for letter, it all looks fine, yet I'm having the probs above ?

<head>
<script type="text/javascript" src="scps/drop_down.js"></script>
<style type="text/css">
@Import "style/menu.css";
</style>
</head>

<body>
<table width="650" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="30" bgcolor="#000000" width="650" bordercolor="#000000" border="1">
<ul id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Small Business</a></li>
</ul>
</li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Small Business</a></li>
<li><a href="#">Enterprise</a></li>
</ul>
</li>
</ul>
</ul>
</td>
</tr>
</table>
</body>

<Menu.css>

body {
font: normal 11px verdana;
}

ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}

ul li {
position: relative;
}

li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}

/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc; /* IE6 Bug */
border-bottom: 0;
}

/* Holly Hack. IE Requirement \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

li:hover ul, li.over ul { display: block; } /* The magic */

</menu.css>

<drop_down.js>

// JavaScript Document

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

</drop_down.js>

Here's what i was talking about RE: Date and time and the reason I'm using shtml vs. html




Again, thanks for your help

Matt

BigBison

08-05-2004, 02:29 PM

Originally posted by Lorand M
I didn't find anything that says a particular CSS style or javascript can be copyrighted to someone. If they really want to keep it safe, they can encode the source.

One could also patent one's scripts. Of course, in doing so, one must publish the code in the patent. This is sometimes done for compiled code, but for scripts? No. However, to anyone using Zopester's code, it's a classy touch to give credit where it's due in a comment the line before his code, in your html docs. Or, a 'thanks for the idea' comment if you've altered the code beyond where the links point.

zeddicus

08-05-2004, 06:59 PM

Don't make me start praying to you html gods again, this is drivbing me nuts, I just can't seem to figure it out! ahhh! hehe:eek:

zeddicus

08-05-2004, 11:31 PM

Ok, I clearly don't know what I'm doing at this point LoL

here's the whole page:

ht tp://nemisystem.com/services.shtml

:)

Zopester

08-06-2004, 03:52 AM

ok, one problem that immediately springs out from the source code is this:

<style type="text/css">
@import="style/menu2.css";
</style>

Lose the equals sign! :) It should read:

<style type="text/css">
@import "style/menu2.css";
</style>

That's a good starting point for your debugging! :)

w_grace

08-06-2004, 10:05 AM

Try dynamicdrive.com they have a script to do that menu.

Zopester

08-06-2004, 10:20 AM

Try dynamicdrive.com they have a script to do that menu.

Which was already mentioned on page one of this thread that you obviously didn't bother to read through. :rolleyes:

zeddicus

08-06-2004, 10:35 AM

Zopester - thank you for pointing out the error in the import section, however, I'm still totally lost on what's wrong and now I'm getting an error to debug (doh! I was before you suggested the change).

I did try the other menu bar, however, it's not exactly what I want/need, that bar sticks to the top of the page whereas what I'm looking for will be down in the page :\

Zopester, can you recommend I look at any sites (with tutorails etc...) that may help me debug my issue (I know nothing of java and CSS heh, well not yet at least).

thanks you've really been a big help :)

Zopester

08-06-2004, 10:36 AM

zeddicus, give me a wee while. I'll have a look at the site properly and see if I can figure it out for you.

I would do it right now, but I'm trying to get my PDA to connect to the Internet via my Nokia 6600, and if I don't do it soon both of them will be sailing through the window at a vast rate of knots...oooh!

Zopester

08-06-2004, 11:52 AM

Ahhh, I see the problems - they're twofold. First, the code for the menu is utter garbage, I'm in the process of correcting that now. I'll assume you've used Dreamweaver and it's mangled it a bit.

The second problem is the article Informity linked to was the wrong one (sorry Informity!) The correct one for a horizontal menu with vertical dropdowns as per my own site is http://www.alistapart.com/articles/dropdowns/

I'm messing with the CSS now. Will post a link to a working version shortly.

Zopester

08-06-2004, 12:24 PM

Right, I've got a semi-working version up here:

http://www.kinkamono.com/design/examples/nemi/

I've made a few changes to the page as a whole, and it now validates to XHTML Transitional 1.0 (just so I could be sure any mistakes wren't due to it not validating).

It works great in Firefox, but in IE (5.0, 5.5 and 6) it needs work. For some reason the dropdown part of the menu is shifting to the right, and I can't work out why (it's Friday afternoon, give me a break!)

I'll tinker with it later unless someone else can come up with a solution. Hope I've helped start you off anyway! :)

zeddicus

08-06-2004, 12:38 PM

Originally posted by Zopester
Ahhh, I see the problems - they're twofold. First, the code for the menu is utter garbage, I'm in the process of correcting that now. I'll assume you've used Dreamweaver and it's mangled it a bit.

The second problem is the article Informity linked to was the wrong one (sorry Informity!) The correct one for a horizontal menu with vertical dropdowns as per my own site is http://www.alistapart.com/articles/dropdowns/

I'm messing with the CSS now. Will post a link to a working version shortly.

Thanks for the help so far Zopester, no rush on this :)

You mentioned something about Dreamweaver, should i be using soemthing else? I'm in no way at the point of using the ultra elite editor - notepad (at least for this stuff) and I've since migrated from the cripiling FrontPage.

Some of that mangling was most likely me heh, between my origianl posting of the code, I've takent he liberity of messing with it without really knowing what I was doing and trying to look at other examples and source to try and put the puzzle togehter :P

You are probably on the East Coast, since it's still Friday morning for me heh

Zopester

08-06-2004, 03:12 PM

You are probably on the East Coast, since it's still Friday morning

Nowhere close. The UK. :)

Hope you saw the semi-working version. I'll do more as and when. :)

zeddicus

08-09-2004, 11:41 AM

Thanks for everything so far Zopester,

So I've now been able to take what you provided me and modified it :)

Now, I need to make the drop down menu look a bit nicer (I liked the visual effect from the original). Can you tell me which part I should look at which identified this in the code?
(if you could drop me a hint versus telling me straight out it will help me learn it versus just being given the answer ;P)

thanks,

Matt