Note that there are some explanatory texts on larger screens.

plurals
  1. POTrying to make animated nav bar in Jquery
    primarykey
    data
    text
    <p>Im attempting to make a navigation bar with Jquery. the idea is that you click on the navigation button and several links(in the form of divs) will slide out. However, i am unable to get the initial click action to work. Currently im just trying to move the #Home button to the left 100px after you click the #clickme button.</p> <pre><code> &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;Untitled Document&lt;/title&gt; &lt;script src = "jquery-2.0.1.js"&gt;&lt;/script&gt; &lt;script&gt; $("#clickme").click(function(){ $("#Home").animate({left: 100} , "fast"); }); &lt;/script&gt; &lt;style type="text/css"&gt; #Nav { position:absolute; width:200px; height:115px; z-index:1; top: 268px; left: 530px; background-color: blue; } .Button{ position:absolute; width:200px; height:115px; z-index:0; background-color:#693; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="Nav"&gt; &lt;div id="Home" Class = "Button"&gt;Home&lt;/div&gt; &lt;div id="About" Class = "Button"&gt;About The Internship&lt;/div&gt; &lt;div id="Meet" Class = "Button"&gt;Meet the Interns&lt;/div&gt; &lt;div id="Request" Class = "Button"&gt;Request an Intern&lt;/div&gt; &lt;div id="clickme" Class = "Button"&gt;Navigation&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload