Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

JavaScript Forum


You are currently viewing our JavaScript Forum as a guest. Please register to participate.
Login



Reply
Old 03-31-2009, 05:25 PM Navigation Bar
konetch's Avatar
Ultra Talker

Posts: 258
Trades: 0
I'm havving problems with the navigation bar on my website. It uses some css and javascript.
Heres the css code:
Code:
ul {
  padding: 0;
  margin: 0;
  list-style: none;
  }
li {
  float: left;
  position: relative;
  width: 6em;
  background-color: #003366; 
  border-left: .1em #000000 solid;
  color: #ffffff;
  cursor: pointer;
  text-align: center;
width:107px;
padding:.3em;
  }
li ul {
  display: none;
  position: relative; 
  }
li > ul {
 top: .3em;
 left: .0em;
 }
li:hover ul, li.over ul{ display: block; }
.list {
  text-align:left;
  border: none;
  background-color: #DDDDDD;
  width: 10em;
  border: 1px #333333 solid;
  }
.navbar {
width:107px;
background-color:#003366;
padding:.3em;
text-align:center;
color:#FFFFFF;
float: left;
}
.navbar:hover {
width:107px;
background-color:#15548B;
padding:.3em;
text-align:center;
color:#000000;
float: left;
}
.navlink {
color:#FFFFFF;
text-decoration:none;
margin:0;
}
.navlink:hover {
color:#FFFFFF;
text-decoration:none;
margin:0;
}
Here's the Html code:
Code:
<ul id="nav">
  <li><a href="http://www.konetchreport.com"><p class="navlink">Home</p></a></li>
  <li><a href="http://www.konetchreport.com/column.php"><p class="navlink">Editor's Column</p></a></li>
  <li><a href="http://www.konetchreport.com/politics.php"><p class="navlink">Politics</p></a>
    <ul>
      <li class="list"><a href="">&raquo; Home</a></li>
      <li class="list"><a href="">&raquo; Articles</a></li>
      <li class="list"><a href="">&raquo; Columnists</a></li>
    </ul>
  </li>
  <li class="navbar"><a href="http://www.konetchreport.com/sports.php"><p class="navlink">Sports</p></a>
    <ul>
      <li class="list"><a href="">&raquo; Home</a></li>
      <li class="list"><a href="">&raquo; Articles</a></li>
      <li class="list"><a href="">&raquo; Columnists</a></li>
      <li class="list"><a href="">&raquo; Live Scores/News</a></li>
    </ul>
  </li>
  <li><a href="http://www.konetchreport.com/funny.php"><p class="navlink">Funny</p></a>
    <ul>
      <li class="list"><a href="">&raquo; Home</a></li>
      <li class="list"><a href="">&raquo; Articles</a></li>
      <li class="list"><a href="">&raquo; Columnists</a></li>
    </ul>
  </li>
  <li><a href="http://www.konetchreport.com/travel.php"><p class="navlink">Travel</p></a>
    <ul>
      <li class="list"><a href="">&raquo; Home</a></li>
      <li class="list"><a href="">&raquo; Articles</a></li>
      <li class="list"><a href="">&raquo; Columnists</a></li>
      <li class="list"><a href="">&raquo; More</a></li>
    </ul>
  </li>
  <li><a href="http://www.konetchreport.com/links.php"><p class="navlink">Links</p></a>
    <ul>
      <li class="list"><a href="">&raquo; Home</a></li>
      <li class="list"><a href="">&raquo; Reviews</a></li>
      <li class="list"><a href="">&raquo; Sites</a></li>
    </ul>
  </li>
  <li><a href="http://www.konetchreport.com/submit.php"><p class="navlink">Submit</p></a>    
    <ul>
      <li class="list"><a href="">&raquo; Home</a></li>
      <li class="list"><a href="">&raquo; Apply for a Column</a></li>
      <li class="list"><a href="">&raquo; Write an Article</a></li>
      <li class="list"><a href="">&raquo; Report a Bug</a></li>
    </ul>
  </li>
</ul>
Heres the Javascript code:
Code:
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;
THe problem is whenever you hover over the link the list that display under it moves the text, and disrupts the page. I'm not sure how to fix this and I do not know javascript very well.

If you want to see the page with the problem you can view it at:
http://www.konetchreport.com

And if you need more information just ask. Thanks.

-Alex Konetchy
konetch is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 03-31-2009, 06:35 PM Re: Navigation Bar
vangogh's Avatar
Post Impressionist

Posts: 10,688
Name: Steven Bradley
Location: Boulder, Colorado
Trades: 0
Try using the suckerfish menu system. It's less complicated than trying to use the JavaScript you're using.
__________________
l Search Engine Friendly Web Design |
Please login or register to view this content. Registration is FREE

