Help on HTML

[MendyGreen]

on this website when you click Quick Links, (above) then a list appears, how the heck does that happen and are you able to make it appear on mouse over?

[RKW]

Chances are that it is using JavaScript. The following site gives you a good tutorial on how to do that sort of thing: http://www.brainjar.com/dhtml/menubar/

[Pixelgamer]

If you are okay with just some source code you can check my very "not-finished-and-contains-no-content" site =)¨

It has small "sub-menus" displayed when you hover the mouse over the menu-items. It only uses HTML ^^ except for some javascript to make it compatible with IE =)

If you want to maybe I can try to explain the code a little better...

[MendyGreen]

If you are okay with just some source code you can check my very "not-finished-and-contains-no-content" site =)¨

It has small "sub-menus" displayed when you hover the mouse over the menu-items. It only uses HTML ^^ except for some javascript to make it compatible with IE =)

If you want to maybe I can try to explain the code a little better...

Im confused, that site is NOT in english!, and I cant see any code that makes the menu popup?

[Pixelgamer]

Oops, yeah, it's also a .css file, you can try downloading those two files, (or copy code and create) to your computer, than you can see the code clearer, and also you can try and change things, different attributes and so...

And it shouldn't matter that the site is in Swedish and not in english? The code is stille the same, right?

But as said, you need to check the css-file... good luck

[MendyGreen]

can u just explain it here, as short as possible or is it too long?

[Pixelgamer]

Well it's quite long, and I don't excactly how to describe it, but I can post the most important code and try to say what it does...

In The HTML file:

<ul id="nav">
  <li><a href="#">Top1</a></li>
  <li><a href="#">Top2</a>
    <ul>
      <li><a href="#">Sub2.1</a></li>
      <li><a href="#">Sub2.2</a></li>
      <li><a href="#">Sub2.3</a></li>
      <li><a href="#">Sub2.4</a></li>
      <li><a href="#">Sub2.5</a></li>
    </ul>
  </li>
  <li><a href="#">Top3</a>
    <ul>
      <li><a href="#">sub3.1</a></li>
      <li><a href="#">sub3.2</a></li>
    </ul>
  </li>
  <li><a href="#">Top4</a>
    <ul>
      <li><a href="#">Sub4.1</a></li>
      <li><a href="#">Sub4.2</a></li>
      <li><a href="#">Sub4.3</a></li>
    </ul>
  </li>
</ul>

This is the code you enter on your html page to view thw whole navigation menu. The whole menu is a <UL> (unordered list) with the id "nav" to able to easy set the css properties for it.



And now the code for the css-file:

#nav {
  float: left;
  width: 470px;
  margin: 25px 0;
  padding: 0;
  background: white;
  list-style: none;
  padding: 0px;
  border: solid #FFB369;
  border-width: 1px 0;
  font-weight: bold;
  }

This is properties for the <ul id="nav"> tag, (the whole menu). Nothing special there, the only necessary thing would probably be the 'float: left' property.



Continues:

#nav li li {width: 98px;}
#nav li {float: left; width: 102px; background: white;}

#nav li a {
  display: block;
  padding: 2px;
  text-indent: 10px;
  text-decoration: none;
  color: #777;

  width: 102px;
  }
#nav li li a {width: 98px;}

The first things there is the width for "sub-items", and the next is some properties for the "top-items" (notice the 'float: left').
Then we have the actual links in the menu. They are as big as the top- and sub- items. And a necessary 'display: block' property.



Still Continues:

/* Holly Hack, Important!-> \*/

* html #nav li {float: left;}
* html #nav li a {height: 1%;}

/* End */

This is an important thing to make it work with internet explorer.

#nav ul {
  position: absolute;
  left: auto;
  display: none;
  border: solid #FFB369;
  border-width: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 102px;
  font-weight: normal;
  }

Here we have some fun code ^^... This is the lists that holds the sub items. All objects are really visible from the beginning except these, that makes the menu show, except for these ul's which contain the drop down menus. the importants are:
position: absolute;
left: auto;
display: none;
to make it display properly.



Not much more to go now.

#nav li:hover ul, #nav li.over ul {display: block;}
#nav li:hover, #nav li.over {background: #FFB369;}
#nav li:hover a, #nav li.over a, #nav a:hover {color: #000;}

This is the code which make menus showup when you hover over them. You may notice that there are both li:hover and li.over thingys, but that is because IE (stupid browser) doesn't have the :hover event for other things than links.



So now we are finsihed, except for some javascript to make the menu compatible with IE :P...

<script type="text/javascript">
  <!--
	function appendClass(node) {
		if(node.className != "flat") {
			node.onmouseover = function() { this.className += "over"; }
			node.onmouseout = function() { this.className = this.className.replace(new RegExp("over\\b"), ""); }
		}
	}
	startList = function() {
	 	var node = document.getElementById("nav").getElementsByTagName("LI");
		for (var i=0; i<node.length; i++) { appendClass(node[i]); }
	} 
	if (window.attachEvent) window.attachEvent("onload", startList);
  //-->
  </script>

Just add that Javascript to the html file where your menu is and voila =)

Just tell me if it didn't work :P
And also, you don't need to read everythin, you can just cope paste it into a html file...

You also make the menu with even more sub-menus, you just have to tweak it a little and some more things here and there... easy peasy

[MendyGreen]

Hey thanx! works like a charm

[Pixelgamer]

Yay nice to hear ^^... You can also have a vertical menu, but I like that style better