Dropdown menu

**Kevin A** · 09-09-2011, 14:48

Hey allen,

Ik heb via Google een dropdown menu gezocht die seo friendly is. Ik heb het originele script online gezet, maar hier schijnt toch een bug in te zitten.

Zie: http://tinyurl.com/4yyge7w

Wanneer je een menu item 'hovert", dan zie je de dropdown in werking gaan. Echter, als je nu probeert een menu-item in het dropdown menu aan te klikken, dan verdwijnt het menu vaak (focus van het li item weg, script denkt dus dat je van het menu weg beweegt - wat uiteraard ook voor enkele milliseconden het geval is).

Wie weet er waar de fout zit, of waar iets gewijzigd moet worden?

Hieronder de code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 <title>Drop Down Menu</title>
    <style type="text/css" media="screen">
  ul#menu {
   background: #000000;
   color: #FFFFFF;
   margin: 0;
   padding: 5px 0px;
  }
  ul#menu li {
   display: inline;
   margin: 2px 15px;
   position: relative;
  }
  ul#menu h2,ul#menu h3 {
   font-size: 16px;
   font-weight: bold;
   display: inline;
  }
  ul#menu li a {
   color: #FFFFFF;
   text-decoration: none;
   padding: 0px 5px;
  }
  ul#menu li a:hover {
   text-decoration: underline;
  }
  ul#menu li.subMenu a {
   background: transparent url(menu_open.gif) center right no-repeat;
   padding: 0 17px;
  }
  ul#menu li.subMenu a:hover {
   text-decoration: underline;
  }
  ul#menu div {
   display: none;
  }
  ul#menu li.subMenu div {
   border: 1px solid #ffffff;
   width: 270px;
   position: absolute;
   top: 22px;
   left: 15px;
   padding: 20px;
   background: #000000;
   color: #FFFFFF;
  }
  ul#menu li.hovered div {
   display: block;
  }
  ul#menu li.subMenu div a {
   color: #FFC;
   padding: 0px;
   background-image: none;
   text-decoration: underline;
   display: block;
  }
  ul#menu div h3 {
   color: #f80;
   font-weight: bold;
   font-size: 18px;
  }
  ul#menu div p {
   margin: 0px 0px 14px 0px;
   padding: 0px 12px;
  }
    </style>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function() {
  function showSubMenu(){
   $(this).addClass("hovered");
  }
  function hideSubMenu(){
   $(this).removeClass("hovered");
  }
  $("li.subMenu").hover(showSubMenu,hideSubMenu)
 });
 </script>
</head>
<body>
 <ul id="menu">
  <li>
   <h2><a href="#">Home</a></h2>
  </li>
  <li class="subMenu">
   <h2><a href="#">Articles</a></h2>
   <div>
    <h3>Programming</h3>
    <p><a href="#">C-C++</a> <a href="#">Java</a> <a href="#">Visual Basic</a> <a href="#">PERL</a></p>
    <h3>Web Development</h3>
    <p><a href="#">PHP</a> <a href="#">ASP</a> <a href="#">JSP</a></p>
   </div>
  </li>
  <li class="subMenu">
   <h2><a href="#">Useful Links</a></h2>
   <div>
    <h3>Resources</h3>
    <p><a href="#">Today's Topics</a> <a href="#">Unanswered topics</a> <a href="#">Rules</a></p>
    <h3>Community</h3>
    <p><a href="#">Groups</a> <a href="#">Album</a> <a href="#">Buddies</a></p>
    <h3>Link With Message</h3>
    <p>Check Out Go4Expert's New <a href="#">Jobs Board</a></p>
   </div>
  </li>
 </ul>
</body>
</html>

Alvast bedankt!

- Kevin.

**Wot de Wit** · 09-09-2011, 15:01

Hmm, raar.

Als ik klik blijft het menu gewoon staan.
Eigenlijk doet die niks fout bij mij.

Ik gebruik Mozilla Firefox 5.0

groetjes,

**Kevin A** · 09-09-2011, 15:06

Hmm raar, ik werk met IE, en deze heeft wel het probleem...(Microsoft weer...)

Met FF 3.6 werkt het ook nog niet, blijkbaar is deze bug dan ondertussen gefixt in de nieuwe FF browsers? Hoe doet IE het bij jou?

Alvast bedankt!

**Wot de Wit** · 09-09-2011, 15:08

Ik bedoelde dat die bij mij gewoon werkt in
3.6.22. firefox

en in IE werkt die bij mij ook gewoon.

Teminste als ik een link aan klik dan verdwijnt het menu niet o.i.d

Dropdown menu

Dropdown menu

Re: Dropdown menu

Re: Dropdown menu

Re: Dropdown menu

Tags voor dit bericht

Quick links

Sitedeals

Andere media

Over Sitedeals

Dropdown menu

Dropdown menu

Re: Dropdown menu

Re: Dropdown menu

Re: Dropdown menu

Tags voor dit bericht

Quick links

Sitedeals

Andere media

Over Sitedeals

Inloggen