css dropdown menu

cant get the menus aligned vertically...

Page 1 of 1

2 Replies - 3546 Views - Last Post: 01 October 2006 - 10:47 AM

#1 muzza41  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 14-September 06

css dropdown menu

Posted 14 September 2006 - 04:26 PM

hey, iv got a drop down menu working fine, the main coding looks like this:

<style type="text/css">
.menutitle{
cursor:pointer;
margin-bottom: 0px;
background-color:#000000;
color:#BBBBBB;
width:140px;
padding:2px;
text-align:center;
/*/*/border:2px solid #000000;/* */
}

.submenu{
	margin-bottom: 0.5em;
	background-color:#000000;
	color:#BBBBBB;
	Width:140px;
	padding:2px;
	Border: 2px solid #000000;
	text-align:center;
	font-size:10px;
	font-family: "Times New Roman", Times, serif;
}
</style>

<script type="text/javascript">



var persistmenu="yes" 
var persisttype="sitewide"

if (document.getElementById){ 
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
	if(document.getElementById){
	var el = document.getElementById(obj);
	var ar = document.getElementById("masterdiv").getElementsByTagName("span");
		if(el.style.display != "block"){
			for (var i=0; i<ar.length; i++){
				if (ar[i].className=="submenu")
				ar[i].style.display = "none";
			}
			el.style.display = "block";
		}else{
			el.style.display = "none";
		}
	}
}

function get_cookie(Name) { 
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { 
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}

function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}

if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction

if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate

</script>



With the link coding like this...:

<div id="masterdiv">

	<div class="menutitle" onclick="SwitchMenu('sub1')">Home</div>
  <span class="submenu" id="sub1">
		- <a href="home.htm">Your Home</a><br>
		- <a href="www.myspace.com">Myspace</a>
	</span>
	
	<div class="menutitle" onclick="SwitchMenu('sub2')">Friends</div>
	<span class="submenu" id="sub2">
		- <a href="add.htm">Add</a><br>
		- <a href="view.htm">View</a>
	</span>

	<div class="menutitle" onclick="SwitchMenu('sub3')">Pictures</div>
	<span class="submenu" id="sub3">
		- <a href="view.htm">View</a>
	</span>
	
	<div class="menutitle" onclick="SwitchMenu('sub4')">Contact</div>
	<span class="submenu" id="sub4">
		- <a href="comment.htm">comment</a><br>
		- <a href="message.htm">Message</a>
	</span>
</div>


I cant however find the piece of code within this that is telling each menu to be stacked upon each other horizontaly. Im after the menus to be spaced out verticaly so the menus drop down vertically to form a menu bar. Apart from that they work fine!

Any help would be much aprreciated!!

thanxs

neil,

This post has been edited by muzza41: 15 September 2006 - 05:07 AM


Is This A Good Question/Topic? 0
  • +

Replies To: css dropdown menu

#2 coRPse  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 21
  • Joined: 29-September 06

Re: css dropdown menu

Posted 01 October 2006 - 08:07 AM

not totally sure what you mean, I did something that sounds similar a while back and used this

if that's not what you wanted, there is a fantastic resource on dropdown lists at Listamatic which I used before. If not the answer, it's a good reference to start from. :)
Was This Post Helpful? 0
  • +
  • -

#3 kenash88  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 1
  • View blog
  • Posts: 368
  • Joined: 29-August 06

Re: css dropdown menu

Posted 01 October 2006 - 10:47 AM

You know there is an HTML/CSS/Javascript section. Hopefully a moderator will move it for you if your question isn't already answered.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1