So, I have a strange error with my CSS dropdown menu.
The website I'm designing has a standard index.html as the homepage which contains two main parts:
menu header at the top.
iframe in the middle where all selected pages are loaded.
The user hovers over one of the four menu categories at the top, a dropdown then appears with all the sub-options and when clicked it will load that page into the frame.
The problem I have, and this is ONLY in Chrome as Firefox & IE work fine, if the user refreshes the page or presses F5, when hovering over one of the menu categories all the sub-options have disappeared. Yet, the strange thing is that the links are still active so even though you cannot see any writing if the user clicks in the area where it should be, the page still loads into the frame.
This has only happened since I changed the homepage to use an iframe instead of just opening the page directly, as the menu content opens over the top of the frame. The CSS that covers these menus is shown below:
.menu-head-td, .menu-item {
transition: background-color 0.25s;
}
.menu-head-td:hover {
background-color:#37465D;
color:#FFFFFF;
cursor:pointer;
}
.menu {
cursor:pointer;
height:100%;
vertical-align:bottom;
}
.menu-content {
display: none;
position: absolute;
background-color:#37465D;
width:100%;
z-index: 10;
opacity:0.9;
left:0px;
top:93px;
}
.menu-item:hover {
background-color:#3466B1;
}
.menu:hover .menu-content {
display: block;
color: #FFFFFF;
}
The menus are all made up of simple and tags, no javascript or anything like that. I should mention that if the user clicks the address bar and just presses enter, it seems to reload the homepage again and the menus are all normal again. Strange hey?!
So I finally found an answer, a user on another site suggested moving around the order in which the browser detects the font files listed in the CSS file.
Originally the *.ttf file was listed above the *.woff file, I rearranged them so that the *.woff file is detected first and it works perfectly. Perhaps Chrome struggles with TTF files.
Related
I'm building a menu with an "indicator" just like this codepen: https://codepen.io/jnowland/pen/XmQGNx
Everything works perfectly except for one little tiny detail: When the link is clicked and that page loads, the indicator animates from the previous child before settling on the link that just became .active. This can't be seen in the linked example, only the hover effect. This is a screen recording of my menu (sorry for the low gif framerate):
You can see how the hover works perfectly but note how the transition jumps from the menu item before after a link is clicked and that page loads. I don't want a transition here. How can I prevent that? My code looks almost exactly the same as the codepen for the parts that control this so please refer to the code in the link.
.Nav-item {
&:last-child {
&:before, &:after {
content: '';
display: block;
position: absolute;
pointer-events: none;
transition: left #{$transition-speed} ease;
}
My initial thought was deleting the transition from this part but it messes up the whole transition so it has to stay.
.Nav-item:nth-child(#{$i}).is-active ~ .Nav-item:last-child:before
{
left:($width*$i)+($width/2)-$width;
.Nav-item:nth-child(#{$i}):hover ~ .Nav-item:last-child:before{
left:($width*$i)+($width/2)-$width !important;
}
Adding the transition inside these two and delete from the first code block doesn't seem to be the right way to go either.
After days of trial and error I accidentally jumped over what I now think is why the menu is persistent and displays this error:
On page load, the tool I work with (MonoSolutions) adds a separate li item first in the list for the swipe menu close button, but it is set to hide for all screen sizes above mobile. This hidden state takes a fraction of a second to load and just before that happens, all nth-child(#) is one step behind. The unwanted transition is seen when the first list item hides.
Note: The code is probably correct, if you'd work outside a stupid WYSIWYG editor.
I'm sitting here scratching my head. There's a problem which in itself is stupid, but I'm unable to fix it! (Yeah you can say I'm stupider than the problem).
Anyway, I have website in which the header menu works on all the pages except on shows pages (there is a group of (Approx 10 pages) which lists different show details).
I have gone through each and every line to detect the problem, but no luck! Even the error console doesn't help me in any way.
Guidance would be appreciated.
Link where the header works :- www.amiteshgrover.com/shows.php
Link where the header doesn't work :- Just go to the shows page (the link mentioned above) and click on any show. Then try to hover on the menu bar, nothing happens? Exactly!
Your #maincanvas is covering the entire header menu.
Change the CSS to:
#mainCanvas {
margin-top:60px;
padding-top:20px;
clear:both;
position:static;
min-width:940px;
z-index:100;
margin-left:125px;
}
The problem is that #main-canvas is in front of your menu, so when you try to click the menu, you're actually clicking #main-canvas.
#main-canvas has z-index: 100 and .nav has no z-index.
To fix it, add position: relative; z-index: 101; to .nav or change your padding-top from #main-canvas to margin-top, this way the #main-canvas won't be at the same position as your menu are.
It seems like sub_styles.css is loaded on all other pages but this one, this style file is what gives the menu it's looks and since it's not loaded on those pages, you see the problematic menu.
I have a menu constructed of divs. For this I am using the default Joomla menu, modified to my own taste. This is a html question though, so that's why I'm posting it here.
The class of the top menu item that has a sub-menu underneath it is called "deeper parent". When this is clicked, instead of going to the link it has, I want it to just open the sub-menu, that's it.
I tried
.deeper {
pointer-events: none;
cursor: default;
}
.parent {
pointer-events: none;
cursor: default;
}
This however, disables the display of the sub-menu as well, which did show up before I used this css code.
Does anyone know how I can make the sub-menu appear upon hover, as well as upon click (for tables ;) ), without referring to the link that's behidn the top menu item?
You cannot disable click events using CSS. This must be done using Javascript/jQuery.
Assuming you're using jQuery on your site which most Joomla site do, you can use the following:
$(document).ready(function(){
$('#element').on('click', function(){
e.preventDefault();
// Rest of code to show the menu
});
});
You could also set the type for the parent menu item to separator in the Joomla Menu Manager which wraps the menu item in <span> tags rather than <a>
I have a master page which contains asp menu control which is dropping down values on hover,which is working fine.But my issue is if the page is having an asp:dropdown list control,the menu is hides behind the dropdownlist select.
what i tried is i put astyle to asp:menu 'DynamicMenuStyle' tag
.DynamicMenu {
z-index: 10000;
}
also provide style to 'DynamicMenuItemStyle' tag
.DynamicMenuItem {
z-index:10000;
}
.DynamicMenuItem:hover {
z-index:10000;
}
a.DynamicMenuItem:hover {
z-index:10000;
}
a.DynamicMenuItem {
z-index:10000;
}
Still the issue is there...any idea?
Try adding z-index to your asp:dropdown lesser than the DynamicMenu. I would suggest you to use the firebug add-on in firefox and try changing the z-index and other css attributes to fix. Hope this helps...
you see the menu because not load inner page.
after inner page loadeed upper side and your menu is back side.
1- you must back your menu to upper side. your css is work.
2- inner page set z-inex=0 and send it back side :)
I have a wordpress site and am using the plugin 'Yet Another Social Plugin' to add social buttons at the end of each post. The problem is on my mobile site which I have customized with WP-Mobile is showing these buttons. I am able to remove all of them except the G+ button. I am able to get it removed using visibility: none; when I do a live edit inside of Chrome developer console but when I apply that in the css it is ignored and I am not even seeing it when I view that tag/class. Is there some trick or something weird about the +1 button that I am missing?
You can view a picture of the issue here, https://dl.dropboxusercontent.com/u/11217802/Screenshot_2013-04-28-00-07-03.png
and a good 'test page' is here,
http://jrummy16.com/test/app-manager-overview/
Our test site is currently jrummy16.com/test. I am just spoofing my User agent to view it on my computer.
Edit
Sorry, I didn't see that you were talking about your mobile site.
In this case, add
.plusone{
display: none;
}
to your CSS - it will hide the entire iframe.
As your G+ "a" as no ID nor class, edit your css to add
.socialmedia-buttons a:nth-child(2) {
display: none;
}
Consider using display:none; rather than visibility:hidden;, as the visibility property holds the placeholder of your div while display suppress it of the flow.
Visibility:hidden; =>
This should do the trick (tried with Chrome inspector on this page).