2017-02-20 5 views
-1

私は細心の注意を払ってコードをチェックしましたが、何も間違っています。 メニューhereの後にモデリングしましたが、それは実際にはうまくいきません。基本的には、すべてのウルの実行は、ウルulです。jqueryメニューが機能しないのはなぜですか?

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
    
 
     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
     <link rel="stylesheet" href="/resources/demos/style.css"> 
 
     <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
     <script type ="text/javascript"> 
 
    \t 
 
    \t \t <!-- Dropdown menu --> 
 
    \t \t <script> 
 
    \t \t $(function() { 
 
    \t \t $("#dropMenu").menu(); 
 
    \t \t }); 
 
    \t </script> 
 
    <style> 
 
    
 
    \t .ui-menu { width: 150px; } 
 
    \t body{ 
 
    \t 
 
    \t \t background-image: url("background.jpg"); 
 
    \t \t background-repeat: no-repeat; 
 
    \t \t background-size: cover; 
 
    \t 
 
    \t } 
 
    \t h1{ 
 
    \t 
 
    \t \t font-family:"Lucida Calligraphy","Lucida Fax", Arial; 
 
    \t \t color: Beige; 
 
    \t \t text-align:center; 
 
    \t 
 
    \t } 
 
    \t #footer{ 
 
    \t 
 
    \t \t position: absolute; 
 
    \t \t bottom: 0; 
 
    \t \t background-color: rgba(20,90,50,.8); 
 
    \t \t margin-bottom: 0px; 
 
    \t \t padding-bottom: 0px; 
 
    \t \t border-radius:10%; 
 
    \t \t text-align:center; 
 
    \t \t color:beige; 
 
    \t \t margin-bottom: 0px; 
 
    \t 
 
    \t 
 
    \t } 
 
    \t #square{ 
 
    \t 
 
    \t \t height:200px; 
 
    \t \t width: 350px; 
 
    \t \t background-color:rgba(20, 90,50); 
 
    \t 
 
    \t } 
 
    \t #wrapper{ 
 
    \t 
 
    \t \t background-color: rgba(20, 90,50, .5); 
 
    \t \t margin: auto; 
 
    \t \t border-radius:6%; 
 
    \t 
 
    \t } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    
 
    \t <div id="wrapper"> 
 
    
 
    \t \t <h1>Serenity Landscaping <br /> and Property Management</h1> 
 
    \t \t <!-- <div id="square"></div> --> 
 
    \t \t \t <ul id="menu"> 
 
    \t \t \t \t <li><div>Menu</div> 
 
    \t \t \t \t <ul> 
 
    \t \t \t \t \t <li><div>Home</div></li> 
 
    \t \t \t \t \t <li><div>Side Biz</div></li> 
 
    \t \t \t \t \t <li><div>Portfolio</div></li> 
 
    \t \t \t \t \t <li><div>Contact Us</div></li> 
 
    \t \t \t \t </ul> 
 
    \t \t \t \t </li> 
 
    \t \t \t </ul> 
 
    \t 
 
    \t \t 
 
    \t \t <div id="footer"><p>SLPM is owner operated and is dedicated to providing the highest quality service to all customers. 
 
    \t \t <br/>Services in the landscape and property maintenance field</p></div> 
 
    \t 
 
    \t </div> 
 
    \t 
 
    \t <script type ="text/javascript"> 
 
    \t 
 
    \t \t var windowWidth=$(window).width(); 
 
    \t \t var wrapperWidth=(windowWidth/2); 
 
    \t \t var windowHeight=$(window).height(); 
 
    \t \t var wrapperHeight=windowHeight; 
 
    \t \t $("#wrapper").height(wrapperHeight+"px"); 
 
    \t \t $("#wrapper").width(wrapperWidth+"px"); 
 
    \t \t 
 
    \t \t <!-- footer width resizing --> 
 
    \t \t var footerWidth; 
 
    \t \t footerWidth = $("#footer").css("width", wrapperWidth); 
 
    \t \t <!-- footer width resizing --> 
 
    \t \t 
 
    \t \t <!--alert(wrapperWidth);--> 
 
    \t \t <!--alert(windowWidth);--> 
 
    \t </script> 
 
    
 
    </body> 
 
    </html>

+2

どのようなエラーが発生していますか? –

答えて

0

私が見てきた最初の問題は、あなたがあなたのメニューを初期化するための間違ったidを使用しています。

私はあなたのコードのためのフィドルを作成し、いくつかマイナーチェンジを行い、正常に動作しています。

愚かなミスしかありませんでした。

ここではフィドルが働いています。

Working Fiffle

+0

私はIDを修正したので、それ以外のマイナーな変更は何ですか? – sellingItTrue

+0

はエラーを出すのですか?自分のコードを私のコードと比較してください。 –

+0

私はちょうどメニューを初期化するためにドキュメントレディメソッドを使用しました。 –

関連する問題