I have a menu and a submenu that the parent menu title itself also leads to a page, the submenu opens on mouseover.
My problem is with touch screens, since there is no 'hover' on touch screen, there is no way to access the submenu, since the parent-menu page opens momentarily after the sub-menu appears without leaving time to choose value from it.
So from your experience is there an easy way to adapt the menu to touch-screens?
Is there a simple or conventional way to mimic mouseover on touchscreen?
I am not actually asking for code, but rather what's the common behavior in this scenarios, I already have a website that I want to make touch-screen friendly.
I obviously prefer a CSS solution over a script-based one.
You could have the submenu appear on press, then the user would drag down (still pressing the screen) and on finger up that could select the option.
Alternatively, you can have one click to open the sub menu, then another to select an item.
On a side note, this question would get a better response on https://ux.stackexchange.com/ it deals with user experience related questions
There are several approaches, for a CSS-only solution you could use the :target pseudo class.
.submenu {
display: none;
}
.submenu:target {
display: block;
}
<ul>
<li>
Foo
<ul id="submenu-1" class="submenu">
<li>Bar</li>
<li>Baz</li>
</ul>
</li>
</ul>
Related
Currently, I'm working on the single webpage and got some issue with the final output which is when clicking the link menu, it does not go to the targeted div position(correct me if I'm wrong). And when clicking again the link, it will go to the other position.
I follow this tutorial, callmenick
Here is the reproduction of it, jsfiddle
<nav>
<ul>
<li>Overview</li> <- when any click link, and then click again, there's some action happen. *bugs?*
<li>Tech Spec</li>
<li>Support</li>
</ul>
</nav>
Now I get it,
the Problem is that the fixed nav is not part of the document flow anymore.
Therefore it won't reserve height. Or in other words the rest of the elements don't know its there anymore. Just like display: none;
You need to find a way to push the elements down by the height of the fixed nav but only if the nav is fixed.
There are a couple ways to to that, but it depends on the layout.
First way that comes to mind is applying padding-top: ?px; to the #product-nav, via JS as soon as fixed is applied to the nav.
edit:
https://jsfiddle.net/ju648br4/4/
I see no issue on my machine, but this feature can be approached in a different way. See my example below, this might solve the issue
Add anchor class
Add data attribute
Make global function that scrolls to certain point
So for instance
<div id="button-name"></div>
becomes
<div id="button-name" class="scrollAnchor" data-anchor-dest="#section-more-info"></div>
Now there is a JavaScript action required, this one reads the data-anchor-dest attribute and scrolls to it.
$(".scrollAnchor").click(function(e){
e.preventDefault();
anchorDestination = $(this).data("anchor-dest");
smoothScrollTo(anchorDestination);
});
function smoothScrollTo(element)
{
$("html, body").stop().animate({
scrollTop: $(element).offset().top
}, 1000);
}
Now the usual question, how compatible is it? This compatible, I have tested this myself in IE9 and it works.
This answer may be more of a teardown than a fix, but I hope this helps
What you need to do is to add your missing Buy section and in your navigation add href to the link, like:
<nav>
<ul>
<li>Overview</li>
<li>Tech Spec</li>
<li>Support</li>
<li>Buy</li> <!-- You are missing your href attribute here -->
</ul>
</nav>
All the rest seems to work fine.
First time asking a question here...
I'm making a drop down menu with some effects that I got from cssdeck.com.
Basically the nav is from one source, and the sub menu from another.
I've mixed two cssdeck.com source to make it look like one.
So far, I got the sub menu to appear on hover, but can't make it stay visible so I can click on the sub menu.
The code is pretty long and complicated and I'm not exactly sure how to show/share it for you to check...
How do I make "A" to appear on "B":hover and make "A" stay visible when I move the pointer to "A" to select something on "A"??????
<nav>
<div class="nav_main ph-dot-nav">
Home
<a href="#">About
<div id="sub_about">
<ul>
<li class="li_first">회사소개 </li>
<li>대표인사말 </li>
<li class="li_last">회사연혁</li>
</ul>
</div>
</a>
Services
Portfolio
Partners
Contact
<div class="effect"></div>
</div>
</nav>
Fiddle Demo here
You can solve this, if you also show the submenu if you hover on it. See
https://jsfiddle.net/7xfrod2s/
#sub_about:hover {
visibility: visible;
}
Also I moved the visible: hidden style to the parents tag of ul (#sub_about).
Maybe you need an other :before tag so that there is no gap between the header and the submenu (a curser-bridge so to say) ;)
To achive this with CSS there's are rules your need to stick with. First take a look as this pic.
http://i.imgur.com/IAsz39w.png
(I'd love it, if someone help me post a pic)
must be have no space in between your Menu tag and subMenu. It will fail if there is 1px in between thse element.
use the simple hover stage like follow
subMenu must be children of Menu
hide the subMenu
.subMenu{
display: none;
}
make subMenu appear when you hover on its parent or itself
.menu:hover .subMenu{
display: block;
}
Explaination: the hover state of DOM quite simple. if you are hovering on a child element it also mean that you are hovering on its parent. So this is while you must not let any space inbetween Menuand subMenu. Because the movement your cursor hover on that 1px for 1ms the DOM will understand as the hover state over. So it will hide the subMenu away
For example: in the pic. Pretending like your submenu not hiding, so if you are hovering on subMenu the DOM also understand as you are also hovering on Menu (parent 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 am not sure how to best describe the problem I am having here. I got a CSS driven menu online and adapted it to my needs. It works perfectly in all browsers but in IE it appears that the when you move over from the main navigation to the dropdowns list a items, it does not always capture the movement and then "closes" the dropdown.
I suspect that when you move to over to the dropdown that the list a item does is not a block element thus it closes the dropdown, this only happens if you're not moving to the dropdown and not completely over the text of the list a item.
Here is the link: http://www.tepgtests.co.za/decorex/2012/new_site/ - if you move over from "Shows" to "Durban" and not entirely move your mouse cursor over the word but rather over to the dropdown you will see what it does.
Thank you in advance :)
There's a 1px of white space,
hovering that space closes the submenu because your not hovering the menu anymore...
try removing it by moving the submenu just below the menu:
.navigation_bar .first_level_menu_block {
left: 0;
top: 50px;
}
tested in IE9 , it works
It sounds like your CSS is using the inline-block directive, which is not well supported in IE.
I think this answer may solve your problem, rather than repeat it: Inline block doesn't work in internet explorer 7, 6
I would like to use images for navigation names and change the image for each menu item on hover. What is the best approach for doing this? An example would be great. Each list item would have it's own image for normal, active and mouse over.
I'm trying to make the menu names look like they are being pushed in on mouse over.
It is easy to do with css, just put :hover after the element you want to change.
I did a very quick example without trying the code, so I'm sorry if it doesn't work, but you get the drift.
The HTML:
<ul>
<li class="link1"><a>Link 1</a></li>
<li class="link2"><a>Link 2</a></li>
<ul>
The CSS:
li.link1 {
background: url('img/link1_normal.png');
}
li.link1:hover {
background: url('img/link1_hover.png');
}
li.link2 {
background: url('img/link2_normal.png');
}
li.link2:hover {
background: url('img/link2_hover.png');
}
I got this jsfiddle rigged up for you. It involves the background-image property and the :hover and :active css selectors. You can read up on those here.
It's recommended for this though that you read up on sprites instead of using individual images though, for performance reasons.