l Tips On Marketing, SEO, Design, and Development |
Please login or register to view this content. Registration is FREE

l
Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
vangogh is offline
Reply With Quote
View Public Profile Visit vangogh's homepage!
 
Old 03-31-2009, 06:45 PM Re: Navigation Bar
konetch's Avatar
Ultra Talker

Posts: 258
Trades: 0
I did. This is the exact copy of what the suckerfish menu is.
konetch is offline
Reply With Quote
View Public Profile
 
Old 03-31-2009, 07:46 PM Re: Navigation Bar
vangogh's Avatar
Post Impressionist

Posts: 10,688
Name: Steven Bradley
Location: Boulder, Colorado
Trades: 0
No it's not. The JavaScript is different and that's likely what's causing the issue.

Here's the JavaScript for Suckerfish

Code:
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);
Also your css doesn't ever use the sfhover class that get's created. The sfhover class is the heart of the suckerfish menu system and it doesn't appear anywhere in your code above.
__________________
l Search Engine Friendly Web Design |
Please login or register to view this content. Registration is FREE

l Tips On Marketing, SEO, Design, and Development |
Please login or register to view this content. Registration is FREE

l
Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
vangogh is offline
Reply With Quote
View Public Profile Visit vangogh's homepage!
 
Old 03-31-2009, 08:02 PM Re: Navigation Bar
konetch's Avatar
Ultra Talker

Posts: 258
Trades: 0
Ok. I guess you're right. I used the older suckerfish menu version. Thanks for the help.

Regards, Alex Konetchy
konetch is offline
Reply With Quote
View Public Profile
 
Old 04-01-2009, 10:08 PM Re: Navigation Bar
konetch's Avatar
Ultra Talker

Posts: 258
Trades: 0
I'm sorry for not posting this earlier, but the script that you just gave me doesn't work in IE but works fine in Mozilla. How would you fix that.

Thanks, I used the same code that you gave me in an earlier post. If you need me to show you I can do that.

-Alex Konetchy
konetch is offline
Reply With Quote
View Public Profile
 
Old 04-02-2009, 07:13 PM Re: Navigation Bar
vangogh's Avatar
Post Impressionist

Posts: 10,688
Name: Steven Bradley
Location: Boulder, Colorado
Trades: 0
Do you mind posting a link to the site? You can send via PM if you don't want to post. When you say it's not working In IE do you mean it's not working at all or is it that the submenus don't appear quite where they should?
__________________
l Search Engine Friendly Web Design |
Please login or register to view this content. Registration is FREE

l Tips On Marketing, SEO, Design, and Development |
Please login or register to view this content. Registration is FREE

l
Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
vangogh is offline
Reply With Quote
View Public Profile Visit vangogh's homepage!
 
Old 04-02-2009, 11:54 PM Re: Navigation Bar
konetch's Avatar
Ultra Talker

Posts: 258
Trades: 0
Yeah. A link to the site would be http://www.konetchreport.com. In IE the hover function doesn't work. If you want to see an example page:
http://www.konetchreport.com/help

It works fine in FF but the hover function doesn't work. Take a look at the source code.
konetch is offline
Reply With Quote
View Public Profile
 
Old 04-03-2009, 07:22 PM Re: Navigation Bar
vangogh's Avatar
Post Impressionist

Posts: 10,688
Name: Steven Bradley
Location: Boulder, Colorado
Trades: 0
I'm not seeing anything off in the code. Unless I'm missing something it looks fine. One thing you might need is a doctype for IE. Try adding one to the test page and see if that does the trick.
__________________
l Search Engine Friendly Web Design |
Please login or register to view this content. Registration is FREE

l Tips On Marketing, SEO, Design, and Development |
Please login or register to view this content. Registration is FREE

l
Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
vangogh is offline
Reply With Quote
View Public Profile Visit vangogh's homepage!
 
Old 04-03-2009, 09:21 PM Re: Navigation Bar
konetch's Avatar
Ultra Talker

Posts: 258
Trades: 0
No, it didn't work. On the older suckerfish menu it used a li.over. Could you add this somehow?
konetch is offline
Reply With Quote
View Public Profile
 
Old 04-05-2009, 08:07 PM Re: Navigation Bar
vangogh's Avatar
Post Impressionist

Posts: 10,688
Name: Steven Bradley
Location: Boulder, Colorado
Trades: 0
I'm not sure what you're asking. In the new suckerfish it would be .sfhover so li.sfhover.
__________________
l Search Engine Friendly Web Design |
Please login or register to view this content. Registration is FREE

l Tips On Marketing, SEO, Design, and Development |
Please login or register to view this content. Registration is FREE

l
Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
vangogh is offline
Reply With Quote
View Public Profile Visit vangogh's homepage!
 
Reply     « Reply to Navigation Bar
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.31519 seconds with 12 queries