Jump to content

Javascript drop down help...

summerpewp

By summerpewp
in Javascript Help

 Share

Recommended Posts

summerpewp Member

summerpewp

Posted
Posted

Need some help...

 

I'm using son of suckerfish drop down menu and i need to modify it for submenu's but dont know what i'm doing... javascript isn't my language but seems to be the most universal ...

 

this is the suckerfish php code:

 

<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
}
}
window.onload=startList;
</script>

 

The nav menu uses LI UL html code with css implimented... shown below:

 

.....<li class="menuitem"><a href="#" class="link">MENU 1</a>
<ul id="nav">
<li><a href="#" class="link">NO SUB MENU</a></li>
<li class="menuitem"><a href="link.php" class="link">OPENS SUB MENU</a>
<ul id="sub"> [b](This is what i added)[/b]
	<li><a href="#" class="link">EXAMPLE1</a></li>
	<li><a href="#" class="link">EXAMPLE2</a></li>
	<li><a href="#" class="link">EXAMPLE3</a></li>
	<li><a href="#" class="link">EXAMPLE4</a></li>
	<li><a href="#" class="link">EXAMPLE5</a></li>
	<li><a href="#" class="link">EXAMPLE6</a></li>
	<li><a href="#" class="link">EXAMPLE7</a></li>
	<li><a href="#" class="link">EXAMPLE8</a></li>
	<li><a href="#" class="link">EXAMPLE9</a></li>
     </ul>
        </li>.....

 

This is the CSS style sheet with some changes i used to make it work, but its not working.. :(

 

ul {
  padding: 0;
  margin: 0;
  list-style:none;
  border-style: solid;
  border-width: 0px;
  text-align: center;
  }
  
ul.sub {
  padding: 0;
  margin: 0;
  list-style:none;
  border-style: solid;
  border-width: 0px;
  text-align: center;
  }
  
li {
  float: left;
  position: relative;
  text-align: left;
  width: 10em;
  }
  
li ul {
  background-color: #FFFFFF;
  display: none;
  position: absolute; 
  top: 23px;
  left: 13px;
  padding-left: 5px;
  padding-bottom: 5px;
  padding-top: 4px;
  padding-right: 5px;
  border-style: solid;
  border-width: 1px;
  }

li > ul {
top: auto;
left: auto;
}

li:hover ul, li.over ul{ 
display: block; 
height: auto;
width: 10em;
list-style: none;
}

li.menuitem {
width: auto;
text-align: center;
border-style: none;
padding: 5px;
margin: 5px;
background-color: #FFFFFF;
}

li.menusub {
width: auto;
text-align: center;
border-style: none;
padding-left: 10em;
margin: 5px;
background-color: #FFFFFF;
}

li.sub:hover ul, li.sub ul{ 
display: block; 
height: auto;
width: 10em;
list-style: none;
}

.navmenu {
width: 828px;
height: 37px;
background-image: url(../images/links.gif);
border-style: none;
background-repeat: no-repeat;
text-align: center;
vertical-align: middle;
padding-top: 0;
}

.sfield {
border-style: solid;
border-color: #000000;
border: 1px;
padding-top: 5px;
padding: 2px;
margin: 2px;
font-size: 11px;
}

.sbutton {
border-style: solid;
border-color: #000000;
padding: 1px;
border: 1px;
margin: 2px;
font-size: 11px;
background-color: white;
}

li.menuitem {
text-align: center;
font-size: 12px;
padding-right: 0px;
padding-left: 16px;
}

Link to comment
Share on other sites
phpQuestioner Regular Member

phpQuestioner

Posted
Posted

try this code instead:

 

<style type="text/css">
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1.40em;
}

#nav a {
display: block;
width: 10em;
}

#nav li { /* all list items */
float: left;
width: 10em; /* width needed or else Opera goes nuts */
}

#nav li ul { /* second-level lists */
position: absolute;
background: white;
width: 10em;
        border:solid 1px black;
        padding: 5px 10px 10px 10px;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li ul ul { /* third-and-above-level lists */
margin: -1em 0 0 10em;
}

#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */
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>

</head><body>

<ul id="nav">

