CODEWITHSUNDEEP
jqueryhtmlcss
Hanna
Hanna

Reputation: 10753

Working with "circular stacked" elements

I have CSS dropdown menus, jquery dialogs, and other jquery components on my webpage.

The problem I'm having is that the dropdown menus need to be above the other jquery components but below the dialogs, and the components need to be above the dialogs but below the dropdown and the dialogs need to be above the dropdowns but below the components.

Visual Aid:

enter image description here

So this problem isn't as easy as just setting a z-index.

I've tried quickly hiding/showing the menu when a dialog is opened (effectively hiding the menu as it relies on the hover to stay active to stay open).

Code:

$('.allegDropdownMenu').css("display", "none");
$('.allegDropdownMenu').css("display", "");

The problem is that this code seem to execute so quickly that he hover state never become inactive.

I've added a timeout of 10ms but it seems like a really messy and hacky way of doing it.

So I guess I'm wondering if anyone has any solutions for this type of problem?

Upvotes: 2

Views: 48

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 105863

could pseudo element in blue box covering green box do the trick ? 

div {
  height:2em;
  line-height:2em;
  width:8.5em;
  background:gray;
  position:relative;
  text-align:center;
  text-shadow:0 0 2px white;
}
#blue  {background:#505DDA;z-index:3;}
#red   {background:#DA5050;z-index:2;}
#green {background:#50DA74;}
#blue:after {
  content:'';
  display:inline-block;
  height:2.6em;
  width:2em;
  right:2px;
  bottom:0;
  position:absolute;
  background:#50DA74;
  transform:rotate(-27deg) ;
}

#blue {
  transform:rotateZ(90deg) ;
  transform-origin:7% 80% ;
}
#red {
  transform:rotateZ(27deg);
  transform-origin: 40%;
}
#green {
  transform:rotateZ(-27deg) ;
  transform-origin:right 110%;
}

<div id="blue"> BLUE </div>
<div id="red"> RED </div>
<div id="green"> GREEN</div>

demo http://codepen.io/gc-nomade/pen/vKCeF

Upvotes: 1

Related Questions