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?
Printable View
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?
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/
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? :confused:Quote:
Originally Posted by 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 :)
can u just explain it here, as short as possible or is it too long?
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:
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.HTML Code:<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>
And now the code for the css-file: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.HTML Code:#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;
}
Continues:The first things there is the width for "sub-items", and the next is some properties for the "top-items" (notice the 'float: left').HTML Code:#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;}
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:This is an important thing to make it work with internet explorer.HTML Code:/* Holly Hack, Important!-> \*/
* html #nav li {float: left;}
* html #nav li a {height: 1%;}
/* End */
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:HTML Code:#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;
}
position: absolute;
left: auto;
display: none;
to make it display properly.
Not much more to go now.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.HTML Code:#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;}
So now we are finsihed, except for some javascript to make the menu compatible with IE :P...Just add that Javascript to the html file where your menu is and voila =)HTML Code:<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 tell me if it didn't work :P :wave:
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 :)
Hey thanx! works like a charm :wave:
Yay nice to hear ^^... You can also have a vertical menu, but I like that style better ;)