<li><a href="#">MENU 1</a>
	<ul>
		<li><a href="#">NO SUB MENU</a></li>
		<li><a href="#">OPENS SUB MENU</a>
			<ul>
	<li><a href="#" class="link">EXAMPLE1</a></li>
	<li><a href="#" class="link">EXAMPLE2</a></li>
	<li><a href="#" class="link">EXAMPLE3</a></li>
	<li><a href="#" class="link">EXAMPLE4</a></li>
	<li><a href="#" class="link">EXAMPLE5</a></li>
	<li><a href="#" class="link">EXAMPLE6</a></li>
	<li><a href="#" class="link">EXAMPLE7</a></li>
	<li><a href="#" class="link">EXAMPLE8</a></li>
	<li><a href="#" class="link">EXAMPLE9</a></li>

			</ul>
		</li>
</ul>

 

to add another second level menu - do this:

 

		<li><a href="#">Level One Name</a>
			<ul>
	<li><a href="#" class="link">Level 2 Name A</a></li>
	<li><a href="#" class="link">Level 2 Name B</a></li>
	<li><a href="#" class="link">Level 2 Name C</a></li>
			</ul>
		</li>

Link to comment
Share on other sites
summerpewp Member

summerpewp

Posted
  • Author
Posted

This works great except for one problem...

 

I need the total width to be 850px and the text NOT to drop a line...

 

is that possible? Because when i tried doing it, .. the MAIN menu goofs up... or the sub menu goofs up...

 

below are pictures of each.. i can't figure it out.. ARGH!

 

this is default...

 

image1.jpg

 

This is what happens when i try to adjust the table width...

 

image2.jpg

 

I need a mixture of both

 

i need it to align the second image, with the drop downs to look like the first image.. is this possible?

Link to comment
Share on other sites
phpQuestioner Regular Member

phpQuestioner

Posted
Posted

here is about the best I can get it; your still going to have a scrollbar at the bottom of the screen. you could try setting the font to a small size; that may help with that.

 

but anyway - here's the code:

 

<style type="text/css">
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1.40em;

}

#nav a {
display: inline;
width: 6em;

}

#nav li { /* all list items */

float: left;
width: 6em; /* width needed or else Opera goes nuts */
}

#nav li ul { /* second-level lists */

position: absolute;
background: white;
width: 6em;
        border:solid 1px black;
        padding: 5px 10px 10px 10px;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li ul ul { /* third-and-above-level lists */

margin: -1em 0 0 6em;
        position: absolue;
}

#nav li:hover ul ul, #nav li.sfhover ul ul {

left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */

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>

</head><body>

<table width=850px><td>

<ul id="nav">

<li><a href="#">Menu1</a>
	<ul>
		<li><a href="#">Sub Menu1</a></li>
		<li><a href="#">Sub Menu2</a>
			<ul>
	<li><a href="#" class="link">Example1</a></li>
	<li><a href="#" class="link">Example2</a></li>
	<li><a href="#" class="link">Example3</a></li>
	<li><a href="#" class="link">Example4</a></li>
	<li><a href="#" class="link">Example5</a></li>
	<li><a href="#" class="link">Example6</a></li>
	<li><a href="#" class="link">Example7</a></li>
	<li><a href="#" class="link">Example8</a></li>
	<li><a href="#" class="link">Example9</a></li>

			</ul>
		</li>

</ul>

</td><td>

<ul id="nav">

<li><a href="#">Menu2</a>
	<ul>
		<li><a href="#">Sub Menu1</a></li>
		<li><a href="#">Sub Menu2</a>
			<ul>
	<li><a href="#" class="link">Example1</a></li>
	<li><a href="#" class="link">Example2</a></li>
	<li><a href="#" class="link">Example3</a></li>
	<li><a href="#" class="link">Example4</a></li>
	<li><a href="#" class="link">Example5</a></li>
	<li><a href="#" class="link">Example6</a></li>
	<li><a href="#" class="link">Example7</a></li>
	<li><a href="#" class="link">Example8</a></li>
	<li><a href="#" class="link">Example9</a></li>

			</ul>
		</li>

</ul>

</td>

<td>

<ul id="nav">

<li><a href="#">Menu3</a>
	<ul>
		<li><a href="#">Sub Menu1</a></li>
		<li><a href="#">Sub Menu2</a>
			<ul>
	<li><a href="#" class="link">Example1</a></li>
	<li><a href="#" class="link">Example2</a></li>
	<li><a href="#" class="link">Example3</a></li>
	<li><a href="#" class="link">Example4</a></li>
	<li><a href="#" class="link">Example5</a></li>
	<li><a href="#" class="link">Example6</a></li>
	<li><a href="#" class="link">Example7</a></li>
	<li><a href="#" class="link">Example8</a></li>
	<li><a href="#" class="link">Example9</a></li>

			</ul>
		</li>

</ul>

</td><td>

<ul id="nav">

