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)
Related
I have a multi-level drop down menu at http://www.theseymourgroup-comm.net/new/. If you hover over Properties, you will see the first drop down menu come down that includes Commercial and Development. But when you hover over Commercial, you will see that the next level with Active and Sold goes way out to the right. I right clicked that panel and chose inspect element but could not determine what I needed to change in the css to make it move over to hug the first drop down menu. Any help would be appreciated. Thanks
The element with the "Active" and "Sold" entries is absolutely positioned, but it doesn't have settings for top or left / right.
If you add this rule
.nav li ul ul {
left: 150px;
}
you'll come closer to what you want. (I leave the finetuning of that value to yourself...)
I think javascript have some problems. Menu Dropdown use css only.
This is my example. It's very simple for newbie
I have created this CSS drop down menu. The menu works flawless as it should, my only question
is how can I get the sub menus to stay open and not instantly disappear when the mouse is removed off of them?
My code is at this link,
http://fiddle.jshell.net/NJ4UP/
I have tried several things but nothing is seeming to do what I want. I would prefer not to use J-Query or JavaScript, as I'm not that familiar them, but any help will be greatly appreciated!!
All I want and need is for the sub-menus to not instantly disappear if the mouse is not hovering over them. I was thinking a timeout option or something that sets it to close after a predetermined amount of time (ie 5 seconds) or another menu or link is clicked.
Thanks in advanced.
In CSS you may expand area that covers <li> when hovered with a pseudo element : DEMO.
li:hover:before {
content:'';
position:absolute;
width:100px;
height:200px;
background:rgba(0,0,0,0.01);/* not 100% transparent, so it gets the mouse over */
}
In CSS you may delay transition to close your menu DEMO.
do not use display to hide/show the submenu
Use a rule that handles number value.
#menu ul > li ul {
position:absolute;
margin-left:-9999px;
transition:0s 0.5s;/* stay open 0.5sec before to hide again */
}
#menu ul > li:hover > ul {
margin:0;
transition:0s 0s;/* show ! don't wait */
}
You could check this out, maybe it helps:
http://www.w3schools.com/css/css3_transitions.asp
In CSS you may use the experimental rule pointer-events and HTML tabindex attribute .
pointer-events to control mouse events hover <a> in <li> first level.
tabindex for <li> first level , so it can be focused via click & tab.
The idea is:
to shortcut the click events on so <li tabindex="0"> can take the :focus and apply
same rule as :hover.
then once <li> has focus , to give back to ability to receive mouse events.
DEMO - CSS click open/close menu
it alows to open close menu via the key tab
At the moment i believe it is better to set a class instead tabindex and use javasript to toggle class on click , or at least to keep the :hover rule effective.
It can be done somehow for a two level menu too
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>
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.
I get an unordered list by a cms that I want to style.
It works well, but only for the first <li id="link-18"> element. My goal is it to style the <ul> blocks all the way trough, like the first one. See http://jsfiddle.net/UyrdS/3/ (the second and third link shows the toggled <ul> block not on top)
If the second link (level 2 two) is clicked, the toggled new <ul> block shows beside the navigation, but not on top like the level 1 one links does it with his children element <ul>
You can change your css to generate a nice submenu
nav ul>li>ul {
display: none;
margin-left:2em;
}
See the example on http://jsfiddle.net/WrcMX/
I think this is what you wanted
alllinks = $("ul>li>ul");
$('nav a').on('click', function(e) {
alllinks.hide(); //First hide all the links
e.preventDefault();
if ($(this).parent().children('ul').size() > 0) {
$(this).parent().children('ul').toggle();
}
});
I gave up. I'm a pretty worse inquirer :)
Thanks for the answers. Kudos to you all for spending your time. This fiddle is the closest to my question.
http://jsfiddle.net/UyrdS/6/
But it's not dynamic. It has a static width. That is still the problem.