SRL Archive - General

CSS drop down menu, horiz. buttons


Ejjman

2008-10-20 19:06:02

So the buttons are like this…


[Home][Facts][Contact]

something of that sort, and I don't want to actually post the site. But anyway, I want to on mouse over the facts to create a vertical drop down of items in a nice looking way.

I'm beginner to CSS and Javascript, but I think it shouldn't be super hard.

Thanks.
-Ejj

Dan Cardin

2008-10-20 19:31:54

Very googleable.

For dropdown - http://javascript-array.com/scripts/simple_drop_down_menu/#
And afaik for the sideways menu you make an unordered list and do "float: left" to get it to be horzontal.
:)

TravisV10

2008-10-20 20:04:04

Dude Javascript is for drop down menus. They are complex so dont bother. Use a premade one

ebk forever

2009-01-13 09:54:47

Umm they are not complex?? thats like really basic nooby JS?

Floor66

2009-01-13 10:03:02

They are NOT COMPLEX AT ALL!

<html>
<head>
<script type="text/javascript">
function drop_down(item_number)
{
var obj = document.getElementById('item'+ item_number);
if (obj.style.display == "block")
{
obj.style.display = "none";
}
else
{
obj.style.display = "block";
}
}
</script>
</head>
<body>
<div id="menu">
<a href="javascript:drop_down('1');" onMouseOver="drop_down('1');" onClick="drop_down('1');">[mouse me over]</a>
<div id="item1" style="display: none;" onMouseOut="drop_down('1');">
<a href="#">Link 1</a><br />
<a href="#">Link 2</a><br />
<a href="#">Link 3</a><br />
<a href="#">Link 4</a><br />
</div>
</div>
</body>
</html>

Correct me if I'm wrong.

Craig`

2009-07-14 10:22:39

Sorry, this is bumping an old thread, but it's just so that if anyone else looks at it, then they'll have an answer.
The best way to accomplish the _is_ to use javascript, but I would suggest using jQuery, search youtube for jQuery and then one of DetachedDesigns videos does exactly what you want ;]

note: - I chose jQuery because of it's absolute ease, it's really cool