<li><a href="#">Menu4</a>
	<ul>
		<li><a href="#">Sub Menu1</a></li>
		<li><a href="#">Sub Menu2</a>
			<ul>
	<li><a href="#" class="link">Example1</a></li>
	<li><a href="#" class="link">Example2</a></li>
	<li><a href="#" class="link">Example3</a></li>
	<li><a href="#" class="link">Example4</a></li>
	<li><a href="#" class="link">Example5</a></li>
	<li><a href="#" class="link">Example6</a></li>
	<li><a href="#" class="link">Example7</a></li>
	<li><a href="#" class="link">Example8</a></li>
	<li><a href="#" class="link">Example9</a></li>

			</ul>
		</li>

</ul>

</td><td>

<ul id="nav">

<li><a href="#">Menu5</a>
	<ul>
		<li><a href="#">Sub Menu1</a></li>
		<li><a href="#">Sub Menu2</a>
			<ul>
	<li><a href="#" class="link">Example1</a></li>
	<li><a href="#" class="link">Example2</a></li>
	<li><a href="#" class="link">Example3</a></li>
	<li><a href="#" class="link">Example4</a></li>
	<li><a href="#" class="link">Example5</a></li>
	<li><a href="#" class="link">Example6</a></li>
	<li><a href="#" class="link">Example7</a></li>
	<li><a href="#" class="link">Example8</a></li>
	<li><a href="#" class="link">Example9</a></li>

			</ul>
		</li>

</ul>

</td><td>

<ul id="nav">

<li><a href="#">Menu6</a>
	<ul>
		<li><a href="#">Sub Menu1</a></li>
		<li><a href="#">Sub Menu2</a>
			<ul>
	<li><a href="#" class="link">Example1</a></li>
	<li><a href="#" class="link">Example2</a></li>
	<li><a href="#" class="link">Example3</a></li>
	<li><a href="#" class="link">Example4</a></li>
	<li><a href="#" class="link">Example5</a></li>
	<li><a href="#" class="link">Example6</a></li>
	<li><a href="#" class="link">Example7</a></li>
	<li><a href="#" class="link">Example8</a></li>
	<li><a href="#" class="link">Example9</a></li>

			</ul>
		</li>

</ul>

</td><td>

<ul id="nav">

<li><a href="#">Menu7</a>
	<ul>
		<li><a href="#">Sub Menu1</a></li>
		<li><a href="#">Sub Menu2</a>
			<ul>
	<li><a href="#" class="link">Example1</a></li>
	<li><a href="#" class="link">Example2</a></li>
	<li><a href="#" class="link">Example3</a></li>
	<li><a href="#" class="link">Example4</a></li>
	<li><a href="#" class="link">Example5</a></li>
	<li><a href="#" class="link">Example6</a></li>
	<li><a href="#" class="link">Example7</a></li>
	<li><a href="#" class="link">Example8</a></li>
	<li><a href="#" class="link">Example9</a></li>

			</ul>
		</li>

</ul>

</td><td>

<ul id="nav">

<li><a href="#">Menu8</a>
	<ul>
		<li><a href="#">Sub Menu1</a></li>
		<li><a href="#">Sub Menu2</a>
			<ul>
	<li><a href="#" class="link">Example1</a></li>
	<li><a href="#" class="link">Example2</a></li>
	<li><a href="#" class="link">Example3</a></li>
	<li><a href="#" class="link">Example4</a></li>
	<li><a href="#" class="link">Example5</a></li>
	<li><a href="#" class="link">Example6</a></li>
	<li><a href="#" class="link">Example7</a></li>
	<li><a href="#" class="link">Example8</a></li>
	<li><a href="#" class="link">Example9</a></li>

			</ul>
		</li>

</ul>

</td><td>

<ul id="nav">

<li><a href="#">Menu9</a>
	<ul>
		<li><a href="#">Sub Menu1</a></li>
		<li><a href="#">Sub Menu2</a>
			<ul>
	<li><a href="#" class="link">Example1</a></li>
	<li><a href="#" class="link">Example2</a></li>
	<li><a href="#" class="link">Example3</a></li>
	<li><a href="#" class="link">Example4</a></li>
	<li><a href="#" class="link">Example5</a></li>
	<li><a href="#" class="link">Example6</a></li>
	<li><a href="#" class="link">Example7</a></li>
	<li><a href="#" class="link">Example8</a></li>
	<li><a href="#" class="link">Example9</a></li>

			</ul>
		</li>

</ul>

</td>

</table>

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.