PicnicTutorials

Thanks Jim! Yeah, all the JS does is slide it out/in slow. As you saw, the basic funtionality of it is not dependent on JS. That makes this type of menu the first of it's kind. You can even have drop menus that slide out of the first slide. Although, there is still one problem remianing with that that I'm trying to figure out.

You don't need any positioning. Just put it there in the normal source order, and it will stay were you put it.

OK, I'm easy! Here's one of of them. It will be moving to a new home later. Pure CSS Slide-In (JS enhanced). Turn JS off and see it still works perfect. Also note, that the menu is position fixed (ie6 too with no jumping). Currently I have to use display none/display block hover/show for the script to work. If just CSS you can use the left -999em/ left 0 method instead in order to make screen readers happy. I really didn't contribute to any of the JS stuff - that was all Paul O'B.

z-index will only place something infront or behind another. It cannot prevent something from moving another. If you simply want the menu to slide down "over" the content, then just take the margin off the "p" and you will see it in action.

What did you expect? I bolded everything I added (i.e. 3 places).

Position absolute. I bolded what I added. Edit - removed code tags - oh ya it won't bold wrapped in code tags. Didn't I report that? Yes I did! Accordion Menu Using jQuery $(document).ready(function() { //slides the element with class "menu_body" when paragraph with class "menu_head" is clicked $("#firstpane p.menu_head").click(function() { $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow"); $(this).siblings().css({backgroundImage:"url(left.png)"}); }); //slides the element with class "menu_body" when mouse is over the paragraph $("#secondpane p.menu_head").mouseover(function() { $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow"); $(this).siblings().css({backgroundImage:"url(left.png)"}); }); }); body { margin: 10px auto; font: 75%/120% Verdana,Arial, Helvetica, sans-serif; } .menu_list { width: 150px; } .menu_head { padding: 5px 10px; cursor: pointer; position: relative; margin:1px; font-weight:bold; background: #eef4d3 url(left.png) center right no-repeat; } .menu_body { display:none; } .menu_body a{ display:block; color:#006699; background-color:#EFEFEF; padding-left:10px; font-weight:bold; text-decoration:none; } .menu_body a:hover{ color: #000000; text-decoration:underline; } Works on clicking Header-1 Link-1 Link-2 Link-3 Header-2 Link-1 Link-2 Link-3 Header-3 Link-1 Link-2 Link-3 Works with mouse over Header-1 Link-1 Link-2 Link-3 Header-2 Link-1 Link-2 Link-3 Header-3 Link-1 Link-2 Link-3 A great deal of text followed by lots more text: Early life Brautigan was born in Tacoma, Washington to Bernard Frederick Brautigan, Jr. (July 29, 1909 ? May 27, 1994) a factory worker, laborer, and World War II veteran and Lulu Mary "Mary Lou" Keho (April 7, 1911 ? September 24, 2005) who was a waitress. Brautigan was baptized in the Roman Catholic faith and was raised in the Pacific Northwest where he lived with his mother, stepfathers and siblings. His father abandoned Mary Lou eight months before Richard was born. Brautigan said that he met his biological father only twice, though after Brautigan's death Bernard Brautigan was said to be unaware that Richard was his child, saying "He's got the same last name, but why would they wait 45 to 50 years to tell me I've got a son."[1]. In 1938, Brautigan and his mother began cohabiting with a fry cook named Arthur Martin Titland. Mary Lou and Titland had a daughter together out of wedlock named Barbara Ann, who was born on May 1, 1939. Brautigan claimed that he had a very traumatic experience when he was six years old, when his mother left him alone with his two-year-old sister in a motel room, where he did not know the whereabouts of his mother until she returned two days later. On January 20, 1943, Mary Lou married a frycook named Robert Geoffrey Porterfield. Mary Lou and Porterfield had a daughter together named Sandra Jean, who was born on April 1, 1945. Mary Lou would tell Brautigan that Porterfield was his biological father, and Brautigan began using "Richard Gary Porterfield" as his surname. Brautigan would suffer physical abuse at the hands of his stepfather, whom he would often witness abusing his mother. Many of Brautigan's childhood experiences were included in the poems and stories that he wrote from as early as the age of 12 through his high school years. His novel So the Wind Won't Blow It All Away is loosely based on childhood experiences including an incident where Brautigan accidentally shot the brother of a close friend in the ear, injuring him only slightly. Throughout his childhood, Brautigan lived in extreme poverty; he told his daughter stories of his mother sifting rat feces from their supply of flour to make flour-and-water pancakes. Because of Brautigan's impoverished childhood, he and his family had trouble getting food and on some occasions would not be able to eat for days. He lived with his family on welfare and moved to various homes in the Pacific Northwest before settling in Eugene, Oregon in 1944. On June 12, 1950, Mary Lou had remarried to William David Folston, a violent alcoholic. Mary Lou and Folston had a son together named William David Folston, Jr., who was born on December 19, 1951. On September 12, 1949, Brautigan entered South Eugene High School, after leaving Woodrow Wilson Junior High School. He was a writer for his high school newspaper South Eugene High School News. He also played on his school's basketball team, and stood at 6 feet 4 inches tall (1.91 m) by the time of his graduation. On December 19, 1952, Brautigan's first poem The Light was published in the South Eugene High School Newspaper. Brautigan graduated from South Eugene High School with honors on June 9, 1953. Following graduation, he moved in with his best friend Peter Webster, and Peter's mother Edna Webster became Brautigan's surrogate mother. According to several accounts, Brautigan stayed with Webster for about a year before leaving for San Francisco for the first time in August 1954, returning to Oregon several times, apparently for lack of money.[2]

OK, so I understand, you simply want it not to move the content below right?

I got it working - it's aaammmaziiinnngggg! I'll post them all in a couple weeks. The easiest, and cleanest Pure CSS... Drop-Down Menu Drop-Line Menu Fly-out Menu Slide-In Menu Tabed Menu

OK, I'll try and get you up and running. But first you I need all your code. Just post your whole test page. Doctype and all. So I (or others) can just copy paste.

Hi, So you don't want it to move the content below it? If so, it needs to be position absolute. Is this being used for your main menu? If so, what hapens to it when JS is off?

Hi, you been around here for awhile, what's your name? I finally found my speed controller, Paul helped me edit it some. Just one more thing to work out, and then it's AMAZING!

Ok here it is (2nd example) http://www.leigeber.com/2008/05/horizontal-javascript-accordion-menu/ now I just need to figure out how to add it to mine.

Hi, yeah I saw that. Long story short - I'm sort of just a copy and paste JS guy - no more.

Hi guys! No, I mean it slides in from out of screen. Well, now with just CSS, it more or less just pops in. So basically, I'd like to find something that slows it down a bit. Then, if JS is off, it still works, just faster! It shouldn't take much. Finding it is the hard part. Edit - like this http://www.dynamicdrive.com/dynamicindex1/slideinmenu.htm The function is there in that script. I just need some help making it work in mine and stripping out all the garbage.

I need to slow down my Slid-In menu on hover with some JS? Is this possible? Here is what I got! I have a pure css slide-in menu, and I simply am looking for some JavaScript that will enable it to slide into view a little slower. You know, with CSS, it's either there or it's not. So I'd like to animate it a little more. Thanks for your help!

That's a nice flash demo Wickham! As fun as my nodes.

You could do what I did on my site (see top left checkbox). http://www.visibilityinherit.com/tools.php that gives them a option or not. If memory serves me correct, I think I got that over at dynamic drive. Or if you just want to open a new window without all the bells and wisles, look under the JS section on that same page above.

You should Google "flash forums" and ask your question there. Because unfortunatly, nobody here knows didly-squat about flash.

Movie analogies - love them! I rarely have an argument (discussion) with out them. Wifey is sick of them though. You a big movie buff I take it? So am I (and my family). I haven't missed a new release in quite a long time. Have you seen "Quarentine" yet? Very scary movie! My wife physically couldn't watch the last fifteen minutes.

Doesn't sound like he wants an actual controller. Don't really know without Googling myself, but, can't you place that code in the head, or give it a zero height/width (or something) so there is no visible controller? From the sounds of it, he only wants one short little sound, so it should'nt be that big of a deal...

Here's the code... { visibility: inherit; } Testing <br /><!--<br />#overlay {<br />float:left;<br />width:150px;<br />height:150px;<br />padding:10px;<br />}<br />#overlay img {<br />position:absolute;<br />top:0;<br />left:0;<br />}<br />--><br />

Your welcome. You may run into some un wanted height with that simple code though. If so, use this instead... .clear { clear:both; line-height:0; height:0; font-size:0; /* kills IE6 bug */ }

Web Design Jobs! Where?

You have to clear the floats. Put this below the floats and above the div needing to be moved.

Look above...