float z-index of a menu

[williamrouse]

I found a demo version of a jQuery accordion menu that I liked. I want to implement it on my soon to be published home page, What it does not do is that it pushes and pulls the content below it, as down as the accordion expands and contracts. I thought I could solve this by setting the z-index to a large number like 50 so it would sit ?Zwise? above the other HTML mark-up. This does not work.

Is there any way to float the z-index above the markup?

Here is the code from the CSS file:

/*
* Menu code
*/

.menu_list {    
   width: 150px;
   border: solid 1px orange;
}

.menu_head {
   padding: 5px 10px;
   cursor: pointer;
   position: relative;
   margin:1px;
   font-weight:bold;
   background: #eef4d3 url(../images/left.png) center right no-repeat;
   border: solid 1px red;
}

.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;
}

 

Thanks?

WBR

[PicnicTutorials]

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?

[williamrouse]

I am unclear what will happen when JS is turned off.

First I would like to solve the z-index problem and see if it is functional for what I believe it should look like. If I can get that to work, but it is not accessible I would at least have a learning experience although not a menu or a website.

WBR

[PicnicTutorials]

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.

[williamrouse]

 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]

[PicnicTutorials]

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

[williamrouse]

Yes! I would like it to "hover" over the content below, and I would like to understand how this is done. I guess the second part has more to do with me than you.

[PicnicTutorials]

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!

 

$(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]

 

Edited March 14, 2009 by Eric

[williamrouse]

Your changes are not at all what I expected. You have changed only the definition of the menu by making them absolute. Is that correct?

[PicnicTutorials]

Your changes are not at all what I expected. You have changed only the definition of the menu by making them absolute. Is that correct?

 

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

[williamrouse]

I see that, but as I mentioned in the base note, I thought the problem had to do with z-index but obviously not. I have to read about absolute positioning because your solution works, and my frame of thought would not have even considered what you did.

I extended the menu items to 42 in the first section of the accordion, 32 in the second and 22 in the third and it works.

I will make the changes to my Home Page.

Thanks for helping me.

WBR

[PicnicTutorials]

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.