html - JQuery Menu Not Working Correctly -


i trying out jquery menu widget , reason not working. have tried both in browser , on jsfiddle (http://jsfiddle.net/evanvee/manh4/2/).

html code:

<html lang="en"> <head>     <meta charset="utf-8">     <title>page title</title>     <link rel="stylesheet" href="template.css">      <link rel="stylesheet" href="includes/jquery/themes/base/jquery.ui.all.css">     <script src="includes/jquery/jquery.ui.core.js"></script>     <script src="includes/jquery/jquery-1.9.1.js"></script>     <script src="includes/jquery/jquery.ui.widget.js"></script>     <script src="includes/jquery/jquery.ui.position.js"></script>     <script src="includes/jquery/jquery.ui.menu.js"></script>      <script>         $(function() {             $( "#menu" ).menu();         });     </script>     <style>         .ui-menu { width: 150px; }     </style> </head> <body> <div id="container">     <div id="banner">         <h1>page heading</h1>     </div>     <div id="nav">         <ul id="menu">             <li class="ui-state-disabled"><a href="#">aberdeen</a></li>             <li><a href="#">ada</a></li>             <li><a href="#">adamsville</a></li>             <li><a href="#">addyston</a></li>             <li>                 <a href="#">delphi</a>                 <ul>                     <li class="ui-state-disabled"><a href="#">ada</a></li>                     <li><a href="#">saarland</a></li>                     <li><a href="#">salzburg</a></li>                 </ul>             </li>             <li><a href="#">saarland</a></li>             <li>                 <a href="#">salzburg</a>                 <ul>                     <li>                         <a href="#">delphi</a>                         <ul>                             <li><a href="#">ada</a></li>                             <li><a href="#">saarland</a></li>                             <li><a href="#">salzburg</a></li>                         </ul>                     </li>                     <li>                         <a href="#">delphi</a>                         <ul>                             <li><a href="#">ada</a></li>                             <li><a href="#">saarland</a></li>                             <li><a href="#">salzburg</a></li>                         </ul>                     </li>                     <li><a href="#">perch</a></li>                 </ul>             </li>             <li class="ui-state-disabled"><a href="#">amesville</a></li>         </ul>     </div>     <div id="content">         <p><h2>page heading</h2></p>         <p>ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. duis autem vel eum iriure dolor in hendrerit in </p>      </div>     <div id="footer">         footer stuff here     </div> </div> </body> </html>

for reason, bullets showing menu items rather actual menu in example. missing easy can't seem figure out problem is. haven't deviated example @ all. also, have never had problems jquery code in past.

any appreciated!

you hadn't included jquery , jquery ui in fiddle:

    $(function() {         $( "#menu" ).menu();     });

http://jsfiddle.net/manh4/7/

also check developer console errors.


Comments

Post a Comment