z-index doesn't seem to work for an open dropdown.
When a user clicks a dropdown first and then hovers top menu (which is a div with position absolute and high z-index), the open dropdown still shows on top of the top menu. I want it to hide beneath the menu.
How can I hide the open dropdown? (without using javascript)
EDIT: Not possible, see How to select options overlapping an absolute positioned DIV?
I have made a fiddle that should illustrate the problem: https://jsfiddle.net/9m84dv6h/2/
Here's the code (when the top menu is open):
HTML:
<div id="topmenu"></div>
<br>
<div class="dropdown">
<select>
<option>1</option>
<option>1</option>
<option>1</option>
</select>
</div>
CSS
#topmenu {
position:absolute;
min-height:80px;
width: 15px;
background: red;
z-index: 50;
}
select {
z-index: 10;
position: relative;
}
.dropdown {
z-index: 10;
position: relative;
}
I think it's browser controlled item that will always appear on top. Try using some plugin like selec2 or chosen for custom dropdown that you can fully control
Related
i have a input tag that can search skills. when i type, the option bar will be under the profile card.
i want to make my select option on top of the profile card. [](https://i.stack.imgur.com/3E724.png)
here is my css code for select option box:
`
.hover {
list-style-type: none;
padding: 0;
margin: 0;
height: 400px;
width:300px;
overflow: auto;
position: absolute;
display:block;
}
`
im trying to make my select option box on top of the profile card
Use z-index
The z-index prioritizes the stacking of elements.
Give the select option a higher z-index than the card element.
You have to add css property z-index to the expended box.
eg. z-index: 12;
*Edit: Everyone is disliking this post :(
So I want a button (I'll make a hamburger text) and when I click the button I want the whole page (the navigation element) to become (100% width and 100 height and I'll put flex in it) the navigation menu and when I click the button again the navigation element disappears.
What I want to know:
How do I do the CSS so that the navigation element opens over everything else?
position:absolute?
(After I know how to put the navigation element over everything else -
Maybe display: none on the navigation page and somehow put it over everything when I change display: visible with JS?)
Where can I find JS (because I don't know it yet) to edit CSS of the navigation element on click?
Something like this from W3, but I will probably need to change the diplay from none to visible and back again:
<button type="button"
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>
In order to set your navigation into full screen, you should use position:fixed property of css. In order to properly hide and show the navbar you should toggle the class of the element instead of directly applying the display style. Take a look at below example to understand it better -
let btn = document.getElementById('btn');
let nav = document.getElementById('nav');
btn.addEventListener('click', function(){
//event listener toggling the active class
if(nav.classList.contains('active')){
nav.classList.remove('active'); //remove active class if already added
} else {
nav.classList.add('active'); //add active class if not added
}
});
html, body{
height: 100%;
width: 100%;
}
nav{
display: none; /*default in hidden state*/
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: red;
color: white;
}
nav.active{
display: inline-block; /*visible if nav element contains active class, applied via JavaScript code*/
}
#btn{
position: fixed;
top: 40px;
left: 10px;
z-index: 100;
}
<nav id="nav">
Full screen content
</nav>
<button id="btn">toggle full screen element</button>
<p>Some static content</p>
Try to add css position:absolute; and z-index=99 to your navigation element and toggle its display with onclick.
I am developing a parallax portfolio site and want to include some jquery features. Currently I have a working drop down gallery but I am wanting to add a dot navigation to the gallery. Once I added the dot navigation, the drop down feature stopped working. I have set up an example on jsfiddle. The first link, shows the drop down feature. (Currently opens up every gallery at the same time.) The second link adds the dot navigation.
http://jsfiddle.net/carincamen/pvphpcuw/12/
HTML:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<p>Click the small black box to show the large rectangle box.</p>
<img class="arrow">
<div class="gallery"></div>
CSS:
.gallery {
position: relative;
width: 620px;
height: 215px;
top: 30px;
left: 50px;
background-color: rgb(0,0,0);
}
.arrow{
position: relative;
width:20px;
height: 20px;
top: 15px;
left: 340px;
background-color: rgb(0,0,0);
}
jQuery:
$(document).ready(function(){
var display =$('.gallery');
$(display).hide();
$('.arrow').click(function(){
$(display).toggle();
});
});
http://jsfiddle.net/carincamen/pvphpcuw/
For ease of demonstration I have color coded the dot navigation buttons to correspond with the slides.
Thank you in advance for your assistance. It is greatly appreciated.
A special thank you for a LinkedIn group memeber who was prompt to take a look. The gallery drops down when clicking the arrow, then the navigation buttons change out the sliders. The small navigation buttons increase and decrease with opacity depending on their corresponding slider, and the large circle moves to the dot navigation that corresponds with the slider. The working code can be found here. Hope this is helpful.
I needed to remove the $(this).next and just use $ and then add $("[class^=gallery]").hide() to remove the previous gallery.
I am using Html and Css to create DropDown Menu in Vertical Direction as shown here.
[http://jsfiddle.net/techspartan/8u8NH/][1]
I am using div to divide my page in two parts such that menu is displayed on left side followed by some content in the remaining space. For example if width of webpage is 1024px than I am allocating 200px to menu and remaining 824px to div that has content. But after using div I am not able to navigate to submenu "3.4.1" and "3.4.2" as shown in the url posted above as I can understand this is happening because the submenu is crossing the space allocated to it.
So how can I solve this problem and I don't want to allocate more width to my menu and that menu should be followed by content.
Any help would be most welcome.
Thanks.
Quick fix is to ensure that the Z-Index is for your nav is higher than the z-index for your content.
The reason it's closing in your fiddle because once you touch the text, you're no longer hovering over your nav but instead hovering over your text.
#nav li {
background-color: #000000;
margin-top: 1px;
position: relative;
width: 125px;
border-radius: 15px;
z-index:10;
}
Increasing z-index on the #nav li fixes this issue.
Fiddle
I have a question about my jQuery Bootstrap Dropdown. I have a problem when I try open the dropdown menu and then try to right click menu, the dropdown will appear disappear. And when I try to scroll down, the dropdown not fit with the root menu.
What I want is :
Make keep dropdown show when I try to right click the menu.
Make dropdown fit (fixed) when I try to scroll bar, it will stay to fit.
CSS :
.dropdown
{
position: absolute;
z-index: 9999999;
display: none;
}
for more detail see my fiddle for demo here
Anyone please advice. Thanks
working jsFiddle
change like this.
.dropdown
{
position: fixed;
z-index: 9999999;
display: none;
top: 35px;
right: 6px;
}
and comment
position() in show method.
and comment
$(window).on('resize', position);