StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POJavascript Menu Selection
text
Body
copied!<p>New to coding, please help me out. I have a sliding code for a vertical nav. When the user hovers over the nav, it slides out to the right. I want it to stay active once the user clicks on the nav. How do I go about doing that? Here is a link to a visiual</p> <p><a href="http://edgecastcdn.net/00009B//TEMP/NAV/index.html" rel="nofollow">http://edgecastcdn.net/00009B//TEMP/NAV/index.html</a></p> <p>in return for you help, here is a joke you guys might enjoy (if you haven't heard of it already)</p> <blockquote> <p>A wife asks her husband, a computer programmer; "Could you please go to the store for me and buy one carton of milk, and if they have eggs, get 6!"</p> <p>A short time later the husband comes back with 6 cartons of milk.</p> <p>The wife asks him, "Why the hell did you buy 6 cartons of milk?"</p> <p>He replied, "They had eggs."</p> </blockquote> <p>Thanks guys, any help is appreciated! Here is the code. Let me know if you need the css too.</p> <pre><code>$(document).ready(function(){ slide("#sliding-navigation", 30, 15, 150, .8); }); function slide(navigation_id, pad_out, pad_in, time, multiplier){ // creates the target paths var list_elements = navigation_id + " li.sliding-element"; var link_elements = list_elements + " a"; // initiates the timer used for the sliding animation var timer = 0; // creates the slide animation for all list elements $(list_elements).each(function(i) { // margin left = - ([width of element] + [total vertical padding of element]) $(this).css("margin-left","-180px"); // updates timer timer = (timer*multiplier + time); $(this).animate({ marginLeft: "0" }, timer); $(this).animate({ marginLeft: "12px" }, timer); $(this).animate({ marginLeft: "0" }, timer); }); // creates the hover-slide effect for all link elements $(link_elements).each(function(i) { $(this).hover( function() { $(this).animate({ paddingLeft: pad_out }, 150); }, function() { $(this).animate({ paddingLeft: pad_in }, 150); }); }); } </code></pre> <p>Here is my CSS code (Updated with Douglas "active" code) Thanks!</p> <pre><code>body { margin: 0; padding: 0; background: #1d1d1d; font-family: "Lucida Grande", Verdana, sans-serif; font-size: 100%; } h2 { color: #999; margin-bottom: 0; margin-left:13px; background:url(navigation.jpg) no-repeat; height:40px; } h2 span { display: none; } p navigation-block { color: #00b7e6; margin-top: .5em; font-size: .75em; padding-left:15px; } #navigation-block { position:relative; } #hide { position:absolute; top:30px; left:-190px; } ul#sliding-navigation { list-style: none; font-size: 0.75em; margin: 30px 0; padding: 0; } ul#sliding-navigation li.sliding-element h3, ul#sliding-navigation li.sliding-element a { display: block; width: 150px; padding: 2px 18px; margin: 0; margin-bottom: 0px; } ul#sliding-navigation li.sliding-element h3 { color: #fff; background:#333333 url(heading_bg.jpg) repeat-y; padding-top: 7px; padding-bottom: 7px; } ul#sliding-navigation li.sliding-element a { color: #999; background:#222 url(tab_bg.jpg) repeat-y; border: 1px solid #1a1a1a; text-decoration: none; } ul#sliding-navigation li.sliding-element a.selected { color: #cc0000; } { color: #FFF; margin-top: 0.5em; font-size: 10pt; padding-left:15px; font-weight: bolder; } ul#sliding-navigation li.sliding-element a:hover { color: #00b7e6; background:#2a2a2a; } #navigation-block p { color: #FFF; margin-top: 0.5em; font-size: 10pt; padding-left:15px; font-weight: bolder; } .active{ padding-left:12px; /*Add whatever other styles you need */ } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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