change z-index with javascript

Question

i am making a website in php

i make left menu like this

enter image description here

these menu coming from database in one string. i am printing it with echo. i use image as a background to each menu.

now i want like this

enter image description here

i have a arrow image.

i know i can do it with z-index. but i cant do it with only css. so i need a help to do it with javascript. i want to change the html using javascript or jquery

Daniel Doezema · Accepted Answer · 2011-05-19 17:18:31Z

3

For an all CSS solution try to building your menu like this...

<style type="text/css">
  .menu li {
    background:url(path/to/gradient.png) top left repeat-x;
  }
  .menu li a {
    display:block;
    padding:2px 5px;
    backround:url(path/to/arrow.png) bottom right no-repeat;
  }
</style>


<ul class="menu">
  <li><a href="fanclub.php">Fan Club</a></li>
  <li><a href="blog.php">Blog</a></li>
  <li><a href="poll.php">Poll</a></li>
</ul>

If you must do your solution in JavaScript (which I suggest you avoid) you can access the z-index property of any element (that supports it) like so:

// DOM Scripting Example (Single Element)
myElement.style.zIndex = 1000;

// jQuery Example (All elements with the "arrow" class)
$('.arrow').css('z-index', 1000);

edited May 19, 2011 at 17:18

answered Feb 2, 2011 at 5:14

Daniel Doezema

1,59210 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

corroded Over a year ago

i would suggest an unordered list for your menu though. since it is technically a list of navigation links :)

Andy Baird · Accepted Answer · 2011-02-02 05:08:29Z

1

Using jquery:

$(function() {
    $('.myselectorclass').css('z-index','1000');
});

Replace '1000' with your desired z-index value, of course

answered Feb 2, 2011 at 5:08

Andy Baird

6,2674 gold badges46 silver badges64 bronze badges

Collectives™ on Stack Overflow

change z-index with javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related