suckerfish menu ?

[jagguy]

Hi,


q1)I can't move the menu to the right without problems as i set a margin on #headlinks2 and the links get cluttered?

 #headlinks2 {
height:25px;
}

#headlinks2  a {
  color:green;

  display: block;
  text-decoration:none;
  width: 100px;
  font-size:13pt;
  padding-right:5px;
  //margin-left:205px;
}

#headlinks2  a:hover {
  color: white;
  

}

#headlinks2, #headlinks2 ul {
    padding: 0;
	margin: 0;
	list-style: none;
	}
	
#headlinks2 li {
	float: left;
	width: 100px;
	}
	
#headlinks2 li ul {
	position: absolute;
	width: 100px;
	left: -999em;
}

#headlinks2 li:hover ul {
	left: auto;

}

#headlinks2 li:hover ul, #headlinks2 li.sfhover ul {
	left: auto;

}
</style>
<script type="text/javascript">
 sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

</script>

//html

<div id="headlinks2">


	<li><a href="#">Percoidei</a>
		<ul>
			<li><a href="#">Remoras</a></li>
			<li><a href="#">Tilefishes</a></li>
			<li><a href="#">Bluefishes</a></li>

		</ul>
	</li>

	<li><a href="#">Anabant</a>
		<ul>
			<li><a href="#">Climbing perches</a></li>
			<li><a href="#">Labyrinthfishes</a></li>
			<li><a href="#">mex</a></li>

		</ul>
    </li>
    
     <li><a href="#">Percoidei</a>
		<ul>
			<li><a href="#">Remoras</a></li>
			<li><a href="#">Tilefishes</a></li>
			<li><a href="#">Bluefishes</a></li>

		</ul>
	</li>
     <li><a href="#">Anabant</a>
		<ul>
			<li><a href="#">Climbing perches</a></li>
			<li><a href="#">Labyrinthfishes</a></li>
			<li><a href="#">mex</a></li>

		</ul>
    </li>

     <li><a href="#">Percoidei</a>
		<ul>
			<li><a href="#">Remoras</a></li>
			<li><a href="#">Tilefishes</a></li>
			<li><a href="#">Bluefishes</a></li>

		</ul>
	</li>
	<!-- etc. -->



</div>

[ryanbutler]

If you can afford it, go get a REAL menu system:

http://www.projectseven.com/products.../pmm/index.htm

[wamboid]

If you can afford it, go get a REAL menu system:

http://www.projectseven.com/products.../pmm/index.htm

Define real, I quit reading after the words "Requires: Dreamweaver"

[jagguy]

I can't find the answer to this seemingly simple question.

All I want is to move the flyout menu across about 150px. When adding a margin i get the drop down links moved even further than any margin setting. Even setting a -ve margin doesn't solve it.

[felgall]

Try wrapping the whole menu in an extra div and apply the margin required to that. It isn't the ideal solution but sometimes it is the easiest way to move an entire section of your page around.

Suckerfish is THE REAL menu system because it only requires JScript for IE6 and works entirely with CSS in modern web browsers. RyanButler obviously doesn't understand much about web design if he is looking at any menu system that doesn't work 100% in stylesheets for modern web browsers especially if it requires a special program to be able to even insert it in the first place. Maybe eventually he will graduate to using a REAL / SUCKERFISH menu in place of whatever pretend menu system he is currently using.

[Centauri]

First of all, get rid of

#headlinks2, #headlinks2 ul {
    padding: 0;
	margin: 0;
	list-style: none;
	}

- this is over-riding any margins set earlier. Add the list-style to the <li>s as such

#headlinks2 li {
	float: left;
	width: 100px;
	list-style: none;
}

and get rid of default browser paddings and margins using

*{
	margin: 0;
	padding: 0;
}

at the START of your css

Therefore complete css is

*{
	margin: 0;
	padding: 0;
}
#headlinks2 {
	height: 25px;
	margin-left: 50px;
}
#headlinks2  a {
    color:green;
    display: block;
    text-decoration:none;
    width: 100px;
    font-size:13pt;
    padding-right:5px;
}
#headlinks2  a:hover {
    color: red;
}
#headlinks2 li {
	float: left;
	width: 100px;
	list-style: none;
}
#headlinks2 li ul {
	position: absolute;
	width: 100px;
	left: -999em;
}
#headlinks2 li:hover ul, #headlinks2 li.sfhover ul {
	left: auto;
}

The div #headlinks2 should also be chaged to <ul> tags - you have a heap of <li>s without a parent <ul>. No div is actually required - you can apply your margins etc to the #headlinks2 <ul>

Cheers
Graeme

[Centauri]

Also noticed an error in your javascript, probably a result of changing the original id, causing menu not to work in IE6. Change highlighted in red.

<script type="text/javascript">
 sfHover = function() {
	var sfEls = document.getElementById("headlinks2").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

</script>

cheers
Graeme

[jagguy]

hi,
yes i had changed this already 'getElementById("headlinks2")'.

Thanks for the replies as you guys always come up with the answers. I will read and understand changes you offer.