I don't know what I am looking for, but when pressing an item, the two others changes for a black background, I can't figure out which rule is applied on those two "not pressed items".
I tried setting active / focus states on the pressed element but had nothing to do with it.
It's a simple bootstrap 3 menu built with the following code:
<ul class="nav navbar-nav navbar-right">
<li>
<a class="user-display-name" href="/galaxy/profile">Pascal Lalonde</a>
</li>
<li><a data-current-locale="en" href="/galaxy/repos?locale=fr">FR</a></li>
<li class="open">
<a class="dropdown-toggle" data-toggle="dropdown" href="/galaxy/"><span class="glyphicon glyphicon-home"></span><i class="fa fa-caret-down borderless"></i></a>
<ul class="dropdown-menu">
<li>
Repository
</li>
<li>TDP</li>
<li>RK</li>
</ul>
</li>
</ul>
What is it I am missing?
Here's the screenshot of the behavior:
[EDIT]
I am being asked to provide sample CSS code, but if I could, this would mean that I'd already have my answer. I don't know what I am looking for.
I am trying to debug the behavior so I can find what is causing this to happen.
Thing is this happens only when I actually press on the "TDP" option, I cannot debug in the console while "pressing" on the item, because a click triggers the link to continue.
So my question here, is what kind of CSS rule could be applied when an item is pressed? If nothing is there, would this mean that Bootstrap actually execute something when pressing on it? It tried looking at the dropdown javascript code, did not see anything like it.
[EDIT #2]
Just realized this happens in the template I am using.
Click here to see.
Choose the user option in the top right menu and then just "press" any of the shown options. All others will be displayed black.
[EDIT #3]
It seems the other elements gets "activated" while pressing the other menu options, this causing the background of the not-pressed items of the menu to change. I still don't understand why forcing the :active state through the browser doesn't apply the css rules, but this fixed what I "don't understand yet"
.navbar .navbar-nav li .dropdown-menu:active {
background-color: #fff;
}
As said by Schmalzy you have a custom CSS it would be nice if you can include that in the question.
Or you can try to change .dropdown-menu > li > a:hover { background-color: transparent; }
Let me if that helps
Related
I have build a dropdown menu that works a sweet as it gets.
Right click on an element, brings up he dropdown menu, i hover over the first choise, soo far so good, the font color and the background color changes as it should and the sub-menue opens. The problem is that when i hover over the sub-menu, the i "loose" the gray background color of the "parent"
Any ideas ?
<div id="contextMenu" class="dropdown-menu" role="menu" style="display: block; left: 997px; top: 438px;">
<ul class="dropdown-menu side" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;"><li class="dropdown-submenu"><i class="fa fa-paste" aria-hidden="true"></i> PARENT OPTION <ul class="dropdown-menu"> <li> <a tabindex="-1" data-url="/common/docitem/copymove/?document=247&dest=1&obj_table=companydocument&f=null" id="add_id_copy_p" style="cursor:pointer;" class="js-movecopy-docitem"> Siblin Option</a> </li>
First things first, you must include a code segment to make it easier to understand the issue, as #Paulie-d and #Rokibol Hasan mentioned. To be honest, this sounds like maybe you have conflicting CSS rules or lack of specificity, which results in your parent element being affected on :hover.
These would be the steps I would use to solve this:
Use the find function of your development IDE (CTRL + F) to find :hover elements. Avoid using very broad CSS selectors.
Make sure you have assigned the correct id and class attributes in the desired section of code.
Refresh your memory on CSS specificity. I provide you this website instead of Mozilla only because I do not know if you can handle it. If you are experienced, prefer this website.
Refresh your memory on CSS selectors.
At this point, go in your CSS and start commenting out and testing one by one sections of code that may affect the parent element you speak of.
in my site i have menu and sub menu
my problem when i focus by tab to the menu, the menu opened like i hovered the menu by mouse.
but when i continued to the sub menu elements with tab the menu closed.
how can i keep the menu open if some of sub element is focused.
of course i can do it via javascript, but i want to know if i can do it with css only.
here is example (try go to links with 'tab' )
li.main{
float:left;
width:200px;
}
li .sub{
display:none;
}
li:hover .sub{
display:block
}
li.main:focus .sub{
display:block
}
<ul>
<li class="main" tabindex="0">
First menu
<div class='sub'>
<ul>
<li>First Link </li>
<li>Second Link </li>
</ul>
</div>
</li> <li class="main" tabindex="0">
Second menu
<div class='sub'>
<ul>
<li>Third Link </li>
<li>Forth Link </li>
</ul>
</div>
</li>
</ul>
With the current possibilities of CSS, you can't, as it was discussed in a lot of questions before (see accessible css dropdown menu for instance).
First of all, you can't use "display:none" in such approach because the link can't be accessed using the next link shortcut (tab key in most of the browsers implementation).
Solutions which work will imply solutions like positioning out of screen. It will restrict the view on screen to the current link as there is no parent() selector in CSS, or you might use a trick like in the above thread (which will work in some browsers and limit the width of the dropdown part).
But no matter the solution, it will not resolve the main problem : a dropdown menu is not the best way to achieve accessibility.
For instance, people with disabilities using eye tracking software will never benefit of a dropdown menu. Neither will people using tablet.
It is always something difficult to use, difficult to understand : What if I click on the category link? Does it open the category main page, or does it open the submenu?
If you really want an accessible menu, do not use a dropdown menu
<div class="nav">
<div class="container">
<ul>
<li><i class="icon-info"></i></li>
<li><i class="icon-edu"></i></li>
<li><i class="icon-employment"></i></li>
<li><i class="icon-skills"></i></li>
<li><i class="icon-photo"></i></li>
<li><i class="icon-personality"></i></li>
</ul>
</div>
</div>
I wanted to make an image navigation bar with active and inactive mode. Active mode is on when hover over or clicked on. So i created the basic navigation list above, then added some CSS codes below.I have already get to the point where browser show all unactive icons by default.
I want to make a single page website, so all navigation icons here will link to a certain place within the page (im also trying to figure out how).
.icon-edu {background-image: url("./Img/Icon-edu.png");
background-repeat: no-repeat;
}
.icon-edu: hover,
.icon-edu: active {
background-image: url("./Img/Icon-edu-active.png");
}
So the problem is, i cannot get the active icon when i hover over the icon, or when they are active. I am not sure what else i need to do?
I am the most newbie-ish newbie, i started with Codecademy and went on making a website. Please take it easy on me :D
firstly you need to have some text in your i tags otherwise it's width will be 0px and you won't see anything (for icons you may want a div with fixed dimensions, but thats another problem) I used a background colour and some dummy text to get it working.
also your selectors don't connect to your a tags. so this will work.
a:hover .icon-edu,
a:active .icon-edu {
background-image: url("./Img/Icon-edu-active.png");
}
for having an active state for a clicked link it's easiest to add another class to the link, in the code that generates the page. In your case you'll need to use jQuery which is a bit more complicated.
im using bootstrap pills as my navigation bar.problem is it is not showing the curent active pill with blue color background(like bootstrap)
here is my code
<div style="margin-left: 15px;margin-bottom: 15px;margin-top: 10px;">
<ul class="nav nav-pills">
<li class="active">
Home</li>
<li class="">Projects</li>
<li class="">Employee</li>
<li>Forum</li>
</ul>
</div>
the output is here
only the home pill is focused
Add this code inside script tags:
$(document).ready(function(){
$(".nav-pills li").click(function(){
$(".active").removeClass("active");
$(this).addClass("active");
});
});
DEMO
To give a full answer based on the comments, your JSFiddle works exactly as expected. The item with the .active class will have the blue background for the pill.
However what I believe you expect to happen is when you click on a link that the pill will automatically become active, this is not how it works.
You will need to generate the menu on the fly and assign the active class during generation or on each page use JS to assign the active class to the correct menu list item. For ease of use I would suggest assigning ID's to the list items so you can do the following:
So say you click on the second menu item, on the Projects.php page you could have the following jquery.
$('#project').addClass("active");
Assuming you gave the menu items IDs.
I have this menu:
<div id="menu-home">
<ul>
<li> a </li>
</ul>
</div>
When I am on the test.php page that corresponds to test menu, I need it's li to have a different style..
I tried
#menu-home ul li:active
but it didn't work..
Thanks
There is no :active state for <li>
Instead you can do it with PHP.
<div id="menu-home">
<ul>
<li <?php if (page is current page) echo ' class="active"';?>> a </li>
</ul>
</div>
And in the CSS, you can give this:
#menu-home ul li.active {}
The <li> element does not have an active state, since it is just meant to be a (stateless) bullet point. The selector :active can only be used on a link; an example can be found here.
However, :active will only highlight the link as it is clicked. After that, it performs whatever action and/or navigation it is set to do and then the link will be visited. From there on you can't tell it apart from the other already visited pages that you are not currently viewing and it does not become "unvisited" again, even if you navigate to another page. So this does not do what you intend.
Instead, I would create a class .active in your CSS where you can define all your custom styling. Then, the PHP that generates your pages needs to take care of setting the class correctly on the selected menu item, ie.: attach class="active" it either to the <li> or the <a> whenever the menu is build.
(yeah, just see Praveen's answer for the code ^^)